[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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carsten]

Thanks for quick response, it works like a charm!

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dana]

Hi David,

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

Any suggestions?

Dana Diotte

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

Dana Diotte

[David]

OK – let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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;
}

Dana Diotte

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts