How can I hide Squarespace's Add-to-Cart button when an item is out of stock?

Squarespace Product Pages have a great design, especially on the newer templates in the Brine family, but I do find it strange that you can click on the Add-to-Cart button when an item has sold out. Squarespace do ‘grey it out’ but if you click or tap it, you’ll see the ugly grey apology box.

 The Add to Cart experience for out of stock products

The Add to Cart experience for out of stock products

I think it improves the User Experience (UX) to hide the button when an item is out of stock. You can easily do this for all out-of-stock items by adding the following to the Custom CSS page (on the Design > Advanced menu.

// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

If you want to hide the price for sold-out products on the product page and the product detail page, you can do this with the following CSS:

// Hide Price when product is out of stock
.sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

Note that this won’t remove the price from Summary Blocks.

Need something more complex when an item is out of stock? You can buy some developer time on the Contact Us for Coding page.