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

[Author]

Posts