Jump to content

Changing empty shopping cart text

Recommended Posts

I have some code entered to change the empty message in the "shopping cart" which I have changed to shopping bag. It works fine if you click on the bag icon and there is nothing in it, simply states there is nothing in your shopping bag.

However, if I add something to the bag then remove it I get the standard nothing in your shopping cart message. I have pasted the code below that I'm using, is there something I need to add to get it to work if you delete something to then make it empty?

window.onload = function(){
  if (document.body.classList.contains('has-cart')) {
      var pageDescription = document.querySelector('.empty-message');
      pageDescription.innerText = "You have nothing in your shopping bag."
      pageDescription.style.opacity = 1;

Link to comment
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

My site isn't live yet as I'm still working on it. I've attached two screenshots showing "you have nothing in your shopping bag" when you click on it whilst it's empty. The second shows the shopping bag after you've added something to it and removed it, you get "you have nothing in your shopping cart. Continue shopping". I assumed the code above had enabled me to change it as I wanted but obviously it doesn't appear to work once you remove something from the bag.



Link to comment

I've just found an answer that works, searching around I think you provided the solution on another post. For anyone that needs to know the below CSS works for me. Just change "New Text Cart" to what you want and adjust the font size accordingly.

.empty-message {
    visibility: hidden;
.empty-message:before {
    visibility: visible;
    content: "New Text Cart";
    font-size: 20px;

Link to comment


This topic is now archived and is closed to further replies.

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