Adding tabs to the product page

///Adding tabs to the product page

One of the requests we have seen a lot on the forum and through emails is adding tabs to the thirty bees theme product pages. Some users do not like the standard layout of sections and prefer the tabs better. So we decided to write a quick tutorial on how to remove the sections and replace them with tabs.

Getting Started

For this tutorial you are going to have to have a basic understand of how to ftp into your site and edit theme files. Below is the area on the product page we are talking about.

thirty bees sections

The first thing you will want to do is ftp into your site and navigate to the /themes/community-theme-default/ directory. Then you will want to open the product.tpl file.  You want to find line 417 in version 1.0.1 of the theme, that is where it starts. If you are using a different theme version look for this line

You will want to delete down to line 587, it should be the second of two ending if statements out of a group of three.  Then you will want to paste the code below in place of what you just erased.

Next you will need to navigate to the css directory and edit your product.css file. You can simply paste the code below into the bottom of the file.

Save an upload both files and your tabs should be working and looking like the image below.

thirty bees tabs

I have even put a gist together of the two complete files so you can copy the whole files over the ones in your theme to make the tabs work. You can view the gist here. 

Good luck and happy editing.

2017-07-06T13:52:10+00:00

About the Author:

Lesley Paone
Lesley is one of the co-founders of thirty bees. He also is the owner of a PrestaShop support, development, and SEO agency called dh42. He has been active in the ecommerce community for almost a decade providing help and support services.
  • We should discuss HTML5 structure of these tabs. I feel the whole thing should be wrapped within a section with separate articles for each tab.

    • thirty bees

      They are structured in the easiest way to do them and explain it to someone. Having them in a section will make it where the javascript needs to be redone.

      • Is it relying on a class element or the html5 element?

        • thirty bees

          A class.

          • Then shouldn’t harm it? Maybe just have to check SASS/SCSS if it’s selecting an html element for the tabs?

          • thirty bees

            You are welcome to make a gist and share it, just test it for working.

  • Selwyn Orren

    Hi I have applied this tweak and for the most part it works really well. I have the product comments module installed as well and it does not work with the tweak above. After I modified the tabs.tpl file in the productcomments module folder to include the li then it showed it up as a tab, however the content of the reviews shows up in all active tabs.

    Could this tweak be updated to include the product comments module?

    Thanks in advance