How to change the color of WooCommerce buttons

To change the color of WooCommerce buttons, We will need to change/override the default css style of the buttons. To do this We will need to add custom css to the wordpress theme.

There are Two Ways To do this:

1- Add the custom css in theme’s style.css

2- Use some plugin to inject the custom css to the web pages.

We will use a WordPress plugin to inject the css to the WooCommerce Website pages. You can Download the Plugin : Simple Custom CSS

Step 1 : Install the Plugin to your Website And Go to the Plugin.

Step 2:


Put the following css to the Text Area and click “Update Custom Css”.

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background: red !important;

color:white !important;

text-shadow: transparent !important;

border-color:#ca0606 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background: red !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#ca0606 !important;

}

Go to the Woocommerce Product Page Or Cart Page, You will See Buttons in Red colors. To change the color of the buttons , Replace the “backgroud: red !important” to your desired color. Click Update and It will Be Done and Ready to Go.

Editorial Staff

ThemeLocation Provides Wordpress & Woocommerce development & Customization services. Have a Project? Contact To discuss

19 thoughts on “How to change the color of WooCommerce buttons

  1. After struggling for hours with the most useless tips on all the forums all over the interwebz, I finally stumbled on this piece of code. And like it was nothing, all my frustrations and despair vanished, as I finally managed to really, properly customize the buttons in my little webshop. Which had turned out to be an unexpected big challenge. Customize a few buttons. Oh my.

    Tho I can say I am still annoyed with the fact that it took this long and (contrary to what i am used to) there didn’t seem to be any useful information online, I am very, very, very happy with your article. Thanx a lot!

    1. I completely agree with GRIM, I had the exact same experience. Thank you for writing this article. Still works perfect after a year and a new updated plugin (Simple Custom CSS & JS)

  2. Thanks and great article! I am having a problem with the box shadow? How do I change the shadow box color?

    Thanks and keep up the awesome work!

  3. Hi there,
    I’m hoping to find a way which will allow me to customise the add to cart buttons for each individual product category, as all the other elements of the site are colour specific for each category. Please can anyone let me know if they’ve ever had any luck with something like this.
    Thank you!

  4. Ahhh, almost perfect. Add to Cart is just what I want. The other buttons: “Return to Cart,” “Submit,” all have an orange tinge from the default Mystile theme

  5. Fantastic thank you for this!

    I still have one red box that I can’t change though – the paypal section where it says:
    “Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.”

    Is there a way I can change this too?

    Thanks

  6. i was struggling to get this right, i looked in more than 10 posts and forums and none seemed to work, without any hope i se4arched it again today and luckily ive found this!
    thanks man! it finally worked

  7. Another happy customer! I used this with Elegant Themes Divi – it looked like it wasn’t working, but I moved the code from Editor to Divi > Theme Options > Custom CSS and it then worked like a charm. Thank you!

  8. You repeated the hover styles twice for the alt button. Just remove :hover from the end of each selector in the first declaration block. Ex:

    .woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt

Leave a Reply

Your email address will not be published. Required fields are marked *