Jump to content
alphaZ

How to Display Old Price in Product Listing

Recommended Posts

Hi all. This is my first contribution for a simple modification on how to display old price in your product listing page especially for those who have set Reduction amount or percentage % in your prices via BO admin. I'm very new to Prestashop and php coding so if anyone have a better solution please contribute. It works for me so I thought why not share it with everyone. But remember to back up in case anything screws up lol.

Go to themes/yourtheme/product-list.tpl and find around line 16

 
{l s='Price lowered!'}
{/if}    



replace with

{l s='Price lowered!'}
{/if}
{convertPrice price=$product.price_without_reduction}



To display a strike through kind of style I have added a simple CSS class called "old_price" in globals.css. Go to around line 1576 and find this code

ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}



replace with

ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}
ul#product_list li .old_price{
   font-size:1.0em;
   text-decoration:line-through;
}



Well that's it!

The text-decoration:line-through is where you will get the strike through effect. You can omit this if you prefer plain text or modify which ever style or size and color you like.

Hope this will help someone. Cheers!

11847_rAKrlCJFgJbfMYyetXaX_t

Share this post


Link to post
Share on other sites
Hi all. This is my first contribution for a simple modification on how to display old price in your product listing page especially for those who have set Reduction amount or percentage % in your prices via BO admin. I'm very new to Prestashop and php coding so if anyone have a better solution please contribute. It works for me so I thought why not share it with everyone. But remember to back up in case anything screws up lol.

Go to themes/yourtheme/product-list.tpl and find around line 16

 
{l s='Price lowered!'}
{/if}    



replace with

{l s='Price lowered!'}
{/if}
{convertPrice price=$product.price_without_reduction}



To display a strike through kind of style I have added a simple CSS class called "old_price" in globals.css. Go to around line 1576 and find this code

ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}



replace with

ul#product_list li .price{
   display: block;
   font-size: 1.5em;
   margin-bottom: 0.2em;
}
ul#product_list li .old_price{
   font-size:1.0em;
   text-decoration:line-through;
}



Well that's it!

The text-decoration:line-through is where you will get the strike through effect. You can omit this if you prefer plain text or modify which ever style or size and color you like.

Hope this will help someone. Cheers!


Hi,
It good, but price with line-through the same price+Tax
Example.
Unit price $ 124 Tax-
Tax+ 10% = $ 136.4
Final retail price: $ 136.40
Product list display $ 136.4 with line-through
pre-tax retail price $ 124

I think this display is price + Tax before discount

if discount 5%= $ 6.82

Product list display $ 136.4 with line-through
pre-tax retail price $ 117.80

anyway, thanks for your share i like it. maybe, I add label PRICE Tax inclu.
waiting for your fix this code

Thanks again,

P.S sorry for my English.

Share this post


Link to post
Share on other sites

Hi. Yes I forgot to mention this. Actually I do not charge tax for my store and the old price displayed is price inclusive of tax. Thanks for pointing this out. Yes the code does needs further tuning. I'm still learning and waiting to for any gurus help to expand this code while I continue to do some more hacking. Cheers.

Share this post


Link to post
Share on other sites

Hi all. Attached here are screen shots of my BO admin settings. It is a simple setting because I do not charge any taxes due to selling locally. The small strike-through price shown at the product listing page is the original price or Pre-tax retail price from admin and the price in red the Final retail price. As you can see from both screen shots the required settings could be either Reduction amount or percentage. I understand that the final price won't show up if you include taxes i.e VAT and I think this code needs more hacking.

Admin:
Pre-tax retail price: $xx
Tax: No tax
Retail price with tax: $xx
Reduction amount OR percentage: $xx or xx%
Final retail price: $xx

Product listing:
Pre-tax retail price which is the strike-through
Final retail price which is the red bold

11848_PKwZghi25nApU3PRVIhB_t

11849_6pYiUpWVgO30BLyhQAKn_t

Share this post


Link to post
Share on other sites

Ah! That's really great alphaZ

I have a little suggestion and a little question

Suggestion:
Instead of replacing with:

{l s='Price lowered!'}
{/if}
{convertPrice price=$product.price_without_reduction}

replace with:
{l s='Price lowered!'}
{/if}
{if $product.on_sale}
{convertPrice price=$product.price_without_reduction}
{/if}

because otherwise it will show the striped through 'old' price as well with non-sale items.

My question is:
Could this be done within the 'home featured' block as well? Which file to change?

Take care,
ibo

Share this post


Link to post
Share on other sites

I use 1.3.2 version but it's not work :( i put codel like in examples.

Share this post


Link to post
Share on other sites

