[Resolved] Hiding Cart Menu item when cart is empty

Home Forums Support Hiding Cart Menu item when cart is empty

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1171257
    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

    #1171280
    David
    Staff
    Customer Support

    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;
    }
    #1171284
    Carsten

    Thanks for quick response, it works like a charm!

    #1171399
    David
    Staff
    Customer Support

    Glad to be of help 🙂

    #1180219
    Dana

    Hi David,

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

    Any suggestions?

    #1180426
    David
    Staff
    Customer Support

    Hi there,

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

    #1181760
    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.

    #1182030
    David
    Staff
    Customer Support
    #1206464
    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;
    }
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.