blog

Magento Custom Attribute Tabs

By default Magento shows a table of the attributes in a single tab on the product detail page. Often I want to show only a single attribute or custom attribute per tab – say a tab for Supplement Facts and Product Q&A in addition to the Product Description Tab and Upsell Tab. Lets add a tab for our Product Q&A Information. Note: This has only been tested on Magento 1.4.

Login to Magento and create you custom attribute and assign it to an attribute set. You can use text area or text field. Take note of your attribute label for later.

First navigate to /app/design/frontend/default/yourtheme/template/catalog/product/view and create a new .phtml file. I am going to title this one product_qa.phtml. Go ahead and load the product and get its additional data:

// Load Product
$_helper = $this->helper('catalog/output');

//Get Additional Data
$_product = $this->getProduct()

// In case another product does not have this attribute tab will not display
if($_additional = $this->getAdditionalData()):

You can wrap this with HTML as needed. Next we get the attribute. Replace product_qa with the attribute label you chose when creating the attribute:

// Change product_qa
// to your attribute label
echo $_product->getResource()->getAttribute('product_qa')->getFrontend()->getValue($_product);

Then close your if statement:

// Close
// the statment
endif;

All together it might look something like this:

<?php

$_helper = $this->helper('catalog/output');
$_product = $this->getProduct()
if($_additional = $this->getAdditionalData()): 

?>

        <div class="box-collateral box-additional">

                <?php echo $_product->getResource()->getAttribute('quick_hints')->getFrontend()->getValue($_product); ?>

        </div>

<?php endif;?>

Next we need to add the tab into the XML. Open up /app/design/frontend/default/yourtheme/layout/catalog.xml. Around line 220 you will find the block for the product tabs. Change the alias, title and the files name as needed:

// Change alias, title and file name as needed.
<action method="addTab" translate="title" module="catalog"><alias>product</alias><title>Product Q&amp;A</title><block>catalog/product_view_attributes</block><template>catalog/product/view/product_qa.phtml</template></action>

This process is to add a single tab, so repeat as many times as necessary for as many attributes you want to display in individual tabs.