[Resolved] Hiding Cart Menu item when cart is empty

[Carsten]

Hi there, I’m looking for a way of hiding the cart from the header menu, when it’s empty. Apparently there are no options for that in WooCommerce or in GP WooCommerce layout settings. This would be a nice feature to integrate in GP WooCommerce layout settings in a future Premium update.

View post on imgur.com

Sorry if this topic already has been discussed, but I was not able to find any about this.

Regards

[David]

Hi there,

add this CSS to your Site:

.mobile-bar-items.wc-mobile-cart-items:not(.has-items),
.main-navigation li.wc-menu-item:not(.has-items) {
    display: none;
}

[Carsten]

Thanks for quick response, it works like a charm!

[David]

Glad to be of help 🙂

[Dana]

Hi David,

I tried the CSS above and it works for desktop but the cart is still visible when viewing mobile.

Any suggestions?

[David]

Hi there,

can you raise a new topic where you can share a link to your site so i can take a look?

[Dana]

My site is currently on localhost only.

I’ll play around and see if I can figure it out before moving the site to my host. Not a show stopper at this point.

[David]

OK – let us know.

[Dana]

Hi David,

I was about to open a new topic as I just moved my site to staging but I figured out a way to force the cart to hide when empty when viewing in responsive mode. I added the !important rule. I’m not sure if that is best approach but it works. Thought I would post it here in case anyone else runs across the same issue.

.mobile-bar-items.wc-mobile-cart-items:not(.has-items),
.main-navigation li.wc-menu-item:not(.has-items) {
    display: none !important;
}

[hastibe]

Hmm, I added this CSS to the Additional CSS panel of my site, but it had no effect (after refreshing and with caching disabled, etc., even though the cart is empty). Is this CSS code still working?

UPDATE: found updated CSS, here–all is working now!

[David]

Glad to hear you found a solution

[Author]

Posts