Display all variant prices on product page

[solo4]

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

[Eric_K_]

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

[Dario_Mariotti]

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!

[AvidBrio]

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