Display all variant prices on product page

Highlighted
New Member
1 0 0

Hey,

I am trying to get all my product variant prices displayed on the individual product page, I am building a rental site and have varied prices for the date ranges, I have added this code:

      <div class="product-single__meta">
        <h1 class="product-single__title">{{ product.title }}</h1>
          <div class="product__price">
            {% for variant in product.variants %}
            {% include 'product-price', variant  %} 
            {{ variant.title }}
{% endfor %}
          </div>
 
Which is displaying all of my variant prices under the product title, but as soon as a date range is selected all of the prices change, should I move my for loop somewhere else? I'm guessing it's being over written but not sure how to fix this
 
0 Likes
Highlighted
Shopify Expert
115 22 45

Try this. You'll need to add some formatting around it, but it should output what you need, 

 

{% for variant in product.variants %}
{{ variant.title }} - {{ variant.price | money }}
{% endfor %}
Highlighted
New Member
1 0 0

Hello Eric,

Can you help me improve?

 

How should I do if I wanted to add both the quantity to be purchased and the direct purchase button to the title and the price of the variants?

I would like to get something like this.

 

 

<ul>
{% for variant in product.variants %}
<li> {{ variant.title }}
{{ variant.price | money }}
!-- INPUT: quantity (default "1" and +/- buttons)--
!-- BUTTON: add to the cart --
!-- BUTTON: direct purchase --
</li> {% endfor %}
</ul>

Thank you in advance!

 

0 Likes
Highlighted
Shopify Expert
69 2 6

here code snippet

 

{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
   {% for option in product.options_with_values %}
   <div class="selector-wrapper js product-form__item">
      <label for="SingleOptionSelector-{{ forloop.index0 }}">
      {{ option.name }}
      </label>
      <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
         id="SingleOptionSelector-{{ forloop.index0 }}"
         data-index="option{{ forloop.index }}"
         >
      {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}  --
      {% include 'product-price-reg', variant: current_variant %}
      </option>
      {% endfor %}
      </select>
      {% for value in option.values %}
      <input type="radio"
      {% if option.selected_value == value %} checked="checked"{% endif %}
      {% unless variant_label_state %} disabled="disabled"{% endunless %}
      value="{{ value | escape }}"
      data-index="option{{ forloop.index }}"
      name="{{ option.name | handleize }}"
      id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
      <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
      {{ value | escape }}
      </label>
      {% endfor %}
   </div>
   {% endfor %}
</div>
{% endunless %}

 

0 Likes