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.

Add the following to Custom CSS and change it as necessary:

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

Note that this has been built to work with the rectangular sold out labels, not the circular ones. If you want to use it 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.

SF DigitalCSS