How to hide prices of sold out products

This guide explains how to hide the price of sold out items on Squarespace. Sometimes it’s better not to show a price when something has been sold. This is especially true when selling one-off or limited pieces; showing prices on sold-out items can create the wrong signal.

Why hide prices of sold items?

Hiding the price helps you:

  • Protect artist and client confidentiality: For commissioned work or unique artworks, the agreed price is often private. Removing it respects the buyer and keeps the focus on provenance, not numbers.

  • Present a cleaner archive: For galleries and makers, sold-out items act as a portfolio. Without a price badge, the page reads as a case study, focusing on the work, process and credit.

  • Avoid unhelpful price anchoring: A discontinued piece priced at Β£800 can anchor expectations for new work that now costs Β£1,200. Hiding historic prices prevents outdated comparisons influencing future sales.

  • Preserve brand positioning: Luxury and collectible markets trade on scarcity and story. Keeping sold-out products visible without a price maintains the narrative of demand without inviting bargain-hunting or haggling.

  • Reduce customer frustration: Seeing a tempting price on something unavailable is a dead end. Removing the price nudges attention to actions that are possible.

Using CSS

You can hide the prices of sold products with some CSS. This removes the visible prices from the page so that users will not see them.

Here is some example custom CSS that you can add to your β€˜Custom CSS Panel’ in Squarespace:

/************************************** 
Hide prices of sold products
Copyright SF.DIGITAL https://sf.digital
Use freely in your Custom CSS but  
do NOT re-publish.
**************************************/
.sold-out .product-price, .product-list-item.sold-out .product-list-item-price {
  display: none!important;  
}

This will hide prices of sold-out products on both Store and Product pages, as well as Summary Blocks. However, it will not remove products on Product Blocks as Squarespace removed the .sold-out class on Product Blocks in January 2025 and have not reinstated them.

Using JavaScript

It is possible to hide prices of sold-out products completely by using JavaScript. This is a more comprehensive method that CSS, as the CSS only hides the prices from humans. It doesn’t affect how β€˜bots’ and β€˜crawlers’ like Google and Bing read your pages. They can still read the prices buried in the page and may display the β€˜hidden’ prices in search results.

I’ll add a JavaScript solution to this page when time allows.

Previous
Previous

How to display lead times on custom products

Next
Next

Hide sold products on a Squarespace 7.1 website