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

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

  • This topic has 9 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1005617
    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.

    #1005641
    David
    Staff
    Customer Support

    Hi there

    in Customizer > Colors > Woocommerce –> Menu Mini Cart

    #1005653
    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

    #1005662
    David
    Staff
    Customer Support

    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;
    }
    #1005669
    Clark

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

    #1005680
    David
    Staff
    Customer Support

    You can add it to the Customizer > Additional CSS

    #1005709
    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.

    #1005856
    David
    Staff
    Customer Support

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

    color: #fff;

    try:

    color: #fff !important;

    #1005914
    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!

    #1005917
    David
    Staff
    Customer Support

    Glad to hear that 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.