How to style the ‘Add to Cart’ button using CSS Hero

The default ‘Add to Cart’ in woo-commerce can be made elegant and eye-catching using CSS Hero’s button styles.

How to do it?

To style the ‘Add to Cart’ button with zero or no coding, follow the steps below:

  1. Launch the CSS Hero Editor.
  2. Select the ‘Add to Cart’ button using CSS Hero’s selector as shown below.

The ‘Add to Cart’ button is selected

  1. Select the ‘Snippets‘ option from the CSS Hero’s panel and select the ‘Button‘ option as shown below.

  1. In the ‘Button‘ options there are many button styles available, you can hover over the ‘Preview‘ option of a button style to see as how it will look.

Previewing the button style by hovering over the ‘Preview’ option

  1. After selecting the button style, click ‘Apply‘ and then ‘Save & Publish‘ to save the changes.

Congratulations! You have successfully styled the ‘Add to Cart’ button with no coding but only using CSS Hero editor.

Comments are closed.