Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to make cart icon quantity not display zero


abry747

Question

  • Answers 25
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@paul2009 got us going in the right direction! Cool trick for sure! @abry747 this is the CSS that should do what you want. Remove the other codes we were working on. a.icon--cart[aria-label^=

Awesome!  That did the trick.  Thanks so much!

25 answers to this question

Recommended Posts

  • 0
if ($('span.sqs-cart-quantity').html() == 0) {
  $('span.sqs-cart-quantity').html('');
}

 

Edited by rwp
Link to post
  • 0

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 post
  • 0
<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 post
  • 0

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!

Link to post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

Ugh, sorry, I missed the end ); when I copied the code. Fixed the post above. Keep document.ready

Edited by rwp
Link to post
  • 0

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 post
  • 0

You're right, it's on all pages.  I'm seeing the zero because when you add an item in the cart and remove it, the zero is then displayed and stays on all pages.  Not sure if this can be fixed.  Thanks!

Link to post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

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 post
  • 0

I do not know why this isn't running when the page reloads.

I would try putting it back in the footer now that the jQuery scripts are fixed.

Edited by rwp
Link to post
  • 0

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 post
  • 0

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

@paul2009 got us going in the right direction! Cool trick for sure!

@abry747 this is the CSS that should do what you want. Remove the other codes we were working on.

a.icon--cart[aria-label^="0 items in cart"] .sqs-cart-quantity{
  visibility: hidden;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...