Hide Variants that has 0 stock

[AndreBotha]

Hi Guys, so basically I want a non app way (Code Only) to hide variants that has 0 stock (Sold-out variants) or would never have that variant.

I'm using the free 'Studio' theme. If anyone can point me in a direction or could assist I would greatly appreciate it. 

I did look at this first but apparently this is for legacy themes:
https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

Regards, 

Andre 

[Liquid_xPert_SJ · Accepted solution]

@AndreBotha 

please refer to the below code add that code into your base.css file

Online Store > Edit Code > Theme Files > Assets > base.css file place the code at the very bottom.

.js.product-form__input.product-form__input--pill input.disabled + label {
	display: none;
}

Thanks

[AndreBotha]

This was simple and so quick! Thank you very much! 😀

[Liquid_xPert_SJ]

@AndreBotha 

no problem dont feel hesitate to reach out for further any issue.

[jbags]

This actually worked, I'm beyond thrilled! I did it to my Dawn theme and it's perfection, thank you so much!

[HWei]

Hi @Liquid_xPert_SJ, how do I hide variants that are out of stock?

My store URL is https://poney-malaysia.myshopify.com/

[Liquid_xPert_SJ]

@HWei  which theme you are using 

[HWei]

I'm currently using Impulse v7.5.0

[DesmondNg]

Hi HWei,

Try .variant-input-wrap label.disabled {
display:none;
}

[HWei]

Where should I include the code in?

[StefanosJNT]

On others themes where i could put this code to hide sold out variants because i dont have base.css file on my theme.(agile theme) thanks!

[Dan-From-Ryviu]

Hi @StefanosJNT 

Please add this code to your theme.css file to do that 

.product-form__input input[type=radio].disabled+label {
    display: none !important;
}

[StefanosJNT]

thank you for your fast reply, it worked but unlucky its shows the SOLD OUT badge even the products arend sold out
i fixed this by moving color thats available 1st.  Could you also help me on how can i show the original price next to the reduced price in the collection list and not only in the product page.. thank you very much!!

[idasports]

@Dan-From-Ryviu unfortunately, I don't have base.css or theme.css in my shopify instance, but I'm trying to hide the variant. Can you advise on where else I might be able to place the code? 

[Dan-From-Ryviu]

Hi @idasports 

Could you share your store URL?

[ASTools]

@Liquid_xPert_SJ Works great with pills, but is there also a version working with variant selector Dropdown menu?

[Liquid_xPert_SJ]

@ASTools  hi yes there is also please share the url

[ASTools]

Hello Liquid_xPert_SJ thank you very much for your answer.

again briefly to the problem. We would like to switch from Dawn 7 to Dawn 15. Since we sell some products with a large number of variants, the selection of variants via pills is not very straightforward for some items. Almost all of our products have two options: diameter and spiral length.

In Dawn 7 we were able to hide the non existing variants via a script in the code. For this we used this script from github: https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61

This script no longer works as planned in Dawn 15. Although the new version shows -not available behind variants, the variant selection2 with the spiral length does not automatically jump to the first really existing variant as soon as the diameter is changed. So it looks like the article is out of stock instead of not existing in this variant configuration.

Currently the shop is still running with Dawn Version7 until we get the problem with the variant selection under control, or until the variant selection2 at least automatically jumps to the first available or really existing variant when changing the first variant...

Nevertheless, here is the URL to our shop (currently still Dawn7):
www.as-toolstore.de

...Maybe it is possible to customise the product-variant-options.liquid so non-existing variants are not rendered in the drop down menu....

[ASTools]

@Liquid_xPert_SJ I am now pursuing two solutions, as the approach of hiding the unavailable variants only works partially.

1. iIwas able to change the product-variant-options.liquid so that only existing variants are rendered. This works, but sometimes the selection automatically jumps back to the first available variant. Seems like the selected variant is not saved for some reason. See product-variant-options.liquid code below:

Click to expand...

{% comment %}
Renders product variant options

Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
- picker_type: {String} type of picker to dispay

Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign product_form_id = 'product-form-' | append: section.id
-%}

{%- for value in option.values -%}
{%- liquid
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
else
assign swatch_value = null
endif

assign option_disabled = true
if value.available
assign option_disabled = false
endif
-%}

{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}

{%- capture input_name -%}
{{ option.name }}-{{ option.position }}
{%- endcapture -%}

