Home » Magento tutorials » How to add custom tabs to Magento product page

How to add custom tabs to Magento product page

How to add custom tabs to Magento product page? The product page is one of the most important parts of your store. That’s why so much attention is paid to make this page look perfect. Tabs is a good way to display a lot of data inside a compact block. It helps to avoid huge scroll bars and also looks much nicer on portable devices.

magento custom product tabs

You can find tons of Magento templates with tabs on the product view page and we are going to tell you the easiest way to add them there. All examples are applicable to the default Magento theme, but with practice you can use following methods to customize your own theme.

First, go to your store theme folder and find there the following file app/design/frontend/default/yourtheme/layout/catalog.xml. If the file does not exist, you can always copy it from app/design/frontend/base/default/layout/. Note that your own theme can be located within a different path. In the file catalog.xml, find the section:

After this section, insert the block below:

As you can see the tabs are being added within the built in method ‘addTab‘. In the node, you can select your own block and phtml file which you expect to see inside the tab. In our example, we have added two tabs ‘Description’ and ‘Additional Information’. Magento installation contains both phtml files so if you can’t find them in your own theme you can copy it from app/design/frontend/base/default/template/catalog/product/view/. First tab will contain the description of the product and second tab will be a list of additional product’s attributes. As we’ve already said you can add your own blocks as the tabs. Don’t forget to clean Magento cache after this operation.

Second, you need to copy the following file app/design/frontend/default/modern/template/catalog/product/view/tabs.phtml

into app/design/frontend/default/yourtheme/template/catalog/product/view/ .

This file contains mockup for the tabs section.

Third, you should add styles for the tabs. Go to your general css file (usuallyskin/frontend/default/yourtheme/css/styles.css) and add the lines below:

Finally we have got to the last step. Go to the file app/design/frontend/base/default/template/catalog/product/view.phtml (if there’s no such file you should already know where to get it) and insert the following line somewhere you would like to see the tabs section:

That’s all. To be sure that everything going well try to clean up the cache after every step. Good luck and feel free to ask any your questions. :)

About Brian Wilson

avatar
Brian is a freelance Magento developer with 5 years of experience with customizing Magento extensions, magento themes. He's interested in sharing Magento Tutorials to the community

One comment

  1. avatar

    Thanks for the great tutorial. I have managed to implement the code and it works on my desktop browser.

    One issue is that it will not display properly on a mobile device. The tab headings will display on a mobile device (Samsung Galaxy S5) however the content will not. Any suggestions? Seems to work on iPad.

    It may have something to do with my custom theme however maybe the screen resolution ( 360w x 640h ) is restricting the tab content from displaying?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top