[FAQ] How to display the full product title on PrestaShop 1.7 and 1.6

Photo by Charles Deluvio on Unsplash

You can apply the concept on any version of PrestaShop, here I will address only the last two, namely version 1.7 and version 1.7 of PrestaShop.

Thanks to this trick you will be able to display the title of your products in its entirety, but you can also modulate the length of this title if you wish.

PrestaShop uses the Smarty template engine to display data on the front end of your store, here we will intervene on the TRUNCATE function of Smarty which allows to display only a limited number of characters.

If you want to go further with the Truncate function of Smarty, you can refer to the official Smarty documentation.

PrestaShop 1.7

Access your template files using your favorite FTP client and open the file themes > your_theme > templates > catalog > _partials > minitures > product.tpl.

Go to line 44 to find the following code:

  {block name='product_name'}
    {if $page.page_name == 'index'}
    	<h3 class="h3 product-title" itemprop="name"><a href="{$product.canonical_url}">{$product.name|truncate:30:'...'}</a></h3>
    {else}
    	<h2 class="h3 product-title" itemprop="name"><a href="{$product.canonical_url}">{$product.name|truncate:30:'...'}</a></h2>
    {/if}
  {/block}

Of course, the line number is there as an indication, your template can have this code on another line than the one indicated.

The important thing is to locate the title to which the Truncate function is applied.

here it happens on  

{$product.name|truncate:30:'...'}

Thus, to display the title of your product in its entirety, you just have to retry the truncate function and obtain this code:

{$product.name}

This will give you in the end, this:

{block name='product_name'}
  {if $page.page_name == 'index'}
  	<h3 class="h3 product-title" itemprop="name"><a href="{$product.canonical_url}">{$product.name}</a></h3>
  {else}
  	<h2 class="h3 product-title" itemprop="name"><a href="{$product.canonical_url}">{$product.name}</a></h2>
  {/if}
 {/block}

PrestaShop 1.6

 I'm not going to repeat everything as for version 1.7, so I invite you to read the paragraph above and apply it on the code present in the file themes > your_theme > product-list.tpl

 On line 114 of the file you will find the following code:

<h5>
  {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
  <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
  {$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
  </a>
 </h5>

unlike 1.7, we have to keep an escape function for the characters and so we will work on the title :

{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}

 Which we will replace with :

{$product.name|escape:'html':'UTF-8'}

Conclusion

The implementation of this trick is very simple, but don't forget to refer to the official Smarty documentation to understand the use of this Truncate function, as you may find a better configuration for your use.

If after your modifications, you don't see any change, don't forget to clear the PrestaShop cache in the Performance menu and all the caches of your browser.

On some templates, this simple change may cause side effects with the title going over several lines, so perform your tests on a development version before messing up your store.

Comments