How to add discount % amount next to price and compare price on product page?

[RAL1017]

Hi,

I have a price which is lower than the compare at price on my product page - which shows the new price in red which is lower than the original price - but i need a badge that says "20% off" (or whatever the calculated discount is). next to it to show the actual discount % to customers.  I don't see an option for this in my theme (Wokee). Does anyone have a workaround or know how to customize this?  

thanks in advance. 

[Artzen_tech]

Hello @RAL1017 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Snippets folder -> price.liquid file

Add this Code below price__sale div.

<div class="custom-price badge color-accent-2">
      {% if product.compare_at_price_max > product.price %}
        Save
        {{-
          product.compare_at_price_max
          | minus: product.price
          | times: 100.0
          | divided_by: product.compare_at_price_max
          | money_without_currency
          | times: 100
          | remove: '.0'
        -}}
        %
      {% endif %}
    </div>

Below is the result of the same code.

Let me know if need further assistance
Regards,
Artzen Technologies

[RAL1017]

Here's the correct image 

[RAL1017]

Hi there,

Thanks for the reply... the location wasn't the same where you mentioned it
(snippets, price.liquid) - instead it was under Snippets >
product_page_1_description.liquid

But i found the code section anyway...

{%- if sale_on -%}
{{
product.selected_or_first_available_variant.price | money }}
{{
product.selected_or_first_available_variant.compare_at_price | money
}}
{%- else -%}
{{
product.selected_or_first_available_variant.price | money }}

{%- endif -%}

And i copied your code below that:

{% if
product.compare_at_price_max > product.price %} Save {{-
product.compare_at_price_max | minus: product.price | times: 100.0 |
divided_by: product.compare_at_price_max | money_without_currency | times:
100 | remove: '.0' -}} % {% endif %}

However, when I did that - i got this:

[image: Screenshot 2023-10-02 at 7.24.39 PM.png]

So looks like the math doesn't work, as well as formatting etc... Needs a
space between "Save" and the discount... and of course the correct discount
%. And also, if I could get the discount to show up

But its close! If you can help me sort out how to do the actual discount
% that would be great!!!!!


thanks!
Ryan

[RAL1017]

I put the correct <div> tags in there as well.. they didn't show up for some reason..

here's the code that I copied yours below:

[RAL1017]

Hi there,

Thanks for the reply... the location wasn't the same where you mentioned it
(snippets, price.liquid) - instead it was under Snippets >
product_page_1_description.liquid

But i found the code section anyway...

{%- if sale_on -%}
{{
product.selected_or_first_available_variant.price | money }}
{{
product.selected_or_first_available_variant.compare_at_price | money
}}
{%- else -%}
{{
product.selected_or_first_available_variant.price | money }}

{%- endif -%}

And i copied your code below that:

{% if
product.compare_at_price_max > product.price %} Save {{-
product.compare_at_price_max | minus: product.price | times: 100.0 |
divided_by: product.compare_at_price_max | money_without_currency | times:
100 | remove: '.0' -}} % {% endif %}

However, when I did that - i got this:

[image: Screenshot 2023-10-02 at 7.24.39 PM.png]

So looks like the math doesn't work, as well as formatting etc... Needs a
space between "Save" and the discount... and of course the correct discount
%. And also, if I could get the discount to show up

But its close! If you can help me sort out how to do the actual discount
% that would be great!!!!!


thanks!
Ryan

[Artzen_tech]

May I see the actual screenshot of how it looks now plus frontend url so that I can guide you more accurately.

You can also try below code.

{% if product.compare_at_price_max > product.price %}
  Save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | times: 100 | remove: '.0' }}%
{% endif %}

[RAL1017]

I sent the screenshot of how the other code looked - scroll above and see, but the first one you sent resulted in this:

The code that you said to try in this recent email resulted in this:

so that didn't work either...

I removed both of those, as this is my live site and i can't have that in there..

here's the URL of the page:  

https://aquatic-dreams.com/products/aquatic-dreams-saltwater-new

thanks, let me know!

[RAL1017]

So the equation for % change is- compare price - current price / compare price x 100..   i think you have extra “times 100” in the code

i dont know what the “max” means on the end of the compare price..    but i noticed the formula above seemed to have that extra x100 in there.   

so 139-109 = 30 / 139  =.2158 x 100 = 21.58 % 

just need the correct code to do that…

thanks let me know please!

[Drazdauskas]

Hey @Artzen_tech

Just jumping on the back of this post - I am looking to do something very similar for my own store. Could you help?

Thanks