How to add Product Tab?

Hi tiwebmaster,

This post is about adding a custom tab to product tabs, I hope it could help

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.

Try This . . .

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>

After this section, insert the block below:

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 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:
Add styles for the tabs.

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

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

Code:

    
<?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

If things get too frustrating … there’s also a FREE EXTENSION available via the Magento Connect listing.

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>
                <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>
                </block>

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>
</block>

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') ?>
    </div>
<?php endif; ?>

to:

HTML Code:

?>
<?php $_requirements = $this->getProduct()->getRequirements(); ?>
<?php if ($_requirements): ?>
    
    <div class="std">
        <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_requirements, 'requirements') ?>
    </div>
<?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…..

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….

How about trying this FREE EXTENSION -- available via the Magento Connect listing?

it’s not working for me… I don’t know why.

it’s not working for me… I don’t know why.

Here are some additional resources that may be of assistance . . .

-- http://www.magentocommerce.com/boards/viewthread/21674/

-- http://www.magentocommerce.com/boards/viewthread/19498/

-- http://magedziner.com/blog/?p=207

http://www.youtube.com/watch?v=QOj4U3PTDW4

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

please help me solving that issue.

thanks.

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

please help me solving that issue.

thanks.

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

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

This particular one is FREE . . . .

Attachment 28263
http://www.magentocommerce.com/magen…-easytabs.html

ok… after using the free extension…. please check my product page and let me know how can I fix the tabs?
I don’t want to see 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?

thank you so much for your help.

link to product page: http://tiwebmaster.com/shop/tiwebmaster-premium.html

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 !

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?

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