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

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

[David]

Hi there,

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

[mkjj]

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

[David]

Try this:

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

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

[David]

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

[mkjj]

OK, I see. Thanks a bunch. Lessons learned! As always: magnificent support!! 🙂

[David]

Glad to be of help

[Author]

Posts