Change color on woocommerce buttons

Hi @nellik22,

I see that the products you have are not in stock, thus the buttons you want to be modified are not shown. If possible, kindly set one product to be in stock so that the buttons are visible.

Thanks.

Hello and thanks for your answer! I have now set the two products back in stock.
I have the woocommerce colors plugin, but these color button options does not show up in my customizer. Maybe after I updated WordPress?

Hi @nellik22,

If you’re also trying to modify the button colors with a plugin, you might want to contact the plugin authors for assistance with the issue. The WooCommerce Colors plugin support can be reached through this forum: https://www.ads-software.com/support/plugin/woocommerce-colors/

In the meantime, you can add the following CSS to WP-Admin → Appearance → Customize → Additional CSS.

Note: I used #000 to make them black, but feel free to replace this with your preferred color code.

button.single_add_to_cart_button.button.alt {
    background-color: #000 !important;
}

button.button {
    background-color: #000 !important;
}

a.checkout-button.button.alt.wc-forward {
    background-color: #000 !important;
}

Hope this helps.

Thank you AGAIN!

It worked great. I thought woocommerce colors was under you, but I see now that I was wrong.

The last box, the one on the bottom of the checkout page is still blue though. I want to change that too, because it is hard to read the text on it. I tried to find the name in the html-file, but I do not know what it is called, it is more like a box.

I see the box you’re referring to, the borders have a blue color. You can add the following CSS to change them to black:

.woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th {
    border-top-color: #000 !important;
}

Hope this helps as well!

Just to mention, themes will mostly control the color scheme on your site. They will also tend to have provisions of altering these color schemes through the Appearance → Customizer, but you can still consult with the theme developer for assistance on how to change specific aspects of your color scheme.

Thanks again for your help! But, I am afraid you did not see the right box. There is a large box on the bottom of that page, and the whole box is blue. It is where one decides how to pay and where one can place the order.

The view basket is also blue, is seems.

It is weird, I could change these myself before: I have done it many times. but is seems like the woocommerce colors app does not work with the new WordPress update.

Hi @nellik22,

You can change the background color of that box to white using the following snippet:

.woocommerce-checkout #payment {
    background: #fff;
}

It is weird, I could change these myself before: I have done it many times. but is seems like the woocommerce colors app does not work with the new WordPress update.

Thanks for mentioning this. It would be ideal to contact the WooCommerce Colors plugin authors to check on this. Essentially, they might find out what’s causing their plugin not to work and then help resolve the issue so that you can keep using it for modifying your color scheme with ease.

Just to mention, the WooCommerce Colors plugin support can be reached through this forum: https://www.ads-software.com/support/plugin/woocommerce-colors/

Thanks.

Hi there,

This thread has been inactive for a bit, so I’m going to mark it as Resolved now for the overall health of the forums. Please feel free to open a new one if you have any further questions.

Cheers!