Cannot see where to change cart dropdown button colours

[Lorenmn]

I’ve had to rebuild the cart drop down following the latest X update and seeing that this solution worked for others. First, it’s disappointing that we’ve had to rebuild it anyway. Not sure why as it appears to the the exact same element.

Anyway, I’ve rebuilt it but cannot see where to change the colour of the actual buttons. I can see text and border colours but not buttons.

Can you help? Thanks.

[tristup]

Hi @Lorenmn,

Thanks for reaching out.
There is no option for changing the Button background color, you need to add the custom CSS code to modify it. Please find the following custom code that I have tried in my local environment by adding into the Element CSS of the Cart Dropdown element.

$el .woocommerce-mini-cart__buttons .wc-forward
{
    background-color:#00ff00 !important;
}

$el .woocommerce-mini-cart__buttons .checkout.wc-forward
{
    background-color:#ff0000 !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Lorenmn]

No option for changing background colour!? That’s bonkers!! That’s a backwards step. We’ve always had that option before (without CSS). Why on earth would that be?

Thanks for the CSS code. I’ll use that in the meantime. However, how can I change the hover colour?

PLEASE feed back the lack of colour on the button back to dev. Surely that’s a bug and an easy fix.

[tristup]

Hi @Lorenmn,

You can add the following custom CSS code for hover.

$el .woocommerce-mini-cart__buttons .wc-forward:hover 
{
    background-color:#000000 !important;
}

$el .woocommerce-mini-cart__buttons .checkout.wc-forward:hover
{
    background-color:#00000 !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

NOTE: I will check and add this into the Feature Request, so it might be taken into account in the future.

Thanks

[Lorenmn]

All sorted now. Thanks.

[prakash_s]

Hello @Lorenmn,

Glad that @tristup was able to help you.

Thanks