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.

2018-08-23T07:58:10+00:00 July 6th, 2017|

About the Author:

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.