How to hide variants that are sold out

Highlighted
New Member
1 0 0

Hi, I can't hide my variants when they are sold out. 

Caroline Schnapp made thatGit : https://gist.github.com/carolineschnapp/4e70f7774ec4a3fb2622

But the link the hide variants when you have more than one options doesn't work anymore.

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
235 0 23

Hey Francois!

I'm Daryoush, on the winning Guru team! :)

The "remove-sold-out.liquid" code snippet which my colleague Caroline created is from March 15th, 2016 which is prior to when we updated most of our themes to be "sectioned" themes introduced on October 27th, 2016, including a brand new theme called "Debut". Due to this, the "remove-sold-out.liquid" code snippet may not be compatible. If you are using a Shopify supported theme, our Theme Support team may be able assist using your 60 minutes of free design time. I encourage you to give us a call or start a live chat, we are open 24/7 for your convenience!

Alternatively, you can hide sold out products using one of these apps:

- Zero Øut
- Wipeout (free up to 3000 products)

I hope this helps and have a wonderful weekend, Francois!

Cheers,
Daryoush

0 Likes
Highlighted
New Member
3 0 0

Can you tell me if the "ZERO OUT"  app works at the variant level?

In other words, if some variants are sold out, but other variants (for the same product) are still available, will the app work on just the soldout variants and leave the other variants available?

Thanks,

Joel Aiken

 

0 Likes
Highlighted
New Member
4 0 0

I can confirm from experience that ZeroOut doesn't work at the Variant level. I have hunted for the same thing and as of yet haven't found anything. The closest thing I have found is a plethora of inventory management apps that will send you a report when inventory levels pass a certain point. The Power Tools Suite has an app that deletes the variant when it runs out but that is not always ideal. Hope this helps.

Leah (Mel's developer)

0 Likes
Highlighted
Shopify Partner
6 0 1

I would also like to alter the options of the variants' select box.
What I found so far is how to edit the product-form.liquid like such:
 

<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
  {% for v in product.variants %}
    <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
  {% endfor %}
</select>

to:

<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
  {% for v in product.variants %}
    <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}{% if v.inventory_quantity == 0%} SOLD OUT{% endif %}</option>
  {% endfor %}
</select>

Now this produces the select box with the altered option value, but the code from assets/app.js.liquid changes how the final HTML is going to look like - the original select box is hidden and a new one (in DIV class=selector-wrapper) is created that has the attributes before my product-form.liquid alteration.
 

<div class="select">
   <label>Size</label> 
   <div class="selector-wrapper">
      <select class="single-option-selector" data-option="option1" id="product-select-1355440980032productproduct-template-option-0">
         <option value="XS">XS</option>
         <option value="S">S</option>
         <option value="M">M</option>
         <option value="L">L</option>
         <option value="XL">XL</option>
      </select>
   </div>
   <select id="product-select-1355440980032productproduct-template" name="id" style="display: none;">
      <option selected="selected" value="12432318660672" data-sku="">XS</option>
      <option value="12432318693440" data-sku="">S</option>
      <option value="12432318726208" data-sku="">M SOLD OUT</option>
      <option value="12432318758976" data-sku="">L</option>
      <option value="12432318791744" data-sku="">XL</option>
   </select>
</div>

Since I am not a shopify guru, much less a js guru, I need help with how to change my product options - this also means I will be able to make an option disabled (<option disabled>), or not show it all if I choose to.

So Daryoush, can you tell me how to do this?

Thank you!

0 Likes
Highlighted
New Member
23 0 0

Hey,
I understand your issue where you want to hide variants from your store that are out of stock so it will not create a bad user experience for customers.
I recently came across an app, AutoHide Soldout Products which worked for me to hide out of stock products & variants like size, colour. Once products are back in stock, it will be unhidden from the store automatically.
They can help you to do any customization requests you have. Download the app (https://apps.shopify.com/autohide-soldout-products) & contact their support team, they are really fast!

0 Likes