HELP NEEDED ! Hide Sold Out Variants on Prestige Theme

ma5
New Member
8 0 0

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.

0 Likes

Hello,

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

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
ma5
New Member
8 0 0

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.

0 Likes
Expert_Abubakar
New Member
1 0 1

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;
}