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, tutorial tested on Magento 1.6xx, 1.7xx, 1.8xx and 1.9
Step1: Make a new Attribute in admin section
In Magento backend, go to Catalog >> Attributes >> Manage Attributes and create a new attribute named customtab
Select Text Field for Catalog Input Type for Store Owner. All the rest properties you can set as bellow
In Manage Label / Options tab on the left menu, enter the title for the custom tab. Here we input “Product Size” for admin and default store view.
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
Drag and release the “productsize” attribute from Unassigned Attributes to Groups.
Finally 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
Step 4: Add content to Product tab
Navigate to Catalog >> Manage Products. You now can see your new text-area, in this case, we call it “Size Table”.
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:
1 | <div id="ja-tab-products" class="product-collateral"> |
Add the following code before the above to add our product price custom tab:
1 2 3 4 5 6 7 8 9 10 11 | <?php //add the product prize custom tab to the product tab $attribute = $_product->getResource()->getAttribute('productprize'); if(is_object($attribute)){ $identifier = $_product->getData("productprize"); } $blockcustom = Mage::app()->getLayout()->createBlock('cms/block')->setBlockId($identifier); $blockcustommodel = Mage::getModel('cms/block')->load($identifier); $customtitle = $blockcustommodel->getTitle(); $productprize = $blockcustom->toHtml(); ?> |
After that, find the following lines:
1 2 3 | <?php if($review_form = $this->getChildHtml('review_form')): ?> <li><a href="#ja-tabitem-reviewform"><?php echo $this->__('Write Your Own Review') ?></a></li> <?php endif; ?> |
Right under this block, insert the following code:
1 2 3 | <?php if($productprize): ?> <li><a href="#ja-tabitem-custom"><?php echo $this->__($customtitle) ?></a></li> <?php endif; ?> |
Finally, find these lines:
1 2 3 4 5 | <?php if($productprize): ?><?php if($review_form): ?> <div id="ja-tabitem-reviewform"> <?php echo $review_form; ?> </div> <?php endif/;?> |
Insert the following:
1 2 3 4 5 | <?php if($productprize): ?> <div id="ja-tabitem-custom"> <?php echo $productprize; ?> </div> <?php endif; ?> |
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 the 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