How to add custom tabs to product page in Magento 1.9


 Sometimes you want to add more custom tabs to your product page in Magento so that the product page can show more content to your customers and they can find every they need in product page, so how can we do this?

In this Magento tutorial for beginner, we will learn how to add custom tab to product page, tested on Magento 1.6xx, 1.7xx, 1.8xx and 1.9

add custom tab to magento product page

Step1 : Make a new Attribute in admin section

In Magento backend, go to Catalog >> Attributes >> Manage Attributes and create a new attribute named customtab

manage attribute

Select Text Field for Catalog Input Type for Store Owner. All the rest properties you can set as bellownew product attribute

In Manage Label / Options tab on the left menu, enter title for the custom tab. Here we input “Product Size” for admin and default store view.

manage lable

Finally click on save attribute to save your new attribute


Step 2 : Assign the Attribute to attribute set

Navigate to Catalog >> Attributes >> Manage Attributes Sets.

Select the attribute set

choose attribute set

Drag and release the “productsize” attribute from Unassigned Attributes to Groups.

drop attribute to group

Fianlly save attribute set to apply your changes

Step 3: Create content for custom tab

In this step, we will create a static block for displaying content. In CMS go to Static Block, add a new block with the following information

  • Block Title : Product Size
  • Identifier : position-13
  • Status : Enabled
  • Content: your content

add a new block

Step 4: Add content to Product tab

Navigate to Catalog >> Manage Products. You now can see your new textarea, in this case we call it “Size Table”.

add product tab content

Now just fill in the content you want and refresh cache

Step 5. Update Product page view

Now we will update product page view so that our tab will be displayed on the front-end. We will add the tab to view.phtml file in \app\design\frontend\default\yourtheme\template\catalog\product\view.phtml

In view.phtml, find this code:

Add the following code before the above to add our product price custom tab:

After that, find the following lines:

Right under this block, insert the folllowing code:

Finally, find these lines:

Insert the following:

Save the file and you are done now! Enter your front-end to see what we’ve got. I’m pretty sure it will be the same as our demo.

Now save your view.phtml file and go to frontend to see the newly added custom tab. Hope you will succeed with coding.

If you have any questions, feel free to drop a line here and I will get back as soon as possible.

Happy coding

Rate this post


About Author

Brian is a Magento developer with 5 years of experience with customizing Magento extensions, Magento templates. He's main author at Magento explorer

Leave A Reply