HELP NEEDED ! Hide Sold Out Variants on Prestige Theme

[ma5]

Hi !

I have tried different ways to hide sold-out variants from drop down but nothing is working for me right now.I also tried this ( https://shopify.dev/tutorials/customize-theme-hide-variants-that-are-sold-out ) but still the sold out variants are not hiding.. Need some direction here for this issue.

Thanks.

[diego_ezfy]

Hello,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

Kind regards,
Diego

[ma5]

Hi Diego !

Currently i am trying to hide sold out variants of this product : https://childrenchic.com/collections/girls-mary-janes/products/girls-childrenchic-classic-azure-velv...

I am using Prestidge theme on my store. Any idea for hiding soldout variants in dropdown or add text infront of soldout variant in the dropdown.

[Expert_Abubakar]

Under snippets. Replace this code in product-from.liquid at line 194. This code is for POPOVER selector. 

{%- for value in option.values -%}
<button type="button" class="Popover__Value {% if value == option.selected_value %}is-selected{% endif %} Heading Link Link--primary u-h6"
data-value="{{ value | escape }}"
data-option-position="{{ option.position }}"
data-action="select-value">
{{- value | escape -}}
</button>
{%- endfor -%}

With the below code. 

{%- for variant in product.variants -%}
<button type="button" class="{% unless variant.available %} hide_variant {% endunless %}Popover__Value {% if variant == selected_variant %}is-selected{% endif %} Heading Link Link--primary u-h6"
data-value="{{ variant.title }}"
data-option-position="1"
data-action="select-value">
{{ variant.title }}
</button>
{%- endfor -%}​

And then add this code in the theme.css file at the end. 

button.hide_variant {
display: none;
}

[Bogidk]

Do you have another code for the "Block" Selector type?

[Marrakech_Cloth]

Hello, I have been trying to accomplish this with the Prestige theme following your directions but I can't seem to get it to work. Are the instructions different for Shopify 2.0? Also, is there a way to do this for the Block selector instead? 

Any assistance is much appreciated!

[GreenMountains]

Have you found out the solution to hide sold out variants? i am having the same problem, thanks!

[GreenMountains]

Hello tried adding the above, but the variant drop off stops working at all after i add the above code in the theme.css file at the end.

Could you please kindly help?

[m-talha-amjad]

If anyone is looking for this solution.

In product-form.liquid search for Swatch and place this in the label class.

class="SizeSwatch {% if product.variants[forloop.index0].available == false %} soldout {% endif %}"

After that based on this class use CSS to hide or fade out the variant options.

[jorgesolis]

Could you tell me how did you figured out ? I cant fin a solution yet

[rajkmr]

For the best results, you might want a developer to check your theme to add the required code to hide sold out variants on Prestige theme. For themes like Dawn, you probably can find code on GitHub. But nothing working is available for Prestige to the best of my knowledge. Check this similar post
If you are looking for an app based solution, you can try Camouflage

[JZ1]

Camouflage is a great solution!!