![](https://i0.wp.com/kennethjackson.net/wp-content/uploads/sites/113/2020/10/woocommerce-button-css-1024x571.png?resize=980%2C546&ssl=1)
Procedure
- Log in to WordPress
- From the Homepage go to “Customize
- Additional CSS
- Paste the following CSS Code
- Change the line that reads “background-color:#FC0” to the color of your choice.
CSS Code
.woocommerce span.onsale {
background-color: #000000;
color: #ffffff;
}
.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-color:#FC0 !important;
color:white !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#FF9900 !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-color:#FC0 !important;
color:white !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#FF9900 !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-color:#FC0 !important;
color:white !important;
text-shadow: transparent !important;
border-color:#FF9900 !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-color:#FC0 !important;
box-shadow: none;
text-shadow: transparent !important;
color:white !important;
border-color:#FF9900 !important;
Leave a Reply