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-vintage-themes/hide-sold-out-variants

Regards,

Andre

[Liquid_xPert_SJ]

@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

[Dan-From-Ryviu]

Hi @AndreBotha

Please share your store URL please

[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

[DesmondNg]

Hi HWei,

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

[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:

Show More

{% 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 -%}

{{- ‘products.product.variant_sold_out_or_unavailable’ | t -}}

{%- endcapture -%}

{%- if picker_type == ‘swatch’ -%}
{%- capture help_text -%}
{{ value | escape }}
{{ 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’ -%}

{%- elsif picker_type == ‘dropdown’ or picker_type == ‘swatch_dropdown’ -%}

{%- 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.

[HWei]

I’m currently using Impulse v7.5.0