How to Change WooCommerce Buy Button Background & Text Color?

Hi Georgi,

All woocommerce related buttons use this CSS:

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    color: #fff;
    background-color: #55555e;
}

You can use this CSS to override the default. Change the color values to your preference. :D

Thanks man, it works great!

I also wanted to customize the add to cart button and found the following CSS in the forum:

.woocommerce a.button.add_to_cart_button {
    padding: 5px 10px;
    border-radius: 5px;
}

It does a really great job but it's not affecting the button for out of stock products https://prnt.sc/26ncdab and the button on the product page itself https://prnt.sc/26ncdsv

Can the CSS be adjusted to affect these two things as well?

Hi there,

can you share a link to your site where i can see the sales products.

Of course. Link in the private area. There is no cache now so it might be a bit slower.

OK so replace both your CSS snippets with:

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    color: #fff;
    background-color: #55555e;
    padding: 5px 10px;
    border-radius: 5px;
}

Hehe, awesome! Thank you, David! :)

Glad we could be of help