change button color

I have done this with additional CSS in my childtheme, but it would be nice to do this in a plugin as booster.

Consider this a wish for a next version.

Hi Miezz88,

To change color of buttons, you need to add custom CSS in module “Custom CSS”. Go to Booster settings > Emails & Mics. > Enable “Custom CSS”. Then go to its Settings and under “Custom CSS – Front end (Customers)” paste this:

button, html input[type="button"], input[type="submit"], .button, .button:visited {
    color: #ffffff;
    background-color: #0000FF;
}

button:hover, html input[type="button"]:hover,input[type="submit"]:hover, .button:hover, button:focus, html input[type="button"]:focus, input[type="submit"]:focus, .button:focus {
    color: #ffffff;
    background-color: #00FF00;
}

“color” attribute changes button text color (line 2 and 8)
“background-color” attribute changes button background color (line 3 and 9)

First “color” and “background-color” attributes allow customizing button style how it shows up when you load the site, second attributes allow customizing how button shows up when hovering mouse over it.

Color names have to be written in hex color codes. To customize other buttons, copy the code and replace input type “submit” with other button types.

[ Signature deleted ]

• This reply was modified 6 years, 8 months ago by Jan Dembowski.

This code doesn’t seem to do anything. I don’t want to change all possible buttons, but just these three:

Add to cart
Proceed to checkout
Place order

How do I do that?

Hi again,

You can specify which class you want to change style of.
Add to card button is in class “single_add_to_cart_button” (you can see that by right clicking on it, and choosing inspect element), so the code for changing colors of that button would be

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

If you want to change color depending on whether the user is hovering over it, the code would be

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

The full code for all your three buttons is:

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.button#place_order.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.button#place_order.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.checkout-button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.checkout-button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

If some of the buttons haven’t changed, tweak CSS accordingly to your button class names.

Thank you for your reply. After a bit of tweaking, the code that worked, was:

.woocommerce .product .single_add_to_cart_button.button{
	background-color: #27cda5;
	color: #FFFFFF;
}

Case closed, thanks again.