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.

Waqas

I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

24 thoughts on “How to change the color of WooCommerce buttons”

  1. 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!

  2. 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

  3. 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

  4. 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)

  5. 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!

  6. 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

  7. This worked to change everything except the top border and the little check mark that appear when you add an item to your cart. How can I change the color for these from the default lime green color?

    Thank You!

    1. Hi Kenny! This code will not change Paypal button color because these buttons are coming from Paypal. thanks

  8. If I want to change the border colour do I just change “border-color:#ca0606 !important;” and change the #coulour to my choice? Also is there a way to make the border 2px to suit the rest of my site?

  9. Thank you so much!! This saved me hours when I realized that updating my Divi buttons was having no affect on my Woocommerce buttons. Thank you!!

Leave a Comment

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