How to Hide Prices, Disable Links and Remove Add to Cart on Sold-Out Products in Squarespace 7.1

When a product sells out in Squarespace, the default behaviour leaves a lot of loose ends — the image is still clickable, the title still links to the product page, the price is still visible, and the Add to Cart button sits there doing nothing. For a professional store, this looks unfinished. This guide covers every element you might want to tidy up, so your sold-out products look intentional rather than broken.

These snippets work across both Store pages (the standard product grid) and Product blocks (products placed inside regular Squarespace pages). You don't need to use all of them — pick the ones that match your setup.

1. Disable clicks on sold-out product images

/* Disable clicks on sold out product images */
.product-list-item.sold-out .product-list-item-link {
  pointer-events: none;
  cursor: default;
}

This prevents the product image from being clickable when a product is sold out. Instead of landing on an empty product page with no way to buy, the image simply does nothing. pointer-events: none disables all mouse interaction; cursor: default removes the hand cursor so there's no visual suggestion the image is clickable.

2. Hide the price on sold-out products

/* Hide prices on sold out products */
.product-list-item.sold-out .product-list-item-price,
.product-detail.sold-out .product-price {
  display: none;
}

Showing a price on something a customer can't buy creates friction and questions — is it coming back? Can I get it elsewhere? Hiding it keeps the grid clean and avoids awkward conversations. This targets both the grid view and the product detail page.

3. Disable clicks on sold-out product titles

/* Disable clicks on sold out product titles */
.product-list-item.sold-out .product-list-item-title {
  pointer-events: none !important;
}

The title link is easy to overlook, but without this, a customer can still click the product name and land on a dead-end product page. This closes that gap.

4. Hide the Add to Cart button on sold-out product blocks

/* Hide add to cart button for sold out products (product blocks) */
.product-block[data-product*='"soldOut":true'] .sqs-add-to-cart-button-wrapper {
  display: none !important;
}

This one uses an attribute selector to read the product data Squarespace embeds in the HTML — specifically looking for "soldOut":true in the data-product attribute. It's a reliable way to target sold-out status on product blocks placed in non-store pages, rather than relying on a CSS class.

5. Disable links on sold-out product blocks (images and titles)

/* Disable product page links for sold out items in product blocks */
.product-block .image-container a[href*="/p/"],
.product-block .product-title {
  pointer-events: none;
  cursor: default;
}

/* Re-enable links for products that are NOT sold out */
.product-block:not(:has(.product-mark.sold-out)) .image-container a[href*="/p/"],
.product-block:not(:has(.product-mark.sold-out)) .product-title {
  pointer-events: auto;
  cursor: pointer;
}

This pair of snippets works together. The first disables all clicks on product block images and titles. The second uses :has() — a modern CSS selector — to re-enable clicks specifically on products that don't have a sold-out mark. This approach avoids having to detect sold-out status directly; instead it disables everything and selectively re-enables what should be active. Note that :has() is supported in all modern browsers but won't work in older versions of Firefox (pre-121).

How to add these snippets

Go to Design → Custom CSS and paste in whichever combination applies to your store. They can all sit in the same CSS file without conflicting with each other.

Recommended combinations

• Store page only: Use snippets 1, 2, and 3

• Product blocks only: Use snippets 4 and 5

• Both: Use all five

A note on hiding the Sold Out badge

Some designers also prefer to hide the "Sold Out" text badge entirely to keep the grid visually uniform. If that's your preference, add:

/* Hide the Sold Out badge */
.product-mark.sold-out {
  display: none;
}

Be cautious with this one. Removing the badge entirely means customers have no way of knowing why they can't interact with a product. It works well if you plan to remove sold-out products from your store promptly, but less so if products sit in a sold-out state for extended periods.

Why bother with all of this?

A store full of dead-end sold-out products erodes trust. Customers who click through to something they can't buy, or who see a non-functional Add to Cart button, form a negative impression of the shop's professionalism. Taking ten minutes to implement these snippets makes your store feel considered and complete. That's true whether you're a small independent brand or managing a client's Squarespace site.