Liquid, JavaScript, themes, sales channels
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.
Hello,
Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).
Kind regards,
Diego
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.
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;
}
Do you have another code for the "Block" Selector type?
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!
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?
Have you found out the solution to hide sold out variants? i am having the same problem, thanks!
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.
Could you tell me how did you figured out ? I cant fin a solution yet
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022