WooCommerce – Change the Button Background Color with CSS

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;