How to display out of stock variants as unavailable on product variants collection page?

[asmenu]

How can I change the variant table to show that the variants are also unavailable? is there a way to show the variants and prices crossed out? 

 

[kraftivsoftware]

Hi @asmenu - is the table a custom code that you made?

[asmenu]

I followed this :  

https://klinkode.com/displaying-product-variants-on-collection-pages-in-shopify/

[tim · Accepted solution]

Then replace lines 12 ad 13 with this:

{% if variant.available %}
  <td>{{ variant.title }}</td>
  <td>{{ variant.price | money }}</td>
{% else %}
  <td><s>{{ variant.title }}</s></td>
  <td><s>{{ variant.price | money }}</s></td>
{% endif %}

[asmenu]

this seemed to work! thank you so much! 

[asmenu]

how can I get the product with no variants to have the strike through also when sold out? 

 

[tim]

To cross the title you need to do similar edits.

For Dawn, these lines:

https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L123 and

https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L160 

    {{ card_product.title | escape }}

change to

{% if product.available %}
    {{ card_product.title | escape }}
{% else %}
  <s>{{ card_product.title | escape }}</s>
{% endif %}

 To cross out the price it's better to use CSS. You can add this to "Custom CSS" under theme settings:

.price--sold-out * {
  text-decoration: line-through;
}

Also, you can use CSS for product title too instead of liquid edit above:

.card__content:has(.price--sold-out) a {
  text-decoration: line-through;
}

[asmenu]

sorry don't understand where to add the 

.price--sold-out * {
text-decoration: line-through;
}

[asmenu]

the CSS works but the cross out is crossing all titles out instead of just the sold out ones. 

[asmenu]

got what I wanted by adding both the CSS codes to Custom CSS. thanks so much! 

[swym]

Hey @asmenu, 

Thanks for sharing the doc you used. To display the prices and variant titles of the variants that are sold out please make the below code changes: 

1.  Replace the code that you added to the snippets/card-product.liquid with the below code: 

{% if template.name == 'collection' and card_product.variants.size > 1 %}
  <table class="variants-table">
    <thead>
      <tr>
        <th>Variant</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      {% for variant in card_product.variants %}
        <tr class="variant-available--{{ variant.available }}">
          <td>{{ variant.title }}</td>
          <td>{{ variant.price | money }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

2. Add the below CSS to cross out the titles and prices of the sold-out variants in addition to the CSS you added for the design of the variant table.

.variant-available--false {
  text-decoration: line-through;
}

3. Once you have made these changes, save the files and try previewing the collection pages. The title and price of the variants that are sold out will be crossed out on the variants table as shown in the screenshot below: 

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards, 

Abhishek from Swym

[asmenu]

couldn't figure out how to make this one work 😞