Customize Buttons Appearance

You have 3 ways to customize ‘Add to cart’ buttons appearance:

1. Using Additional CSS Classes option
2. Adding custom CSS
3. Using Elementor widget or Bricks element and set options here

Using Additional CSS Classes option

Here you can set any CSS classes for add to cart buttons to apply additional styling.

Let’s take a deeper look on this at exact case. We switched theme to some random blocks theme. As you see on the screenshot – default styles of the buttons doesn’t match theme styles:

To make our buttons to look similar as buttons from the theme, first of all we need to find what CSS classes applied to buttons in theme. We’ll use browser Inspector tool to do this:

As you see, button has a lot CSS classes, let’s add them one by one into Additional CSS Classes option to check how they affects on the buttons appearcance

After playing around with CSS classes, we add these to our buttons:

And get such result on the frontend. As you see it’s close, but not the ideal:

So next wee need to use custom CSS to make further customization.

Adding custom CSS

To add custom CSS, you can use any tools you want. In our example we’ll use Additional CSS option, which is available in any block theme.

To style the buttons appearance, you need to combine 2 main selectors:

• .btmp-wc-quick-add-row – it’s a container of buttons;
• .btmp-wc-quick-add-row .btmp-wc-quick-add – a CSS selector of the button itself. Also for the button you can use CSS classes you added with option for previous section.

So in our example, first of all we need to adjust alignment of the buttons. We’ll use such code for this:

The result:

The last thing we need to do is to adjust buttons spacing and border radius. We can find this values by using browser Inspector tool:

Here is the result:

In similar way you can do any modifications you want.

Customizing “added” state of the buttons

In case if you need any additional styling for the buttons after variations is added to cart, you can use CSS selector .btmp-wc-quick-add-row.added

As example, let’s hide the buttons at all after adding variation to cat, like it works at our live demo. To do this, we just hide whole buttons container, using given CSS selector:

And it’s all: