Hiding Out of Stock Variants

There are two options for this. The first would be to follow Shopify's guide linked here:

Alternatively, try the following steps if you wish for "sold out" text to appear next to your variants in the variant dropdown, like this:

Variants sold out

Step 1

The following code has been tested on the latest version of our themes. Before beginning, we advise you make a backup of your current theme to ensure you can jump back to this if this tutorial does not work for your specific theme version.

Add the following code to product-template.liquid within the {% for value in option.values %}

{% comment %}Sold out should be displayed in the select where there is just one option{% endcomment %}
{% if product.options_with_values.size == 1 %}
{% assign show_sold_out = 1 %}
{% else %}
{% assign show_sold_out = 0 %}
{% endif %}
{% comment %}Check if the only option is sold out{% endcomment %}
{% assign sold_out = false %}
{% if show_sold_out %}
{% for variant in product.variants %}
{% if variant.option1 == value %}
{% unless variant.available %}
{% assign sold_out = true %}
{% endunless %}
{% endif %}
{% endfor %}
{% endif %}

Step 2

Replace the current option code with the following:

<option {% if option.selected_value == value %}selected{% endif %} value="{{ value }}">
{{ value }}{% if sold_out %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>

To hide this option completely:

{% unless sold_out %}<option {{ props }} value="{{ value | escape }}">{{ value }}</option>{% endunless %}

Need help with coding?

We have a number of trusted coding customisation specialists, all of which are grouped for your convenience under our help guide:

Apps

Additionally, you could try apps such as these: Wipeout - Shopify apps Zero-out - Shopify apps This app moves Products to the bottom of a Collection as opposed to hiding them:

Out-of-Stock Police App

Contents
Step 1
Step 2