In this post we are going to see how to add new tabs on the product page, using Prestashop. Prestashop, by default, does not include this functionality. Therefore, we will have to add this functionality through a module.
1.- Options to add a new tab in the Prestashop product file
Since Prestashop does not include by default the option to add new custom tabs in the product file, we must resort to a module.
Here we have several options:
a.- Free module: There is some free Prestashop product customization module for free are available, but Classy Product Extra Tab is the best module for Prestashop customizes product page.
Download: Prestashop Customize Product Page Module for Free
b.- Payment module: you also have the option to buy a payment module. In this URL you have modules of this type. Although analyze well before buying, since there are some with similar functionalities to this one that we are describing
c.- Template that includes a module: another option would be to use a template for Prestashop that already includes this functionality. Several templates of a certain level already include options of this type. As with the Warehouse template, my favorite template for Prestashop, which already includes the IqitAdditionalTabs module that implements the functionality of being able to add custom tabs on the product tab.
2.- Iqit Additional Tabs module of the Warehouse template to add new Tabs in Prestashop
In this post, we are going to focus precisely on the Iqit Additional Tabs module, which includes the Warehouse template by default. With this module, we have the possibility to add specific and personalized tabs in each product or add a general tab in all the products, in one go.
Adding a general tab that is displayed on all products only makes sense if it is a common feature for all products. As it could be, for example, a “Returns Policy” tab.
We are going to see each of these options in different sections.
2.1.- Position of the tabs
Before seeing the options to add a general or specific tab on a product page, let’s see the position of that tab. The module that includes the Warehouse template will allow the tabs that we add to be displayed in the usual area of tabs for more information or in the upper part, under the “add to cart button” like an accordion.
To establish one or the other option, we must go to the Prestashop module management and configure the “I quit Additional Tabs” module. For this, we will go to: “CUSTOMIZE> Modules> Module Manager”
In the “Settings” section we have a selector called “Hook” in which we can set two different options:
a.- With other tabs: if we choose this option, all the tabs that we add, whether general or specific, will be shown together with the rest of the usual tabs of the product sheet in Prestashop.
b.- As accordion below: if we set this option, the tabs that we are adding will be displayed under the add to cart block, like an accordion.
Once the selector is established, we must click on “Save”
2.2.- Add one or more custom tabs to a product in Prestashop
To add one or more specific and personalized tabs in a certain Prestashop product, what we will do first is edit that product. Once on the product edition page, we will go to the tab: “Modules”. There, we will find several modules. We will click on the configure button of the module: «IQITADDITIONALTABS – Custom product tabs»
In the following interface we will see the following elements that will help us to create a custom tab on the product sheet with Prestashop:
a.- Hidden Visible: with this selector, we will select whether or not we want to show this tab that we are creating (Hidden is to hide)
b.- Title: here we will put the title of the tab that we are creating.
c.- Content: here we will put the content that will be displayed when this tab that we are adding to Prestashop is selected.
d.- Add new: We will click on this button to add the tab to the product sheet.
Then we will click on the Prestashop “Save” button, to save all the changes on the product page.
2.2.1.- Options after adding a tab to the product page with Prestashop
Once we have added the tab to Prestashop, we will see that it is already shown in the administration in the section: “Tab list” and we can carry out the following actions.
a.- View the product sheet: to see how our tab has been, we will click on the button: “Preview”
b.- Add another tab: If we want to add another custom tab, we will simply have to add the fields: “title” and “content” and click on “Add new”
c.- Edit the added tab: if we want to modify the added tab, we will click on “Modify” on the tab in question, within the “Tab list” section
d.- Delete the tab: if we want to delete the tab, we will click “Delete” in the corresponding tab, under the “Tab List” section.
e.- Change position: if we have several tabs, we can change their position by placing the mouse on the tab to be moved, clicking the left button, and dragging.
2.3.- Add a general tab to all Prestashop products
To add a general tab to all products with the same content, we must go to the Prestashop module management and configure the “Iqit Additional Tabs” module. For this, we will go to: “CUSTOMIZE> Modules> Module Manager”. Next, we will look for the module “IQITADDITIONALTABS – Custom product tabs” and we will click on the “Configure” button.
To add a new tab and content to all products, we will click on the icon in the form of a “+” sign located on the right side of the “Tab list” block.
Once this is done, we will fill in the following fields:
a.- Enabled: we will set this selector to “YES” so that the tab we are creating is active and therefore, it is displayed in the store.
b.- Title: here we can the title of the tab.
c.- Description: here we will establish the content of the tab or tab.
d.- Save: we will click on the “save” button to save the tab
2.3.1.- Options after adding a general tab in Prestashop for all products
After adding a general tab to all the products, we will see that it is reflected in the administration, under the “Tabs list” section.
From here we can perform several actions:
a.- View tab: to see how the new tab has been, we will simply have to access the public part of our store and see a product.
b.- Add another tab: if we want to add a new general tab, we will click on the icon with a “+” sign again.
d.- Deactivate: we can deactivate the tab by clicking on the button: “Enabled”
e.- Modify: we can modify the content and title of the tab, by clicking on the button: “Modify”
f.- Delete: if what we want to do is delete the tab, we will click on the “Delete” button
g.- Change position: if we have several tabs, we can change their position by placing the mouse on the tab to be moved, clicking the left button, and dragging.
Read More: