Top 2 Ways to Add Product Tabs In PrestaShop

PrestaShop is among the leading ecommerce platforms contributing over 9% of the world’s total ecommerce websites. With so much to offer, merchants love this shopping cart due to its truck load of user friendly features, up to date designs and themes, secure payment gateways and customization options. Its regularly updated and offers cool templates along with a sturdy support to its users. It also has a great library of modules such as Geo-IP store locator, Advance testimonials, Pretty URLs and PrestaShop Home Tabs etc.

With everything so nicely in place, there are a few set back that we have heard regarding Prestashop’s standard classic them in the version 1.7. Apparently, the tabs appear in the right hand side that shrinks the available space preventing more tables to be displayed. It not only disables usable space that can be used to display important information regarding the product such as product Description, Specification, User Manual and Comments etc. In this article we will demonstrate how you can add tabs in full width for your products through Code and Third Party Extensions such as PrestaShop Product Tabs.

Through Code

The first step is to make the section tabs in full width block. Keeping things in order, we will have to alter the them file that located in the theme directory /themes/classic/templates/catalog/product.tpl. Once you locate the file, open it to make the necessary changes by finding the code function responsible for the appearance of the tabs in the product page. The code can be seen in line 163 also show below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

class=”tabs”>

class= “tab-content”>

class= “tab-pane fade in active”id = “description”>

{block name=’product_description’}

class=”product-description”>{$product.descriptionnofilter}

{/block}

</div>

{block name=’product_details’}

{includefile=’catalog/_partials/product-details.tpl’}

{/block}

</div>

</div>

The next step is copying the code (ctrl+c) function and erasing it from the current position. The code that adds two blocks to your PrestaShop store can be found once you scroll slightly down product.tpl file edit window.

1

2

3

4

5

6

7

8

9

10

11

{block name=’product_extra_right’}

class=”product-extra-right”>

{hook h=’displayRightColumnProduct’}

{/block}

{block name=’product_extra_left’}

class=”product-extra-left”>

{hook h=’displayLeftColumnProduct’}

{/block}

Now before this code can be introduced, paste the code you copied to the clipboard earlier that functions for block with tabs. Once you have done that, save the settings and full width tabs block will appear on the product page. You might have though getting caught up in a hassle but this is as easy as I have show, so don’t be reluctant and add full width tabs for better display and information.

Through Module

The other method I mentioned earlier is rather a simple retreat to the software world. It requires the least effort and gives customized results with full personalization to the theme. PrestaShop Product Tabs not only helps your pages look more informative and interactive, but also makes them engaging to visitors, increasing your conversion rate. This module also allows you to add links, images and videos with customized content through WYSIWYG Editor. It a highly functional application that can help nudge up your store leads without any considerable effort.

Conclusion

Being a developer myself, I have used the code as well as the extension to add tabs for several stores. Both methods are equally satisfying and beneficial for the specific needs of the merchant. By adding the code or downloading the extension, you can get a better appearance for your store with the benefit to engage and convert the customer.