How can I make the variant price change on my product page?

[florchmr]

Hi, I want to use an automatic 50% discount on one of my products. I would like this discount to also be displayed on the product page, so I have been working on adding this Liquid code to my template:

<div class="price-edit"> <span class="original-price">{{ product.selected_or_first_available_variant.price | money_with_currency }}</span> <span class="discounted-price"> {{ product.selected_or_first_available_variant.price | times: 0.5 | money_with_currency }}</span> <span class="badge-sale-edit">Sale</span> </div>

Initially, it looks great, but the price does not update when I start selecting other variants. In this product, I have 3 different prices according to the selected variant.

How can I make it so that the price changes according to the variant? I am using the Dawn theme.

[DitalTek]

@florchmr 

Your code currently just applied for first variant, and you want to that discount will apply to all variant when you change options, right?

[florchmr]

Hi! Yes, currently with that code, the original price and the discounted price only apply to the first variant. I want the prices to change as I select other variants.

[DitalTek]

To do that, you can apply that code for show other variants price, but instead of using first variant you need to handle with variant price other.