How to change WooCommerce Buttons Color?

change-woocommerce-buttons-color

WooCommerce is bundled with its own CSS for all the styles. Apart from that your theme can also have a woocommerce specific stylesheet. Latter is most preferred way to display woocommerce shop which looks like your remaining website. Hence whenever you choose a theme for your store, make sure that it has WooCommerce specific styles. But if you are unlucky and can not afford to change your existing theme, don’t worry. There are many options available to change look and feel of various WooCommerce components.

Why you ever need to change color of WooCommerce Buttons?

When you start a new web store on your existing website, you do not have freedom to choose specific theme. For example, if your website primary color is orange but WooCommerce is showing blue buttons. Just imagine, how will it look on your website? This is the prime reason for changing color of your WooCommerce buttons so that they look similar to your remaining website elements. Also you may also want to show different color buttons for Add to cart and Checkout elements. Here are few of the options you have to achieve same.

One of the most powerful way is to use Custom CSS function that comes bundled with WordPress now. All latest theme now gives you option to add custom css code and few will have custom.css file as well. You need to put following piece of css stylesheet in custom css and change color red to your preferred one.

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

}

Simply copy the above code and replace color red with your desired one.

Video tutorial for changing WooCommerce Buttons color

Final Thoughts

Changing WooCommerce Buttons color is one of the most frequently sought query by our visitors and customer. Though it is one of the most frequent feature requested, WooCommerce still does not give this feature by default. We may see button customizer functionality in upcoming WooCommerce versions but till now use this custom css trick to achieve desired results.

No comments yet.

Leave a Reply