[Resolved] Change colors on Mini Cart

[David]

Hi there!

I have placed my Mini Cart in the secondary menu, but now I would like to have the colors individually changed AND I would like to have the color change again when hovered.

https://imgur.com/3FyAaN1

So I would like to:
– Give button 1 a specific color
– Give button 1 a specific color when hovered
– Give button 2 a specific color
– Give button 2 a specific color when hovered

I would like to know if this is possible 🙂

Kind regards,

David

[David]

Hi there,

first off set the colors for your the Cart button in Customizer > Colors > Woocommerce –> Menu Mini Cart.

Then use this CSS to change the colors of the checkout button:

#wc-mini-cart .button.checkout {
    background-color: red;
    color: #000;
}
#wc-mini-cart .button.checkout:hover {
    background-color: green;
    color: #00F;
}

[David]

Unfortunately changing the customizer options and adding the css doesn’t do anything.. Is it perhaps because I have the mini cart in the secondary menu instead of the primary menu?

Can I perhaps share with you my website and the password for the website? (I got it locked behind a password as it is a private website)

https://imgur.com/RCdoO22

[David]

Can you provide me access to the site so i can see what the issue is?

[David]

I did an edit on this post to add the website in the private part + the password 🙂

[David]

It’s because you have the Elementor cart enabled its replacing the GP buttons with elementors.

[David]

I see, I didn’t know that would influence it.. Is there a possibility to enable this Elementor cart on every page? For now it only does it on the home page (I think because I added the element to that page), but I like the look of the Elementor cart menu more than the default GP one. Is that possible?

[David]

Or even better. Is there the option to have GP menu as the default first menu, and that I choose a customer Elementor Pro header for the secondary menu? That would solve my issue I guess, because then I can add a widget to that secondary Elementor menu

[David]

Is it perhaps possible with a hook?

[David]

You can add any elementor template using the shortcode they provide to a Hook Element – in this case it would be the after_header hook.

[David]

OK, well that is too difficult for me unfortunately..

Just to be sure, is this the standard format for the menu cart?

https://imgur.com/CWwiXO5

Because this is the way it appears when I don’t have an elementor cart on the page. I don’t see any button, so I think that there is something going wrong..

Is there anyway to make this menu to look like this:

https://imgur.com/3FyAaN1

[David]

No that isn’t the GP cart – you have to disable the elementor cart in Elementor > Settings > Integrations > WooCommerce.

This article explains how to use Hooks:

https://docs.generatepress.com/article/hooks-element-overview/

[David]

I disabled the mini cart in the Elementor Settings. When in the Customizer options menu, I can hover over the menu and I see that the GP template is doing it’s job. However, when I go to my website, I still see the Elementor template..

I would really like to have just the GP template everywhere. Is there anything I’m doing wrong?

[David]

I would try clearing your browser cache and make sure you’re viewing the actual page as opposed to an Elementor preview as i can see the GP Mini Cart working.

[David]

Finally!! This has been bugging me for days.

Sorry for your time, but thank you so much 🙂

[Author]

Posts