Change 'on sale' badge text to percentage discount

[GeorgeRizos]

I would like to show a xx% off badge that's correct on every product. 

At the moment I thought entered this text.

 

website url: https://thesnoozy.com/

Dawn theme

[GeorgeRizos]

@Softtech 

So instead of saying £25 Off. I would like for it to say X% Off. So on every product the percentage discount is relevant to the price of the product. 

Not all of my products have the same amount discount

[GeorgeRizos]

I mean, I built the store that im showing you now. Is that experience?

[Dan-From-Ryviu]

Hi @GeorgeRizos 

Please go to your Online store > Theme > Edit code > card-product.liquid file, find this line of code 

{{- 'products.product.on_sale' | t -}}

Replace this code below this  

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
Save {{ percent }}%

[GeorgeRizos]

Hi there @Dan-From-Ryviu ! 

Thanks for the reply. When I go to that folder. this code: {{- 'products.product.on_sale' | t -}}

is shown twice in the file.

Do I replace it on both?

[Dan-From-Ryviu]

You can try replace code one by one to check

[GeorgeRizos]

Hi @Dan-From-Ryviu ! It works on the product list page. But when I click on a specific product and go to the product page it turns back to the before badge

[Dan-From-Ryviu]

Hi, please replace the same code in price.liquid file for product page 

[GeorgeRizos]

hi @Dan-From-Ryviu , it does give a percentage but no number

[Dan-From-Ryviu]

Do you want to it appear bot % off and number amount discount off? 

[ADT2]

Thanks! This works well on the images of collection pages, but how can I do the same on the product page? I mean, the sales badge that appear on the right of the product price.

[Dan-From-Ryviu]

Please use this code in price.liquid file, find this code 

{{ 'products.product.on_sale' | t }}

Replace it with this code

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
Save {{ percent }}%

[ADT2]

Excellent!!! What would be the code if we just want to add the amount saved (not percentage). Thanks again!

[ADT2]

Hey Dan, please let me know 🙂 

[Dan-From-Ryviu]

Please use this code 

      {%- assign percent = product.compare_at_price | minus:product.price -%}
      Save {{ percent | money_with_currency }}   

[manan123]

Hey can you please help me

I'm using dawn theme for my store but when i chose another variant on product page the buy now button gets disappeared please help me to solve this ....

my website url is --- https://mansaroverfurnishings.com/

[Dan-From-Ryviu]

Hi, please use this code instead of 

{%- assign percent = compare_at_price | minus:price | times: 100 | divided_by:compare_at_price | round -%}
Save {{ percent }}%

[ADT2]

Excellent great job!!

[ragazzo-c]

Hey!

In my case it worked but I have different % of discounts for different sizes, and the % showed is always the same, it doesn't adjust according to the size I select. Any way to fix this?

Thanks a lot!

[Dan-From-Ryviu]

Hi @ragazzo-c 

Please use this code so it will update the save percent when you change the size.

{%- assign percent = compare_at_price | minus:price | times: 100 | divided_by:compare_at_price | round -%}
Save {{ percent }}%

[ragazzo-c]

It worked perfectly, thanks a lot @Dan-From-Ryviu!

[Dan-From-Ryviu]

You are very welcome!

[pcebo]

I have a very similar issue where my products have variants, and often the variants have different prices and this the discount % will often be different. However when I use the suggested code above the % discount is not updated when I select a new variant. Any other suggestions? 

[Dan-From-Ryviu]

Hi @pcebo 

Did you use this code?

{%- assign percent = compare_at_price | minus:price | times: 100 | divided_by:compare_at_price | round -%}
Save {{ percent }}%

[pcebo]

@Dan-From-Ryviu I did. 

The calculated percentage off updates when I refresh the page, but not when I select a new variant. It always displays the percentage off from the last time the page loaded or was refreshed. 

[Dan-From-Ryviu]

What theme are you using? Could you share your product page link so I can check?

[pcebo]

@Dan-From-Ryviu here is a link to a preview of the Theme: https://jm011w8lb7b478io-40032075934.shopifypreview.com

One of the best products to see this on are some rotors for example, you can search for RT66 or RT56.

I'm using the Venture theme.

I've modified your code a bit so adding "product." otherwise it was not picking up the values to calculate the %

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
Save {{ percent }}%

[Dan-From-Ryviu]

Could you take screenshots of your price.liquid file? 

[pcebo]

@Dan-From-Ryviu 

Here is the file in it's entirety:

[Dan-From-Ryviu]

Can I send collab to request your theme so I can check? 

[pcebo]

Yeah, of course. What do you need to send the collab request? 

[Dan-From-Ryviu]

I need your Collaborator request code in your store admin > Settings > Users and permission

[pcebo]

Ok, just sent it in a private message. 

[MilanVL]

Hey Man,

Can you help me with fix this? So the ,00 will not show anymore. Thanks man! 

[Dan-From-Ryviu]

Hi @MilanVL 

Can I know what code did you use so I can hep you?