Display all variant prices on product page

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
110 20 41

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 %}
1 Like
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