Jump to content

Hiding price on out of stock items?

Recommended Posts

  • 6 months later...
  • Replies 13
  • Views 25.4k
  • Created
  • Last Reply
  • 8 months later...
  • 3 weeks later...

There’s a pure CSS solution for this problem. Make sure the price and sold out mark are siblings in your HTML:


Then you can target the price class with a general sibling combinator selector (~) in CSS:

.sold-out ~ .product-price {
   display: none;

The price will only disappear when the sold out class is active.

Link to comment
  • 1 year later...
  • 4 months later...
  • 5 months later...


This article looks like just what I need but I am having difficulty using it to hide the prices on all sold out items in my Shop & Product pages:

Shop page: http://www.ashleighdix.com/shop/Product page: http://www.ashleighdix.com/shop/flushed

Please could someone advise...?

FYI: - I am running some JS to change ‘Sold Out’ to ‘Sold’ and to hide the ‘Add-to-Cart/Purchase’ button for out of stock items.

Many thanks in advance… :)

Link to comment
  • 1 year later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.