different display- compared at price

Hi @ilyeszoltan

Could you explain more what you would like to achieve to I can help you?

Thanks in advance
Katrine

Hi @plaktheme 

I'd like that the "compare at price" to look different, not to be dashed. I'd like to replace it with new ones (PRP - COMPARE AT PRICE WHERE PRP MEANS PRICE RECOMENDED BY PRODUCER) 

These are the now on my website (first image is from collection and the second one is from product page)

and i'd like new ones like these (first image is from collection and the second one is from product page)

and there is a info button, and if it is pressed to open a description  tab, like this

Thank you

Posted by: @ilyeszoltan

Hi @plaktheme 

I'd like that the "compare at price" to look different, not to be dashed. I'd like to replace it with new ones (PRP - COMPARE AT PRICE WHERE PRP MEANS PRICE RECOMENDED BY PRODUCER) 

These are the now on my website (first image is from collection and the second one is from product page)

and i'd like new ones like these (first image is from collection and the second one is from product page)

and there is a info button, and if it is pressed to open a description  tab, like this

Thank you

Thanks for the explanation and the screenshots.

here are the steps to follow in order to remove the crossed line and add the text (PRP)

• From your Shopify admin, click Online store > Actions > Edit code
• Open the files homepage.css & theme.css
• Search price--on-sale .price-item--regular and remove this line

text-decoration: line-through;

• Click Save
• Open the file product-price.liquid
• Just under this code

{% if compare_at_price > price %}

• Insert this one

<span class=" price-item price-item--regular">
PRP
</span>

• Click Save

Let me know if it worked for you

Katrine

Hi @plaktheme,

the solution you gave me is working. 

How can iI switch the position of price with compare at price 

(eventually how can i put compare at price under the product price) ?

and how can I make "PRP" clickable ( when pressing PRP to open a little tab with description) like this example

Thank you

Posted by: @ilyeszoltan

Hi @plaktheme,

the solution you gave me is working. 

How can iI switch the position of price with compare at price 

 

(eventually how can i put compare at price under the product price) ?

and how can I make "PRP" clickable ( when pressing PRP to open a little tab with description) like this example

Thank you

  

In order to change the position of the compare at price and the regular price I invite you to follow this :

• From your Shopify admin, click Online store > Actions > Edit code
• Open the file product-price.liquid
• Cut this code

<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="money price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
</dd>
</div>

• Put it before this line

<div class="price__regular">

• Click Save

In order to make the compare at price below the regular price

• On the same file, replace this code line

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

• With this one

<dl style="display:block;" class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

• Click Save

However, adding a tooltip on hover or on click requires more advanced coding for desktop and mobile and this exceeds the scope of our assistance on the forum, I invite you to hire a third party developer for this our hire one of our experts.

Kind regards,
Katrine

Hi @plaktheme 

It is perfect.

Thank you