How to add Product Tab?

I would like to add a new product tab like the description tab and upsell products tab.

I want another tab called: "Requirements"

How can I add it?


16 answers

Profile photo of Idan Damti 0.00 $tone June 18, 2013

This is not helping since I do not need it as static block.
For each product, I have different requirements.
I created a new field with the name: "requirement" so I will type the data for each product (if I have) separately.
How can I do it?
Thank you.

Profile photo of tomc 0.00 $tone June 18, 2013

Try This . . .

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:


Product view
 <catalog_product_view translate="label">
    <block type="catalog/product_view" name="" as="product_options_wrapper_bottom" template="catalog/product/view/options/wrapper/bottom.phtml" translate="label">
       <label>Bottom Block Options Wrapper</label>
            <action method="insert"><block>product.tierprices</block></action>
            <block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
            <action method="append"><block></block></action>
            <action method="append"><block></block></action>

After this section, insert the block below:


<block type="catalog/product_view_tabs" name="" as="info_tabs" template="catalog/product/view/tabs.phtml">
    <action method="addTab" translate="title" module="catalog">
    <action method="addTab" translate="title" module="catalog">
        <title>Additional Information</title>

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 the example above, 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/.

The first tab will contain the description of the product and second tab will be a list of additional product’s attributes.
As mentioned, you can add your own blocks as the tabs.

Don’t forget to clean Magento cache after this operation.

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.

Add styles for the tabs.

Go to your general css file (usually skin/frontend/default/yourtheme/css/styles.css) and add the lines below:


/* Product Tabs */
.product-tabs { margin-bottom:15px; border-bottom:1px solid #666 background:#f2f2f2 url(../images/bkg_tabs.gif) 0 100% repeat-x; height: 25px;}
.product-tabs li { float:left; border-right:1px solid #a4a4a4 border-left:1px solid #fff font-size:1.1em; line-height:1em; }
.product-tabs li.first { border-left:0; }
.product-tabs li.last { border-right:0; }
.product-tabs a { display:block; padding:6px 15px; color:#444; }
.product-tabs a:hover { background-color:#ddd; text-decoration:none; color:#444; }
.product-tabs a,
.product-tabs a:hover { background-color:#666 font-weight:bold; color:#fff }
.product-tabs-content h2 { display:none; font-size:12px; font-weight:bold; }

Finally, go to the file -->app/design/frontend/base/default/template/catalog/product/view.phtml

Insert the following line somewhere you would like to see the tabs section:


<?php echo $this->getChildHtml('info_tabs') ?>

That’s all. To be sure that everything going well, clean up/clear the cache after every step

Hope That Helps

Profile photo of Idan Damti 0.00 $tone June 18, 2013

Ok…. I found the solution for that…
this is how to add the new tab:

1. You need inside the admin panel to create a new attributes by going to: catalog -> Attributes -> Manage Attributes -> add your new
field and save it.

2. go to catalog -> Attributes -> Manage Attributes sets -> and add your new field to your default set -> save it.

3. edit this file: /app/design/frontend/default/jm_jasmine/layout/catalog.xml

find this line:

HTML Code:

<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>
                <block type="catalog/product_view_attributes" name="product.attributes" as="additional" template="catalog/product/view/attributes.phtml">
                    <action method="addToParentGroup"><group>detailed_info</group></action>

and add after this lines this code: (you will need to change the TEXT with your field name that you gave when creating the new field in 1st step.

<block type="catalog/product_view_attributes" name="product.attributes" as="TEXT" template="catalog/product/view/text.phtml">
<action method="addToParentGroup"><group>detailed_info</group></action>

4. go to this file: /app/design/frontend/base/default/template/catalog/product/view/description.phtml

download it to your computer and change the name of the file according to the name you wrote in step 3 in this part: catalog/product/view/text.phtml

after changing the name of the file open it in some editor and change the description text to your TEXT.

my TEXT was requirements so I changed it from:

HTML Code:

<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
    <h2><?php echo $this->__('Details') ?></h2>
    <div class="std">
        <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
<?php endif; ?>


HTML Code:

<?php $_requirements = $this->getProduct()->getRequirements(); ?>
<?php if ($_requirements): ?>
    <div class="std">
        <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_requirements, 'requirements') ?>
<?php endif; ?>

I removed the H2 line since I didn’t wanted it… but you can leave it as is.

that’s it!!!!

at the end just upload the new file and clear the cache inside the admin panel. —- go to —-system -> Cache management
and clear the cache.

hoping that it will help…..

Profile photo of Idan Damti 0.00 $tone June 18, 2013

ok… my solution is not so good since after trying to add 1 more tab, it’s not showing…

any help?
TomC solution is not working for me as well… I have done and try everything.

please help….

Profile photo of tomc 0.00 $tone June 18, 2013

I just need to add 1 more tab… for that I need to pay 50 USD????

please help me solving that issue.


Did you not see/look at the other reference links provided?

Profile photo of Sherlock 0.00 $tone June 19, 2013

Hi tiwebmaster,

I think you would need to make change in the file of app\design\frontend\default\jm_jasminetemplate\ca talog\product\view.phtml to get rid of the additional tab and the product tags

also, how can I change the look of the tabs to be like the additional or the products tags?

Those tags need to be re-styled, mate !

Profile photo of Idan Damti 0.00 $tone June 19, 2013

that is not working for me. I tried to remove these lines:

<?php if($product_additional_data = $this->getChildHtml(‘product_additional_data’)): ?>
<li><a href="#ja-tabitem-tags"><?php echo $this->__(‘Product Tags’) ?></a></li>
<?php endif; ?>

and it removed all the tabs… I also tried to remove only the first and only the second line but it didn’t helped.

what else can I try to make it work properly?

Profile photo of Sherlock 0.00 $tone June 20, 2013

Hi tiwebmaster,

in this case I think you should contact to the extension’s author which you installed to get help, from my point of view I think those parent tabs could not be removed


Please login or Register to Submit Answer

Written By