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:
- Launch the CSS Hero Editor.
- Select the ‘Add to Cart’ button using CSS Hero’s selector as shown below.
The ‘Add to Cart’ button is selected
- Select the ‘Snippets‘ option from the CSS Hero’s panel and select the ‘Button‘ option as shown below.
- 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.
![](https://i0.wp.com/2threads.com/wp-content/uploads/2024/02/how-to-style-the-add-to-cart-button-using-css-hero-css-hero-2.png?resize=812%2C575&ssl=1)
Previewing the button style by hovering over the ‘Preview’ option
- 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.