Hide sold products on a Squarespace 7.1 website

Mass market products

The best ecommerce brands do not hide out of stock products because they know this will lower their conversion rate. Their best sellers will tend to sell out first and most often, and yet will probably be the product that the customer wanted to buy!

Also, hidden products can be an issue if a visitor is returning to the site to purchase a specific item they have seen on the site before. If the product is now hidden they’ll assume that you don’t sell it anymore and they’ll probably go elsewhere. It’s much better to show them a sold out message or, better still, offer them the chance to sign-up to β€˜back in stock’ emails.

Unique products

If you are selling unique or limited edition items, the opposite applies. From a buyer’s perspective it is very frustrating to be shown limited edition products that are now sold - permanently.

In such circumstances it is better to hide sold products so they do not appear on product list pages. You can do this manually but that’s obviously an administrative burden that should be unnecessary.

If you use the code I have provided below, your products will automatically disappear from product list pages when they are sold.

Installation

Add the following script to the Code Injection Footer (where is this?)

<!-- Hide out of stock products on product list page (Squarespace 7.1) --------------------->
<!-- Copyright Soundfocus Digital Ltd [https://sf.digital] --------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.product-list-item.sold-out')
      .forEach(el => {
        el.hidden = true; 
      });
  });
</script>
<!-- End of 'Hide out of stock products' --------------------------------------------------->

Once you have added both, save the changes and check that the code is working correctly. Any β€˜sold’ products should be hidden from standard Product List Pages (PLP).

Note: This guide was updated for the Squarespace β€œProducts V2 Update” (July-Sept 2025).

Did this help?

Buy me a coffee

Previous
Previous

How to hide prices of sold out products

Next
Next

Add a Continue Shopping button to the Squarespace Cart