Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Hiding div based on [data-counter]

I’m trying to hide a cart icon on my website when the cart is empty. I’m not an expert in jQuery but I know the basics. 

$(document).ready(function() {
    if($(".button-icon[data-counter]").is() == "0"){    
        $(".menu-cart-wrapper").hide();
    }else{    
        $(".menu-cart-wrapper").show();
    }
});

```
<div class="menu-cart-wrapper">
  <a id="menu-cart__toggle_button" href="#">
    <span class="button-text"><span class="woocommerce-Price-amount amount">0&nbsp;<span class="woocommerce-Price-currencySymbol">kr</span></span></span>
    <span class="button-icon" data-counter="0">
      <i class="eicon" aria-hidden="true"></i>
      <span "screen-only">Cart</span>
    </span>
  </a>
</div>

With this the button is hidden at all times and I can’t figure out why.

I’ve also tried with the span class “woocommerce-prize etc.” and add .html after with == “0 ” but that didn’t work either.

Plz help!

Tags:

2

Answers


  1. 0

    if you change the data-counter from 1 to 0 it will hide:

    $(document).ready(function() {

var sp=document.getElementsByClassName('button-icon')[0].getAttribute('data-counter'); 

    if(sp === '0'){      
        $(".menu-cart-wrapper").hide();
    }else{    
        $(".menu-cart-wrapper").show();
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-cart-wrapper">
  <a id="menu-cart__toggle_button" href="#">
    <span class="button-text"><span class="woocommerce-Price-amount amount">0&nbsp;<span class="woocommerce-Price-currencySymbol">kr</span></span></span>
    <span class="button-icon" data-counter="1">
      <i class="eicon" aria-hidden="true"></i>
      <span "screen-only">Cart</span>
    </span>
  </a>
</div>
    Login or Signup to reply.
  2. 0 
    $(document).ready(function() {
    if($(".button-icon[data-counter]").data('counter') == "0"){    
        $(".menu-cart-wrapper").hide();
    }else{    
        $(".menu-cart-wrapper").show();
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-cart-wrapper">
  <a id="menu-cart__toggle_button" href="#">
    <span class="button-text"><span class="woocommerce-Price-amount amount">0&nbsp;<span class="woocommerce-Price-currencySymbol">kr</span></span></span>
    <span class="button-icon" data-counter="1">
      <i class="eicon" aria-hidden="true"></i>
      <span "screen-only">Cart</span>
    </span>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search