How to change the color of WooCommerce buttons | themelocation

How to change the color of WooCommerce buttons

WooCommerce Cart Button Color/Style Changer Plugin –> Download WordPress.org

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.

15 Responses to How to change the color of WooCommerce buttons

  1. si November 14, 2015 at 3:17 am #

    Great stuff mate. works very well.
    Thank you 🙂

  2. Inna December 1, 2015 at 7:53 pm #

    It is WORKING!! Thank you!!!!

  3. steeevn December 4, 2015 at 1:36 pm #

    Worked like a charm…thanks :o)

  4. Mr Grind Mode January 1, 2016 at 3:09 am #

    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!

  5. jim January 7, 2016 at 1:59 am #

    Thank you for this. The only solution that was easy to do and worked perfect with no glitch.

  6. Liselotte February 5, 2016 at 9:35 am #

    Thanks!
    Absolutely perfect, it works

  7. Andy Martin April 1, 2016 at 12:25 pm #

    Many thanks, saved me a whole load of time editing manually!

  8. Ellie April 24, 2016 at 10:16 am #

    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

  9. guilherme May 16, 2016 at 12:23 pm #

    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

  10. Grace May 19, 2016 at 1:14 am #

    THANK YOU! It worked seamlessly… so amazed and so thankful!

  11. Victor June 20, 2016 at 5:15 pm #

    Excellent! Works well. I’m a WP newbie and learning fast!
    Thanks very much for this!

  12. Nico July 18, 2016 at 8:35 am #

    Works great, thanks.
    However one button stays the original color (blue).
    Is this fixable?
    Thanks.
    Nico
    http://www.dewereldvergaat.nl/hoofd-webwinkel/

  13. OleTechie July 20, 2016 at 12:47 am #

    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)

  14. Alison F October 12, 2016 at 12:59 pm #

    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!

  15. Sun Ra November 6, 2016 at 4:53 am #

    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