Squarespace Products: Changing 'SOLD OUT' to 'SOLD' (or something else)

When product stock is zero, Squarespace can (if configured in the Style Editor) display a ‘SOLD OUT’ label beside a product. Here’s a straightforward way to change the ‘SOLD OUT’ label to ‘SOLD’ or anything else.

From July 2019 onwards, there’s a built-in Squarespace feature to allow you to change this label.

Go to Commerce > Inventory and then click the ‘gear’ icon in the top-right corner. In the panel that opens, click Sold Out. You can change the label to whatever you prefer. The change affects all products and services across your store.

change-sold-out-labels.png
 

Previously, the only way to achieve this was to add some code to Custom CSS like this:

 /* Change Sold Out to Sold */
 .product-mark.sold-out { 
   text-indent: -9999px!important;
 }
 .product-mark.sold-out:after {
   content: 'Sold'; 
   text-indent: 0; 
   display: block; 
   margin-top: -1em; 
 } 

Note that the code above was built to work with the rectangular sold out labels, not the circular ones. If you want to use the code with the circular ones, you’ll need to adjust the text-indent (the one that I’ve set to 0) so that the label fits inside the circle. For example, try -26px and adjust to fit.

Further customisation of the Sold Out labels

Whilst the built-in option and the code above will only allow you to change the labels across your entire store, we can offer more specific customisations. For example, you may want different phrases for different items in your store. Your services might need to say ‘unavailable’ or ‘fully booked’, whereas your products might need to say ‘sold out’ or ‘on order’.

For simple customisations like this, book a Squarespace Expert for 20-30 minutes.

SF DigitalCSS