Jump to content

How to make cart icon quantity not display zero

Recommended Posts

Hi, I added the code(between the script labels) in the code injection header, but my cart still has the zero label.  I did also add the jQuery 3.x minified code before it.  Please let me know if I'm doing something wrong, thanks!

Link to comment
<script>
$(document).ready(function() {
  if ($('span.sqs-cart-quantity').html() == 0) {
    $('span.sqs-cart-quantity').html('');
  }
});
</script>

Leave the jQuery script in the header, remove the other one, and put that in the footer.

You actually shouldn't need the document ready in the footer, you can try it both ways.

Edited by rwp
Link to comment
7 minutes ago, abry747 said:

I removed and placed the second script in the footer and also tried it with the document ready code, but the cart label still shows zero.  Is there something else I can try?  Thanks!

I see you used some duplicated jquery code. Remove some.

Quote

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

and these

Quote

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I deleted the duplicated jQuery and used the updated Document.ready code in the footer but it didn't work.  When I placed the document.ready code in the header, the zero label did not show on the cart page, but it shows up on the cart icon on other pages.  Is there a way to make the zero label not show on all pages?  Thanks!

Link to comment

You still have multiple jquery scripts. I think you have different codes fighting each other.

Unless you have code that requires older versions of jQuery, the only one you need is 3.5

Right now it seems like you have a total of 3.

Link to comment

I deleted another.  Here is my current code below for header/footer of code injection.  I'm still getting the same result.  Thanks!

 

HEADER

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
  if ($('span.sqs-cart-quantity').html() == 0) {
    $('span.sqs-cart-quantity').html('');
  }
});
</script>

 

<script>
$(document).ready(function(){
  $(".sqs-add-to-cart-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>SHOPPING CASE CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

 

 

FOOTER

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>


  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script>

Link to comment

Can you please repost all of your code, or screen shots of the code area.

Oh I see, you deleted too much from the footer.

Put this back:

<script>
  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script> 

 

Edited by rwp
Link to comment

Sure, here is all the current code for the header and footer of code injection.

HEADER

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
  if ($('span.sqs-cart-quantity').html() == 0) {
    $('span.sqs-cart-quantity').html('');
  }
});
</script>

<script>
$(document).ready(function(){
  $(".sqs-add-to-cart-button").one("click", function(){
    $("<a class='checkoutbutton' href='/commerce/show-cart'>SHOPPING CASE CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");
});
  });
</script>

 

FOOTER

 

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script>

 

 

Link to comment

I just added "<script>" in the footer and now the suitcase is visible.  Here is the current footer code below..

 

FOOTER

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<script>
  $(".Cart-inner").append("<i class='fa fa-suitcase' aria-hidden='true'></i>");
</script>

Link to comment

I'm not sure if there is another issue that is throwing it off.  I've decided to just use this css below to get rid of the quantity labels on the other pages.  I appreciate all your help.

 

header#header .icon-cart-quantity {visibility:hidden;}

Link to comment

Here’s an article I wrote to explain how to hide the shopping cart icon when the cart is empty

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.