[Resolved] How to hide shopping cart icon if cart is empty

Home Forums Support [Resolved] How to hide shopping cart icon if cart is empty

Home Forums Support How to hide shopping cart icon if cart is empty

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2180052
    mkjj

    I would like to hide the shopping cart icon, if the cart is empty. The same question has been asked before, but the solution does not work, since the cart icon is not part of the standard navigation list. The HTML structure is now: .menu-bar-items > span.has-items

    Here is the CSS I tried:

    .menu-bar-items .wc-menu-item {
      background-color: var(--green-special-color);
      transition: all 500ms ease;
    }
    .menu-bar-items .wc-menu-item:hover {
      background-color: var(--darker-green-color);
    }
    .menu-bar-items  span:not(.has-items) {
      display: none;
    } 

    Looks like a pretty easy thing to do, but I can’t get it to work.

    Thank you very much!

    #2180059
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site where you want to apply this ?

    #2180063
    mkjj

    Sure.
    https://a-go-test.de
    (Site is still under construction.)

    #2180070
    David
    Staff
    Customer Support

    Try this:

    .menu-bar-items .wc-menu-item:not(.has-items) {
      display: none;
    }
    #2180085
    mkjj

    Of course, you nailed it. ๐Ÿ™‚ Thank you very much! I think, I need some tutoring here. WHY does it work? For me, both classes .wc-menu-item and .has-items are on the same level. I thought that :not would always refer to the parent tag (in this case the SPAN). This is why I didn’t even try this.

    #2180115
    David
    Staff
    Customer Support

    Its a case of specificity – you may have found yours worked with a direct sibling combinator >

    .menu-bar-items > span:not(.has-items) {
      display: none;
    }
    #2180133
    mkjj

    OK, I see. Thanks a bunch. Lessons learned! As always: magnificent support!! ๐Ÿ™‚

    #2180186
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.