[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.

View post on imgur.com

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)

View post on imgur.com

[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?

View post on imgur.com

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:

View post on imgur.com

[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