How to configure the buttons on the flyout cart view

hi,

when you click the cart button on the main nav menu, a flyout cart view will appear. There are two buttons at the bottom. How to configure these two with the same hover actions and shapes?

Attachments:

You must be logged in to view attached files.

I want the view cart button to be blue with black text static and then change to black with white text when hovering. Attached.

Attachments:

You must be logged in to view attached files.

Hi hey3212,

Thanks for reaching to us.

Please use below code:

.woocommerce-mini-cart__buttons a.btn-cart{
    background-color: var(--btn-default-bgcolor-hover);
}

.woocommerce-mini-cart__buttons a.btn-cart:hover{
    background-color: #000;
    color: #fff;
}

Regards,

thank you very much. It worked, except that the “view cart” button text is dark grey. Could you make it black? The blue color code is 87CEEB btw. And the checkout button below, it should be “Check Out” two words for an action, not checkout as it is displayed currently. Could you make that change too.

Attachments:

You must be logged in to view attached files.

Hello hey3212,

1. Please remove above code and use below one:

.woocommerce-mini-cart__buttons a.btn-cart{
    background-color: var(--btn-default-bgcolor-hover);
    color: #000;
}

.woocommerce-mini-cart__buttons a.btn-cart:hover{
    background-color: #000;
    color: #fff;
}

2. Change text

In order to change / translate words. Please make sure you synced the strings first before changing / translating WooCommerce, WordPress Cores file, WoodMart Core plugins and WoodMart theme. You can refer to articles and video:

https://xtemos.com/docs-topic/theme-translation/
https://xtemos.com/docs-topic/how-to-make-woodmart-multilingual-with-wpml/

https://www.youtube.com/watch?v=H7zUPEACLRQ

Best Regards,

Thanks a lot. The codes work well. How to navigate to the translation interface?

Hello hey3212,

Please follow my #2 answer to translate / change words.

Regards,

I got it. How to navigate to the translation interface?

Hello hey3212,

Your question is a bit unclear to me. Please describe in more details or or your desired goal, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

How to navigate to the the translation interface to actually change the word “checkout” to “check out”?

Hello hey3212,

Please see screenshot for better understanding https://ibb.co/d4212jhc

Regards,

Hi Hung,

Thank you for the screenshot. Very helpful. I have updated all the checkout to check out, but the button is still displaying “checkout”. Any idea?

Attachments:

You must be logged in to view attached files.

Hello hey3212,

Please clear browser cache, remove products from mini cart and re-add to see if it works.

Regards,

Hi,

I have cleared the cache of my browser and website, but there is no change. Can you see it working on your end?

Hello hey3212,

Please check your site again, you need to translate WooCommerce plugin as well.

Regards,

Got it. Thank you very much for your help.

[Author]

Posts