PrestaShop Tips and Tutorial – Creating a Tab on the Frontend Product Page in Prestashop

PrestaShop Tips and Tutorial – Creating a Tab on the Frontend Product Page in Prestashop

We will develop the module that creates a new tab on the Frontend product page. If everything is done correctly, a new tab will appear on the product page.


All modules use the same basic structure, provided by Prestashop developers. The extension must consist of the following files:

  1. module_name.php – the main file that contains module class with all necessary methods (installation, module removal, etc.) and configuration
  2. index.php – if the module has a separate page on the frontend, it is better to use this file; if the module has no frontend, you need to set redirections to the home page in this file (for store security)
  3. logo.gif – module logo

Besides above-mentioned files, our module will have two more template files:

  1. productTab.tpl – this template will contain the HTML-code of a new tab button
  2. productTabContent.tpl – the HTML-code template of new tab content

So, let’s start working on the module ProductTab.

First, we create the folder named “producttab” with the following files:

  • producttab.php
  • config.xml
  • index.php
  • logo.gif

We will create one more “tpl” folder.  In here we’ll put productTab.tpl and productTabContent.tpl files.

The final module structure is:

  • tpl / productTabContent.tpl
  • tpl / productTab.tpl
  • tpl / index.php – stub file, it can be left blank
  • producttab.php
  • index.php
  • logo.gif

Follow the next steps closely

Set the redirection to the main store page in index.php file:

Program the main producttab.php file:

Make up the tab button template of the productTab.tpl:

Make up the template of the productTabContent.tpl content

{*call script that sends producttab.php content to this template :*} {$contant}

The module producttab is created.

Compress the producttab folder to *.zip archive. Go to the back office and upload the to the Modules tab. Then open Front Office Features tab and install the module by clicking on the Install button.

Best andCheap PrestaShop Hosting Recommendation

To help you find the best Windows hosting provider that fully support PrestaShop, we will give you our recommendation. After we had reviewed 50+ providers, we found that ASPHostPortal is one of the best. They have expert PrestaShop support who always ready to help your problem, although with 99.99% uptime we think you won’t get any problem.

[stextbox id=”asp_net_hosting” caption=” is Microsoft No #1 Recommended Windows Hosting Partner”] is Microsoft No #1 Recommended Windows and ASP.NET Spotlight Hosting Partner in United States. Microsoft presents this award to for the ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2012, .NET 4.5.2/ASP.NET 4.5.1, ASP.NET MVC 6.0/5.2, Silverlight 5 and Visual Studio Lightswitch. Click here for more information[/stextbox]

PrestaShop Tips and Tutorial – Creating a Tab on the Frontend Product Page in Prestashop
Rate this post

Anjali Punjab

Anjali Punjab is a freelance writer, blogger, and ghostwriter who develops high-quality content for businesses. She is also a HubSpot Inbound Marketing Certified and Google Analytics Qualified Professional.