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

[ebdela]

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.   

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

[Serj94]

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))

[ebdela]

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]

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