Home / Blog / How to change the color of woocommerce add to cart button in divi

How to Change the Color of the “Add to Cart” button in Divi

Categories: Divi, Woocommerce, Wordpress

In this tutorial, I am going to show you how to change the style of the “Add to Cart” button in your Divi theme. The Woocommerce “Add to Cart” button is the first thing that the customer sees on your product page, so it is really important to style it with a color that corresponds well with your theme. After all, you do not want to lose sales because your website design is not as good as your competitors’. So, here is a simple way to fix this issue and customize the “Add to Card” button with just a bit of css. No coding experience required!

How to change the style of the “Add to Cart” button with CSS

Add the following css code in your Divi theme. There are a couple of options to do it, but I would recommend to navigate from the Wordpress Admin Toolbar to ThemeCustomizer => Additional CSS and paste the following code:

.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: #193256 !important;
    color: #fff;
}

The code does two things. First, it sets the Woocommerce button to dark blue. Second, it styles the font color inside the button to white. Feel free to change these values to any color you like.

Read more: