Add Custom Product Tab In Magento 1.9 CE

back to tech articles
| 19th August 2014
Magento 1.9 CE

Very often we want to add additional tabs to Magento’s product page(s). The Additional Information tab only goes so far! We begin by creating a new attribute in Magento. We’ll utilise a CMS block that gives us control over the content from Magento’s admin interface in a familiar way.

Magento First

Navigate to Catalog > Attributes > Manage Attributes and click on Add New Attribute. Enter an attribute code and be sure to specify Text Field for the Catalog Input Type… option. Fill in the remaining details to your preference.

Next, assign the attribute to an attribute set; navigate to Catalog > Attributes > Manage Attribute Sets. Choose a set and drag your new attribute into the Groups list. Save that, re-index the catalog, and proceed to create a CMS block at CMS > Static Blocks > Add New Block. Create a new block, and take note of the block identifier.

Once your block has been created, move to create/edit a product. In the create/edit product view, locate your new attribute and populate it with the identifier of your new CMS block. In my case, sizes_table.

The Code

In your theme’s design path, open the catalog xml file. We’re going to add a custom tab, in my case a size guide table, to appear immediately after the product description tab. First, locate the code for the product description tab, which looks like this:

app/design/frontend/[theme]/default/layout/catalog.xml

1
2
3
4
<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>Description</value></action>
</block>

In my theme, it runs from lines 225 through 228. Now add your own “tab” code afterwards:

app/design/frontend/[theme]/default/layout/catalog.xml

1
2
3
4
<block type="catalog/product_view_attributes" name="product.sizes" as="sizes" template="catalog/product/view/sizes.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>Size Guide</value></action>
</block>

Now we need to create the custom view at catalog/product/view/sizes.phtml to perform the logic. You might want to get more creative with your names!

app/design/frontend/[theme]/default/template/catalog/product/view/sizes.phtml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$_product = $this->getProduct();
$attribute = $_product->getResource()->getAttribute('sizes_table');
if ( is_object($attribute) ) {
  $identifier = $_product->getData("sizes_table");
}
?>

<?php if ($_sizeBlock = Mage::app()->getLayout()->createBlock('cms/block')->setBlockId($identifier)): ?>
    <div class="std">
        <?php echo $_sizeBlock->toHtml() ?>
    </div>
<?php endif; ?>

Upload those files to the server, and you are done. You can now edit the CMS block with any content you want it to contain. The best part about this approach is that Magento is building the tab in the same way as any other, so the markup is the same. Ideal if you have, or intend to use, a custom theme.