[Resolved] Hiding Cart Menu item when cart is empty

Home Forums Support [Resolved] Hiding Cart Menu item when cart is empty

Home Forums Support Hiding Cart Menu item when cart is empty

  • This topic has 10 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 11 posts - 1 through 11 (of 11 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;
    }
    #2078566
    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!

    #2078920
    David
    Staff
    Customer Support

    Glad to hear you found a solution

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.