Site logo

Archived topic

How do I change the colour of the 'update cart' button on woocommerce cart page?

9 replies · Started by Clark on September 10, 2019

Viewing posts 1–10 of 10

As the title says, how do I change the colour of the 'update cart' button on woo commerce cart page? At the moment, the text is the same colour as the button so you cannot read it.

Hi there

in Customizer > Colors > Woocommerce --> Menu Mini Cart

Hi David,

I've gone there and still can't find it. None of the colours seem to correspond to the "update cart" button.

Thanks
Clark

Sorry completely mis-read the question - maybe coffee time....

So the Update Cart button inherits the standard button colors. However, when it is disabled ie. no update has been made, its opacity is reduced.

So to change just that button you would need this CSS:

/*Static */
.woocommerce .cart .button[name="update_cart"] {
    background-color: #F00;
    color: #fff;
}
/* Hover */
.woocommerce .cart .button[name="update_cart"]:hover {
    background-color: #0F0;
    color: #fff;
}

Thanks, I'm a little bit clueless with WordPress, exactly where do I need to go to paste in that code?

You can add it to the Customizer > Additional CSS

Thanks, in the end I did it using the CSS editor in your signature.

One more issue though, I am able to change the colour of the button by changing the value in "background-color" however how do I change the text colour?

Changing the value below that just says "color" doesn't seem to do anything.

You may need to give that CSS some importance. So where it says:

color: #fff;

try:

color: #fff !important;

Still didn't work, it did briefly flash to the correct colour and then it flashed back. Fortunately I've played around with it long enough to get it to a colour combination that I'm happy with now though so I think I'll be alright now.

Thanks for your help!

Glad to hear that :)

This archived topic is closed to new replies.