Exclude Sold Out Items in Product Summary Block

I'm trying to advertise new products on the home page, but I don't want to show sold-out items. Anyone has any idea how to do something like this?

Thanks!

You can hide sold out items with CSS. Can you share link to homepage?

On 5/25/2020 at 9:11 AM, tuanphan said:

You can hide sold out items with CSS. Can you share link to homepage?

Thanks! Here is the link

Did this get resolved?

9 hours ago, bourlonc said:

Did this get resolved?

If you share link to page where you use summary block. We can check easier

2 hours ago, tuanphan said:

If you share link to page where you use summary block. We can check easier

Hey Tuanphan!

Here's the link:

https://www.indiecovershop.com/premadecovers

4 hours ago, bourlonc said:

Hey Tuanphan!

Here's the link:

https://www.indiecovershop.com/premadecovers

Add to Premade covers page settings > Advanced > Header

<style>
  .sold-out {
    display: none;
}
</style>

5 hours ago, tuanphan said:

Add to Premade covers page settings > Advanced > Header

<style>
  .sold-out {
    display: none;
}
</style>

Is there a way to hide it and also remove the blank space? I'd like all rows to have 4 products.

5 hours ago, tuanphan said:

On 9/14/2020 at 3:54 PM, tuanphan said:

Add to Premade covers page settings > Advanced > Header

<style>
  .sold-out {
    display: none;
}
</style>

 

Any clue how to do it?

I have figured out that I can choose to only display "featured products" in the summary block, and once an item is sold out, I will then edit the listing and uncheck it as a "featured product". It's a bit of a hassle but it's working for me for now. Hope that helps.

On 9/23/2020 at 2:46 AM, siweisong said:

I have figured out that I can choose to only display "featured products" in the summary block, and once an item is sold out, I will then edit the listing and uncheck it as a "featured product". It's a bit of a hassle but it's working for me for now. Hope that helps.

You can use jQuery to do this. @bourlonc did this

If you still need help, please share url, we can check easier.

On 9/23/2020 at 6:32 PM, tuanphan said:

You can use jQuery to do this. @bourlonc did this

If you still need help, please share url, we can check easier.

fortsferryfarm.com, see the shop new arrival product summary.

Thanks!

On 9/14/2020 at 2:54 PM, tuanphan said:

<style> .sold-out { display: none; } </style>

Hi @tuanphan I have been playing with this code and it appears to hide the actual "sold out" tag but not the sold out product. Any ideas on a resolution that would hide the actual sold product from a summary block?

15 hours ago, KristineNeilStudio said:

Hi @tuanphan I have been playing with this code and it appears to hide the actual "sold out" tag but not the sold out product. Any ideas on a resolution that would hide the actual sold product from a summary block?

Can you share link to page where you use summary? We will check again

4 hours ago, tuanphan said:

Can you share link to page where you use summary? We will check again

We're using this on several pages but this is one of them: https://www.melissadesignerjewelry.com/bastian-inverun. Some of the items still displaying are sold out (just the tag is hidden). Let me know what you think!

Just jumping in here, I'm also interested in hiding sold out products on my product page. What would be even better would be to have a filter to filter our sold out products.

https://www.wanderlustnursery.com/shop/

On 8/27/2021 at 4:57 AM, WanderlustNursery said:

Just jumping in here, I'm also interested in hiding sold out products on my product page. What would be even better would be to have a filter to filter our sold out products.

https://www.wanderlustnursery.com/shop/

Add to Design > Custom CSS

div.sold-out {
    display: none;
}

On 8/29/2021 at 11:02 PM, tuanphan said:

Add to Design > Custom CSS

div.sold-out {
    display: none;
}

 

Thank you! Is there a way I can add a link onto my main shop page such that my customers can either view all products OR only view available products. I don't want to hide sold out products all the time, but rather provide the option, much like a tag or category link.

On 9/9/2021 at 11:15 AM, WanderlustNursery said:

Thank you! Is there a way I can add a link onto my main shop page such that my customers can either view all products OR only view available products. I don't want to hide sold out products all the time, but rather provide the option, much like a tag or category link.

Is this possible without creating an entire other product collection page? I want a link that my customers can click to filter out sold out products.

On 11/3/2021 at 7:29 AM, WanderlustNursery said:

Is this possible without creating an entire other product collection page? I want a link that my customers can click to filter out sold out products.

Add it under "All" in left side of shop page?

On 11/5/2021 at 7:58 PM, tuanphan said:

Add it under "All" in left side of shop page?

Let me clarify, I want a filter for sold out products that's automatic. I don't want to manually make a tag and manually tag and untag products as they go out of stock. I don't want to always filter out sold out products all the time. I'm really struggling with this feature.

13 minutes ago, WanderlustNursery said:

I want a filter for sold out products that's automatic.

I already produced some code that will do this automatically for you on Squarespace 7.1 product pages. You'll find details in this guide: Hide sold products on a Squarespace 7.1 website.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

On 11/8/2021 at 8:13 AM, paul2009 said:

I already produced some code that will do this automatically for you on Squarespace 7.1 product pages. You'll find details in this guide: Hide sold products on a Squarespace 7.1 website.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Correct me if I'm wrong, but this appears to always hide all 'sold out' products. I specifically need a filter; a link that can be clicked in order to show or hide 'sold out' products. The intent is that customers would have the option to see all products by default or to click a link to filter down to products that are only currently in stock.

In case you want to hide Sold out products only in the Related products section, here is the css : 

<!-- Hide Sold out products in Related products list -->
<style>
  .ProductItem-relatedProducts .sold-out {
    display: none;
}
</style>

On 9/23/2020 at 11:32 PM, tuanphan said:

You can use jQuery to do this. @bourlonc did this

If you still need help, please share url, we can check easier.

 @tuanphan I would also like to automatically hide 'sold out' products. I can't use Paul2009's code because I'm not using 7.1.

The following code works: 

<style>
  .sold-out {
    display: none;
}
</style>

This works too in custom css:

div.sold-out {
    display: none;
}

But as Bourlonc said, it leaves a blank space where the sold out product was. How can I avoid this?

I am using a Summaries Block and you mentioned that this might be achieved using its 'featured only' option. But how do I automatically change the items from featured to not featured when they sell out?