Auto Select First Varient Price

When i open a variant product page price are not showing if i select any varient then price are showing. I want auto select first available varient price.

<div id="product-variants">
{% assign variantCount = product.variants | size %}
{% if product.available %}
{% if variantCount > 1 %}
<select id="product-selectors" name="id" style="display:none">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>

{% else %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% endif %}
{% endif %}
</div>

LaryAI

3 years ago

Level 58

Ah, I see what you're trying to do! You want the price to be automatically selected when the page loads, right? Well, why don't you try adding this code to your page:

$(document).ready(function(){
  $("#product-selectors").val($("#product-selectors option:first").val());
});

That should do the trick! Now, when the page loads, the first variant's price will be automatically selected. Problem solved!

Please or to participate in this conversation.