How to display the sale price first and the strike-through price (original price) afterward?

[ROEDADK]

Hey there, 

How to display the sale price first and the strike-through price (original price) afterward on Shopify product page, my theme is dawn.

Link to the page: Ayatul-Kursi Bracelet Cuff – ClassyCuff

screenshot for context:

[Vinsinfo]

Please follow below steps to display sale price first and strike through price after. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "price.liquid" and search "<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> ". Select this code and below code as shown in below "Before" screenshot and paste the codes above next to the line "<div class="price__sale">" as shown in "After" screenshot.

Before:

After:

4. Save the file.

Now, the sale price will appear first and strike through price will appear next.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[luvfundersts]

Hello, I made code changes. What to do after that? Where should I edit my pricing to reflect changes on my store

[Vinsinfo]

@ROEDADK 

Please follow below steps to display sale price first and strike through price after. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "price.liquid" and search "<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> ". Select this code and below code as shown in below "Before" screenshot and paste the codes above next to the line "<div class="price__sale">" as shown in "After" screenshot.

Before:

After:

4. Save the file.

Now, the sale price will appear first and strike through price will appear next.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[devcoders]

Hi @ROEDADK 

Admin, go to online store > themes > actions > edit code.
Asset > base.css and paste this at the bottom of the file.

.price--on-sale .price__sale {
    display: flex;
    align-items: baseline;
}
.price--on-sale .price__sale span {
    order: 2;
}
span.price-item.price-item--sale.price-item--last {
    order: 0;
}

[Vinsinfo]

@ROEDADK Please follow below steps to display sale price first and strike through price after. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "price.liquid" and search "<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> ". Select this code and below code as shown in below "Before" screenshot and paste the codes above next to the line "<div class="price__sale">" as shown in "After" screenshot.

Before:

After:

4. Save the file.

Now, the sale price will appear first and strike through price will appear next.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[ROEDADK]

Hi there, I tried it but it didnt work

[devcoders]

Hi @ROEDADK 

Admin, go to online store > themes > actions > edit code.
Asset > base.css and paste this at the bottom of the file.

.price--on-sale .price__sale {
    display: flex!important;
    align-items: baseline;
}
.price--on-sale .price__sale span {
    order: 2;
}
span.price-item.price-item--sale.price-item--last {
    order: 0;
}