How to Change Woo Commerce Button Colors

To change the color of Woo Commerce buttons in WordPress ecommerce shop.

You need to change/override the default css style of the buttons. Add the custom css to the WordPress theme.

Go to Appearance = Customize => Additional Css and add the following code:

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: #61ce70 !important;

background-color:#000000 !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:#000000 !important;

background-color: #000000 !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: #61ce70 !important;

color:white !important;

text-shadow: transparent !important;

border-color:#61ce70 !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: #61ce70 !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color: #61ce70 !important;

}
.woocommerce-message {
border-top-color: #61ce70;
}

.woocommerce-message::before {
content: “e015”;
color: #61ce70;
}
.woocommerce-info {
border-top-color: #000000;
}

.woocommerce-info::before {
color: #61ce70;
}

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.