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

[Clark]

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.

[David]

Hi there

in Customizer > Colors > Woocommerce –> Menu Mini Cart

[Clark]

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

[David]

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;
}

[Clark]

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

[David]

You can add it to the Customizer > Additional CSS

[Clark]

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.

[David]

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

color: #fff;

try:

color: #fff !important;

[Clark]

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!

[David]

Glad to hear that 🙂

[Author]

Posts