HOW TO ADD TABS to MAGENTO PRODUCT PAGE

The following describes how to add product tabs to your Manegto product page.

STEP ONE:
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:

Code:

<!--
Product view
-->
<catalog_product_view translate="label">
    <block type="catalog/product_view" name="product.info.options.wrapper.bottom" 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>product.info.addtocart</block></action>
            <action method="append"><block>product.info.addto</block></action>
        </block>

Check to see if something similar to below is following the above section:
(if not, insert the below block yourself)

Code:

    
<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml">
    <action method="addTab" translate="title" module="catalog">
        <alias>description</alias>
        <title>Description</title>
        <block>catalog/product_view_description</block>
        <template>catalog/product/view/description.phtml</template>
    </action>
    <action method="addTab" translate="title" module="catalog">
        <alias>additional</alias>
        <title>Additional Information</title>
        <block>catalog/product_view_attributes</block>
        <template>catalog/product/view/attributes.phtml</template>
    </action>
</block>

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 I’ve already mentioned, you can add your own blocks as the tabs.

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

STEP TWO:
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.

STEP THREE:
Third, you should add styles for the tabs. Go to your general css file (usually skin/frontend/default/yourtheme/css/styles.css) and add something similar to the following code:

Code:

    
/* 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 li.active a,
.product-tabs li.active a:hover { background-color:#666 font-weight:bold; color:#fff }
.product-tabs-content h2 { display:none; font-size:12px; font-weight:bold; }

STEP FOUR:
Go to the file app/design/frontend/base/default/template/catalog/product/view.phtml (if there’s no such file you should already know where to get it) and insert the following line somewhere you would like to see the tabs section:

Code:

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

To be sure that everything going well, try to clear the cache after every step.

Hello,

Have you tested this? I just tested your tutorial (Too similar to: http://www.atwix.com/magento/adding-…-product-page/) and it doesent work at all on Lingerie theme, can you point me in the right direction?

Thanks

Arnold