{%- capture input_dataset -%}
data-product-url="{{ value.product_url }}"
data-option-value-id="{{ value.id }}"
{%- endcapture -%}

{%- capture label_unavailable -%}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture -%}

{%- if picker_type == 'swatch' -%}
{%- capture help_text -%}
<span class="visually-hidden">{{ value | escape }}</span>
{{ label_unavailable }}
{%- endcapture -%}
{%
render 'swatch-input',
id: input_id,
name: input_name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: value.selected,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text,
additional_props: input_dataset
%}
{%- elsif picker_type == 'button' -%}
<input
type="radio"
id="{{ input_id }}"
name="{{ input_name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if value.selected %}
checked
{% endif %}
{% if option_disabled %}
class="disabled"
{% endif %}
{{ input_dataset }}
>
<label for="{{ input_id }}">
{{ value -}}
{{ label_unavailable }}
</label>
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
<option
id="{{ input_id }}"
value="{{ value | escape }}"
{% if value.selected %}
selected="selected"
{% endif %}
{% if swatch_value and picker_type == 'swatch_dropdown' %}
data-option-swatch-value="{{ swatch_value }}"
{% if swatch_focal_point %}
data-option-swatch-focal-point="{{ swatch_focal_point }}"
{% endif %}
{% endif %}
{{ input_dataset }}
>
{% if option_disabled -%}
{% comment %}{{- 'products.product.value_unavailable' | t: option_value: value -}}{% endcomment %}
{{- 'products.product.not_exist' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
</option>
{%- endif -%}
{%- endfor -%}

2. so I have now used the default product-variant-options.liquid and have only adjusted the text for non-existent variants so that it is clear to customers that this combination does not exist. However, the selection of dropdown menu2 does not automatically jump to the first really available / existing variant as soon as menu1 is changed...

I could live with variant 2 for the moment, but I would prefer the variant with hidden variants because of the user-friendliness.

The shop is now online with Dawn15!

[Liquid_xPert_SJ]

@ASTools ok i will get back to you with a solution. 

[ASTools]

@Liquid_xPert_SJ How is it going? Do you have any news? 😃

[Liquid_xPert_SJ]

@ASTools  extremely sorry i forget to get-back to you, so you want to hide only unavailable variants right? even if they are in the combinations of multiple variants? correct?

[peterbange]

Any updates on this? ... I am trying to hide out-of-stock variants with our Impulse theme but none of the solutions above have worked 😞

[Dan-From-Ryviu]

Hi @peterbange 

You can try to add this code to your theme.liquid file, after <head> in Online Store > Themes > click "..." in the current theme > Edit code and check 

<style>
.product-single__meta .variant__button-label.disabled { display: none !important; }
</style>

[peterbange]

Worked great!  Thanks 🙏

[Dan-From-Ryviu]

You are very welcome! 

[Michael6thAve]

Hey Im using the spotlight theme and i need to hide sold out variants too. Can you help me? thanks

[Earp]

Ok so this code works for dawn perfectly. My only issue is that, say a customer looks for in my case, Size 7. But size 7 is out of stock. The product still displays in the filtered options but then when you click on the product that size 7 is out of stock. This is an issue for me as customers call me annoyed. Is there a way to fix this?

If you look at the images displayed you will see my issue

[Agreeableagony]

This works!  Amazing. Finally.

Any idea how to get it to also auto select one of the available options when people switch  one variant, etc. 

[twikkersss]

Hi, do you have an solution for theme "Debutify 3" maybe?

Would be great! Thanks a lot

[Dan-From-Ryviu]

Hi @AndreBotha 

Please share your store URL please 

[Micki_Angeles]

Hi @Dan-From-Ryviu 

Did all the solutions above and still can't seem to get it working.

I am using the current version of Dawn and here is the link

https://sneakerologyny.com/products/kane-revive-adult 

[Liquid_xPert_SJ]

@Micki_Angeles it's depends on the theme file structure and the requirements what you are looking for.

[Dan-From-Ryviu]

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
.product-form__input--pill input[type=radio]:disabled+label, 
.product-form__input--pill input[type=radio].disabled+label {
display: none !important;
}
</style>

[Lausw89]

Hello this solution was great thanks, however I'm now having the issue where  a 'sold out' badge appears each time I change the size - my first varient,  (before selecting the second variant) Can anyone advice on how to hide this please