Help us set up price updates when changing product options.

Shopify Discussion
1

I need to create a table that will subtract a percentage from the price of a product. But the problem is that the products have options and I don’t understand how to make sure that when you change the product option, the prices in the table change (with a percentage deduction)

<svg class="icon icon-discount" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="evenodd" d="M7 0h3a2 2 0 0 1 2 2v3a1 1 0 0 1-.3.7l-6 6a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4l6-6A1 1 0 0 1 7 0m2 2a1 1 0 1 0 2 0 1 1 0 0 0-2 0" clip-rule="evenodd"></path><strong>  Buy More and Save up to 30%</strong></svg>  
<div style="padding-left: 15px;">

      <style type="text/css">
        .price-row-item {
            padding: 9px 0px 9px 15px !important;
        }
      </style>

<div style="padding-left: 15px;">
    <table style="font-size: 82%; min-width: 80%; line-height: 1.25;" id="product-quantity-breaks">
        <thead style="background: #FFF; color: #333;">
            <tr>
                <th style="padding: 10px 0px 10px 15px !important;">Quantity of Packs</th>
                <th style="padding: 10px 10px 10px 15px !important;">Price per Pack</th>
                <th style="padding: 12px 12px 12px 15px !important;">Discount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td class="price-row-item">Buy 2</td>
            {% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.95 | round: 2 %}
            <td class="price-row-item">{{ discounted_price | money }}/pack</td>
            <td class="price-row-item">5% Off</td>
            </tr>
            <tr>
            <td class="price-row-item">Buy 3</td>
            {% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.90 | round: 2 %}
            <td class="price-row-item">{{ discounted_price | money }}/pack</td>
            <td class="price-row-item">10% Off</td>
            </tr>
          <tr>
            <td class="price-row-item">Buy 5</td>
            {% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.85 | round: 2 %}
            <td class="price-row-item">{{ discounted_price | money }}/pack</td>
            <td class="price-row-item">15% Off</td>
            </tr>
          <tr>
            <td class="price-row-item">Buy 10</td>
            {% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.80 | round: 2 %}
            <td class="price-row-item">{{ discounted_price | money }}/pack</td>
            <td class="price-row-item">20% Off</td>
            </tr>
           <tr>
            <td class="price-row-item">Buy 25</td>
            {% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.75 | round: 2 %}
            <td class="price-row-item">{{ discounted_price | money }}/pack</td>
            <td class="price-row-item">25% Off</td>
            </tr>
             <tr>
            <td class="price-row-item">Buy 50</td>
            {% assign discounted_price = product.selected_or_first_available_variant.price | times: 0.70 | round: 2 %}
            <td class="price-row-item">{{ discounted_price | money }}/pack</td>
            <td class="price-row-item">30% Off</td>
            </tr>
        </tbody>
    </table>
</div>
</div>
2

You need to use javascript and define a custom on variant change function which will run every time when a variant is changed.

Some themes already give you that function which will run every time when variant is changed.

3

Could you help me with that? I use the Dawn theme. I have been struggling with this task for several days and without success.

4

Yes sure.

I will gladly help you to resolve this issue. Just let me know if you can give me collaborator access to your store so that I can analyse theme files and code and fix the problem.