How to display FREE instead of $0.00 for product prices on PrestaShop

blog_post_img_free

In this post we will change how PrestaShop displays prices for free products without making any overrides or core changes to PrestaShop.
It is a more user friendly approach to display free instead of 0, ideal specially for free virtual products but it also works for any type of free product which you sell.
PrestaShop already displays a Free text instead of currency for Products sent as gift. This can be easily done by adding some test conditions to price variables but first we need to identify all the places where PrestaShop displays prices and the corresponding file for the particular location.

  • Home and Category pages – /root/themes/default-bootstrap/product-list.tpl
  • Product page – /root/themes/default-bootstrap/product.tpl
  • Cart – /root/themes/default-bootstrap/modules/blockcart/blockcart.tpl
  • Checkout page – /root/themes/default-bootstrap/shopping-cart.tpl, /root/themes/default-bootstrap/shopping-cart-product-line.tpl

These are the most important locations for prices, also there may be modules such as best sellers and such that display product prices but just in case I skipped to mention a location please leave a comment and I will update the article further.

A quick tip to debug variables:

  • smarty .tpl files: {$variable|d} – will dump the variable contents in the browser page
  • javascript .js files: console.log(variable) – will dump the variable content in the browser’s developer console

 

 So grab a cup of tea or coffee and let’s begin.

 

Home and Category pages

 Category Before
Category After

Home page and category page go together because we only need to modify one file however there is a bit more code involved here, we need to change the price for the normal product view or mouse out and for mouse-hover state too.

Open /root/themes/default-bootstrap/product.tpl and:

For product mouse-hover state edit lines 66 – 99:

Change them into:

The highlighted lines in the code above are the if conditionals needed. Simply replace the code or if you are using a custom theme add it in the corresponding location.

For normal product view or mouse out edit lines 125-147:

Change into:

Highlighted lines are newly added.

 

Product Page

Product Before
Product After

Open /root/themes/default-bootstrap/product.tpl and edit lines 263-270:

Highlighted in the above code is $productPrice variable which contains the output for the product price. If we do {$productPrice|d} we can dump the output in the browser to make sure it is the correct variable.

Change the above code into:

In the above code we used an if conditional statement to check if the product price is 0 and if it is display a text instead of currency.

We must also change the way it displays prices for products which have combinations with different products.

To do this edit /root/themes/default-bootstrap/js/product.js and change line 756:

Into:

We check whether the combination is 0 and if it is display a text on change event.

 

Cart

Cart Before
Cart After

Open /root/themes/default-bootstrap/modules/blockcart/blockcart.tpl and edit lines 73-82 to change product price

Change into:

To change total price edit lines 182-185:

Change into:

Highlighted lines are newly added.

 

Checkout page
Checkout Before

Checkout After

Open /root/themes/default-bootstrap/shopping-cart.tpl and

For “Total Products (tax incl.)” edit lines 187:

Change into:

 

For “Total” edit lines 310-318:

Change into:

Highlighted lines are newly added.

 

Products in cart summary edit /root/themes/default-bootstrap/shopping-cart-product-line.tpl and

For “Unit price” edit lines 44-48:

Change into:

Highlighted lines are newly added.

 

For “Total” edit lines 124-136:

Change it into:

Highlighted lines are newly added.

 

That’s it for now. Let me know if you find other areas of PrestaShop which need to be changed or modules or options which might affect the prices and I will update the article.

  • Ferenc Kecskés

    Hello,
    I have a prestashop 1.6.1.7, but the .tpl files are different…
    I can use this tut in our site …

    https://presta.ital-accessori.sk/

    Can someone help me?

    Thanks

    Franto

    Example this is in product.tpl file:
    {*
    * 2007-2016 PrestaShop
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Academic Free License (AFL 3.0)
    * that is bundled with this package in the file LICENSE.txt.
    * It is also available through the world-wide-web at this URL:
    * http://opensource.org/licenses/afl-3.0.php
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to license@prestashop.com so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
    * versions in the future. If you wish to customize PrestaShop for your
    * needs please refer to http://www.prestashop.com for more information.
    *
    * @author PrestaShop SA
    * @copyright 2007-2016 PrestaShop SA
    * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
    * International Registered Trademark & Property of PrestaShop SA
    *}
    {include file=”$tpl_dir./errors.tpl”}
    {if $errors|@count == 0}
    {if !isset($priceDisplayPrecision)}
    {assign var=’priceDisplayPrecision’ value=2}
    {/if}
    {if !$priceDisplay || $priceDisplay == 2}
    {assign var=’productPrice’ value=$product->getPrice(true, $smarty.const.NULL, 6)}
    {assign var=’productPriceWithoutReduction’ value=$product->getPriceWithoutReduct(false, $smarty.const.NULL)}
    {elseif $priceDisplay == 1}
    {assign var=’productPrice’ value=$product->getPrice(false, $smarty.const.NULL, 6)}
    {assign var=’productPriceWithoutReduction’ value=$product->getPriceWithoutReduct(true, $smarty.const.NULL)}
    {/if}

    getProductLink($product)}”>

    {if !$content_only}

    {/if}
    {if isset($adminActionDisplay) && $adminActionDisplay}

    {l s=’This product is not visible to your customers.’}
    id}” />

    {l s=’Publish’}


    {l s=’Back’}

    {/if}
    {if isset($confirmation) && $confirmation}

    {$confirmation}

    {/if}

    {if $product->new}

    {l s=’New’}

  • Gabriel Herrera

    Super duper informative! Thank you for developing and posting this. Solved one of my key problems. Thanks again!

Subscribe!