I want Sold Out to display on collections page when a variant is sold out

ebdela
Visitor
2 0 0

Hello, I am using Debut theme.  On my collections page - I want Sold Out to display if a variant is sold out as per pic below. 
This "sold out" displays on the collections page only if ALL variants of a product are sold out.  But it doesn't display  if one of the other variants is in stock which is frustrating customers.   

Screenshot 2024-05-13 at 12.08.42 PM.png

I want the small sold out button to show on ALL variants that are sold out even if another variant is in stock.

 

Could someone please assist?

 

Thank you!

 

Ebonie

 

 

Replies 3 (3)

Serj94
Shopify Partner
20 2 4

Hi, if theme doesn't support that button, you try to find an app. If apps are not appropriate, you need to add liquid code. If you can't edit liquid, add js or css :has(:not(.sold_out))

If the answer is useful, give it a like or mark as the accepted solution
ebdela
Visitor
2 0 0

The theme supports that button as it displays when all variants are sold out right?  I would prefer to not use an app and I can edit the code.  I think it's within in the product-card-grid.liquid and I'm wondering if this is the code?  I have tried to change the 

{% unless product.available %}

to

{% unless variant.available %}

 

But the sold out still doesn't display for sold out variants.

 

 

Usage:
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
<span class="visually-hidden">{% render 'variable-product-title', product: product, full_product: full_product %}</span>
</a>

Serj94
Shopify Partner
20 2 4

Try to inspect the product card html and attributes in browsers developer console. You need to find a 'sold out' element first, or a data attribute or a class on one of the 'sold out' label parents, which is a trigger for it to appear.

Next step is to search in the code by a elements attributes or classes, related to the sold out label.

Try to delete code in liquid to confirm that you're right. Sold out will disappear if so

If the answer is useful, give it a like or mark as the accepted solution