Archived topic
WooCommerce Change Button and Price Colours CSS
9 replies · Started by Joanne Smith on March 13, 2016
Hey -- thought I'd share how I changed the COLOURS of my WooCommerce Add to Cart buttons and price
install Custom CSS plugin
then paste the following code and adjust colours where suits!!
.product-categories .children {
margin-left: 1.5em;
padding-top: 5px;
}
.product-categories .children li:last-child {
padding-bottom: 0;
}
.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;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
text-align: center;
color: #F00; /* This is what you MAY want to change color */
font-weight: 200;
font-size: 1em;
}
.woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
color: #F00; /* Change this */
font-size: 1.25em;
text-align: center;
}Thanks for sharing! :)
I have seen a lot of threads in forums about how to do this -- some of the plugins out there do not work!--best to custom CSS it!
J
Does there need to be a css plugin, or can we just add any custom css we need to a child theme css file? Or does GP not support child theme?
yes
add a custom css plugin and then add the code and style to suit
J
Alllll of that CSS is just for the add to cart buttons and price display? Wow.
Yup, WooCommerce could definitely simplify it. Maybe one day.
Is there a newer way now with GP pro?
my buttons font won't change, I can't seem to find the font style. or even the button width?
Hi Jason,
You can try Enabling GP Premium's Colors module and try playing around with the settings on Appearance > Customize > Colors > WooCommerce.
