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

[PA620]

This worked for me in the refresh theme. However, I have swatch enabled too and those do not reflect what is sold out. Do you have a code I could use to make those be hidden when out of stock too?

[Liquid_xPert_SJ]

@PA620  welll that depends on the theme code.

[Sportitfirst]

Hi,

Can you help here please! We want to hide OOS variants because shopify filter picks them up and allows you to filter on them despite them being out of stock. Shop url: Sport It First | Sportswear, Clothing & Footwear Store

What code can we add into our theme. We are using Ella 6.7.0

[xtragrej]

Hi!
we're using the enterprise theme (https://themes.shopify.com/themes/enterprise/styles/active)  and even though I'm no newbie when it comes to coding, I'm not very familiar with liquid and the way shopify structures CSS.

Would you able to provide the appropriate code snipped to hide unavailable variants as well as where to place it?
Best Regards!

[oinkpigments]

did you ever get a solution? trying to do the same thing

[Liquid_xPert_SJ]

@oinkpigments 

Please share the store url

[LTTT]

Genius!

This works well when there is no inventory in all locations. I have shop location and wh2. 

In the scenario when wh2 has stock but shop doesn't, the code doesn't suppress the item and it shows as available in the store, although there is no stick there. 

Is there another way to do this to address the above? TIA

[Liquid_xPert_SJ]

@LTTT yes it need a customized code according to the needs.

[bestprice-dev]

If you are using spotlight theme, this solution does not work. 
Spotlight uses JS instead of CSS to populate your inventory for the product.
I am actively working on a solution to this DM me if you are looking for the same thing.

[BerkerOzer]

Hi, this works great for Dawn theme. I just want to hide unavailable products not out of stock products. How can I do that? 

[Liquid_xPert_SJ]

Hi@BerkerOzer this will need some more custom code and conditions.

[BerkerOzer]

Can you share it if it doesn't take up too much of your time?

[Liquid_xPert_SJ]

@BerkerOzer

Definitely it will take time 🙂 to give you and updated code according to your requirements.:)

[BerkerOzer]

Okey. I will wait for it. Thanks

[Agreeableagony]

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

We are running into issue where it forces users to scroll back and select things that only had one option anyway.

EG: https://www.agreeableagony.com/products/riggers-kit-suspension-kit-mfp-bondage-rope-large-kit 
The "I just need...." kit makes you manually select "no ring"  twice. which should just be automatic. 

[Liquid_xPert_SJ]

@Agreeableagony 

Yes it can be done with some custom JavaScript code. Do let me know if you need help on this.

Thank you

[Agreeableagony]

Yes i am curious for more info.  

[edgeIT]

Hi, Looking for a solution for Trade Theme. This solution does not work. Please check www.theyardhouse.in

[John_denza]

HI,

You can use this app - https://apps.shopify.com/veil-hide-sold-variants

[edgeIT]

This app only hides OOS variants from product page and not from collection or filters. Does not help. Issue is when people are using filter in collection page, products with filtered OOS variants also sho up.