JM_Sporty

First, 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 our example, 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/.

First tab will contain the description of the product and second tab will be a list of additional product’s attributes.

As we’ve already said you can add your own blocks as the tabs.
Don’t forget to clean Magento cache after this operation.

Second, you need to copy the following file --> app/design/frontend/default/yourtheme/template/catalog/product/view/tabs.phtml

into --> app/design/frontend/default/yourtheme/template/catalog/product/view/ .

This file contains mockup for the tabs section.

Third, you should 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; }

Finally we have got to the last step. 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') ?>

That’s all.

To be sure that everything going well try to clean up the cache after every step.

Here’s an additional resource (if you need it) . . . http://www.magentocommerce.com/board…thread/381931/

Hi Tom,

Super, it works very fine… 😉

I just have a problem to make the design look like the other design at JM_Sporty.. I will make a support ticket for this.. 😉

Have a great day,

Jonas

Glad I could help … Good luck with your continuing site development !!

Hi again,

Is there any easy solution on how to make the "Description / Additional description" tabs to look like the other tabs in this theme..??

I cant seem to figure out how to do this..

/ Jonas

Hi again,

Is there any easy solution on how to make the "Description / Additional description" tabs to look like the other tabs in this theme..??

I cant seem to figure out how to do this..

/ Jonas

It would be helpful if you could provide the url of the site you’re working on, so we can take a better look.

Hi TomC,

Off course.. 😉

http://outdooradventure.magentodemo.dk is the main page and you can see the problem on this page: http://outdooradventure.magentodemo….400-lumen.html

Best regards,

Jonas..

I am quite certain it’s an issue of CSS styling of the tabs. What you should do is review the CSS for the existing tabs, and then duplicate similar CSS properties into your new tabs.

The file path for where to find the CSS for the existing tabs is --> /skin/frontend/default/jm_sporty/css/styles.css

The CSS for the tabs start at/around line 4375 or so.

Hi TomC,

Thank you so much, I have used copy/paste a lot, and it now works perfect…

Have a great day,

/ Jonas