Automatically Remove Sold Out Items

Pin this post to Pinterest! ☝🏻

Updated 9/3/25 to reflect Squarespace’s updated product-list markup

Updated 8/12/26 with code to create a new page to display ONLY sold out items

automatically remove sold out items

There's nothing worse than having a whole store full of items that say "sold out".

Customers shouldn't have to scroll through a list of items that aren't available for purchase. This is a really fast way to make them leave your ecommerce site and go somewhere else. It's really frustrating to the customer when you sell unique items (like paintings) and the item they want is sold out.

It's like going to the bakery and asking for a chocolate croissant.

"We're out."

"Ok... what about a cherry danish?"

"We're out."

"Ok... let's try a blueberry muffin."

"We're out."

"Well then what DO you have?!"

As of now, once you sell out of an item, it stays on your website with the words "sold out". Unfortunately, Squarespace doesn't automatically remove the item from your store. (Why?!?! 😩)

However, Squarespace does give you the option to manually remove an item by editing the item and changing the visibility to "hidden". If you’re making multiple sales a day (or even a week), that can quickly add up to a lot of time you’re wasting.

Thankfully, there's a way for items to automatically be hidden once they are sold out.

Also - if you have digital products, they never sell out since there's an indefinite amount. But if you're selling unique physical items, then that quantity is going to hit "0" as soon as you make a sale. And good for you!

THE CODE you need

Updated 9/3/25 to reflect Squarespace’s updated product-list markup

Log into your site and go to Pages -> Custom Code -> Code Injection

Then paste this code in the FOOTER section.

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Remove any product card whose wrapper carries the "sold-out" class
  document.querySelectorAll(
    '.product-list-item.sold-out, .products-list-item.sold-out, .grid-item.sold-out, .ProductList-item.sold-out'
  ).forEach(function (el) {
    el.setAttribute('aria-hidden','true');
    el.style.display = 'none';
  });
});
</script>

Hit Save and you're all set!

Now you should have a beautiful store that displays all of your items that are in stock:

ADDING A NEW PAGE OF ONLY SOLD OUT ITEMS

A few people have asked how they can have a page of only sold out items, so I’ve included the code below.

Why would someone want a page of sold out items? Here are a few scenarios:

• One-of-a-kind or handmade items where nothing restocks the same way twice, so a "sold out" page doubles as a portfolio of past work

• Custom order businesses where seeing what's sold before helps someone commission something similar

• A sold-out page can show buyers that things do sell, which can nudge hesitant shoppers on current listings

There are 2 sets of code that you’ll need.

STEP 1: CREATE A NEW PAGE

First, create a new page to display the sold out items. Then add a code block and paste the code below -

<div id="sold-out-container"></div>
<style>
#sold-out-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}
.sold-out-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.sold-out-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
.sold-out-card-title {
  font-size: 16px;
  margin-top: 2px;
}
</style>

STEP 2: ADD THE FOOTER INJECTION CODE

Go to Custom Code -> Code Injection and paste this in the FOOTER

*** Change /YOURURL in the 3rd line to the url of your store - keep the "/" in front of the URL:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var storePageUrl = '/YOURURL';
  var soldOutSelector = '.product-list-item.sold-out, .products-list-item.sold-out, .grid-item.sold-out, .ProductList-item.sold-out';

  fetch(storePageUrl)
    .then(function (res) { return res.text(); })
    .then(function (html) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, 'text/html');
      var soldOutItems = doc.querySelectorAll(soldOutSelector);
      var container = document.getElementById('sold-out-container');

      if (soldOutItems.length === 0) {
        container.innerHTML = '<p>Nothing is currently sold out.</p>';
        return;
      }

      soldOutItems.forEach(function (item) {
        var linkEl = item.querySelector('a');
        var imgEl = item.querySelector('img');
        var titleEl = item.querySelector('.grid-title, .product-title, .ProductList-title, [class*="title"]');

        var href = linkEl ? linkEl.getAttribute('href') : '#';
        var imgUrl = imgEl ? (imgEl.getAttribute('data-src') || imgEl.getAttribute('src')) : '';
        var title = titleEl ? titleEl.textContent.trim() : '';

        var card = document.createElement('a');
        card.href = href;
        card.className = 'sold-out-card';
        card.innerHTML =
          '<img src="' + imgUrl + '" alt="' + title + '">' +
          (title ? '<div class="sold-out-card-title">' + title + '</div>' : '');

        container.appendChild(card);
      });
    })
    .catch(function (err) {
      console.error('Could not load sold-out items:', err);
    });
});
</script>

That's it - you're done!

Here’s how the final product looks -

A COUPLE OF THINGS TO KEEP IN MIND:

• You can edit the font size and margin of the product titles in the CSS (the code block that you added first)

• The new Sold Out page will display the cover image only. In other words, when you hover over the image, it will not swap to another image like it does in the actual store.

• If you're in edit mode on the new page, you won't see the items. Exit out of it to see the products.

• If you want to disable the ability for people to click on a sold out item, change the 'a' to 'div' in this line of the script: var card = document.createElement('a');

TROUBLESHOOTING

If it’s not working, be sure that you updated the 2nd code and changed /YOURURL to whatever your store url actually is.

Otherwise it won’t work!

---