Thank you for this useful tips, its absolutely works on 1.3.3
I have the same question, how to put this code on to 'home featured' block?

Share this post


Link to post
Share on other sites

Well, i just found how to display this code on 'Home Featured' block.

Find this code on homefeatured.tpl:

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}


and change to

{if $product.on_sale}
{l s='On sale!'}
               {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product.reduction_from))}
{convertPrice price=$product.price_without_reduction} 
               {/if}<!-- end old price -->

{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}



Then add to global.css new rule for .old_price_home like style above.

But in this case you also need to change css for home featured block.

Share this post


Link to post
Share on other sites

When i tried the script it also showed the old price for products that wasnt lowered.

So it showed 799 and 799. It should only show two prices if there was an old price.

Share this post


Link to post
Share on other sites

What would be tho code foe the latest version of presta 1.4.4.1. Because there is no "price lowered" line in products_list.tpl ?

Share this post


Link to post
Share on other sites

In 1.4.7.0 search this (in product-list.tpl)

 

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}

 

and add right after this

 

</span><span class="old_price">
{convertPrice price=$product.price_without_reduction}</span>{/if}

 

So it would look like:

 

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span><span class="old_price">
{convertPrice price=$product.price_without_reduction}</span>{/if}

 

 

Then locate the file: theme/css/product-list.css and add this

 

ul#product_list li .old_price{
   font-size:1.0em;
   text-decoration:line-through;
}

 

 

Works to me in PS 1.4.7.0

 

Sorry for my bad english... Google translator is to blame! :D

  • Like 3

Share this post


Link to post
Share on other sites

Thank you. Worked Greatly in prestashop 1.5.3.1

 

In 1.4.7.0 search this (in product-list.tpl)

 

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}

 

and add right after this

 

</span><span class="old_price">
{convertPrice price=$product.price_without_reduction}</span>{/if}

 

So it would look like:

 

{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span><span class="old_price">
{convertPrice price=$product.price_without_reduction}</span>{/if}

 

 

Then locate the file: theme/css/product-list.css and add this

 

ul#product_list li .old_price{
font-size:1.0em;
text-decoration:line-through;
}

 

 

Works to me in PS 1.4.7.0

 

Sorry for my bad english... Google translator is to blame! :D

Share this post


Link to post
Share on other sites

i used to be able to reduce price frm specific price option but now i cant...i'm using prestashop 1.5.3.1 and i have problems with specific price. when i set specific price a product, the price doesnt change. it used to be ok, now it failed to change the price based on my setting. please help. Ive been trying to solve this problem since months ago.. and now i 'm stuck. i cant run promotion due to that problem.. pls help. tq

Share this post


Link to post
Share on other sites

Go to themes/yourtheme/product-list.tpl and find around line 16

 

<span class="discount">{l s='Price lowered!'}</span>{/if}

replace with

 

<span class="discount">{l s='Price lowered!'}</span>{/if}<span class="old_price">{convertPrice price=$product.price_without_reduction}</span>

To display a strike through kind of style I have added a simple CSS class called "old_price" in globals.css. Go to around line 1576 and find this code

 

ul#product_list li .price{    display: block;    font-size: 1.5em;    margin-bottom: 0.2em;}

replace with

 

ul#product_list li .price{    display: block;    font-size: 1.5em;    margin-bottom: 0.2em;}ul#product_list li .old_price{    font-size:1.0em;    text-decoration:line-through;}

 

+

 

Suggestion:

Instead of replacing with:

Quote

{l s='Price lowered!'}

{/if}

{convertPrice price=$product.price_without_reduction}

 

replace with:

Quote

{l s='Price lowered!'}

{/if}

{if $product.on_sale}

{convertPrice price=$product.price_without_reduction}

{/if}

 

because otherwise it will show the striped through 'old' price as well with non-sale items.

 

 +

 

 

Well, i just found how to display this code on 'Home Featured' block.

 

Find this code on homefeatured.tpl:

<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>
and change to

<p class="price_container">{if $product.on_sale}                    <span class="on_sale">{l s='On sale!'}</span>                {elseif ($product.reduction_price != 0 || $product.reduction_percent != 0) && ($product.reduction_from == $product.reduction_to OR ($smarty.now|date_format:'%Y-%m-%d %H:%M:%S' <= $product.reduction_to && $smarty.now|date_format:'%Y-%m-%d %H:%M:%S' >= $product.reduction_from))}                    <span class="old_price_home">{convertPrice price=$product.price_without_reduction}</span>                 {/if}</p><!-- end old price -->                        <p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>

 

 

This combination works great on PS 1.5.6.2! Thanks a lot!

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More