CODEWITHSUNDEEP
javascripthtmlshopifyliquid
EvonuX
EvonuX

Reputation: 189

Hiding input fields unless a specific variant is selected - Shopify

For example, I need to hide three input fields unless my sixth variant is selected. They are all shown with the code below.

<div class="product-form__item product-form__item--quantity">
    <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
    <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>

Not sure if this is doable with liquid or JS but I'd love some help

Upvotes: 1

Views: 616

Answers (1)

EvonuX
EvonuX

Reputation: 189

Got it to work with jQuery :)

jQuery("#SingleOptionSelector-0").change(function(){ 
  if($(this).val() == 'Personalized'){
    $(".product-form__item--quantity").show(); 
  } else { 
    $(".product-form__item--quantity").hide();
  }
});

Upvotes: 2

Related Questions