Adding Tabbed-View to Magento Default Theme

Over the past few weeks, I've gotten a few requests by Magento users asking how to port Modern Theme's tabbed product view information to the Default Theme. Here it is, a step by step guide involving modifying template, layout and skin files.

And now, before you attempt to do any of the following, if you've tweaked your existing Default Theme before, make sure you backup your template and layout files so that you can refer back when you've done something wrong, play safe!. Ok, let's get started!

Paste the following block of template code into Default Theme's product view.phtml, located in app/design/frontend/default/default/template/catalog/product/view.phtml, right before the closing div:

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

and within the same file, remove the following template logic block:

 
<div class="product-collateral">
    <?php if ($_description = $this->getChildHtml('description')):?>
        <div class="collateral-box">
            <div class="head">
                <h4><?php echo $this->__('Product Description') ?></h4>
            </div>
            <?php echo $_description ?>
        </div>
    <?php endif;?>
    <?php if ($_additional = $this->getChildHtml('additional')):?>
        <div class="collateral-box">
            <div class="head">
                <h4><?php echo $this->__('Additional Information') ?></h4>
            </div>
            <?php echo $_additional ?>
        </div>
    <?php endif;?>
    <?php echo $this->getChildHtml('upsell_products') ?>
    <?php echo $this->getChildHtml('product_additional_data') ?>
</div>

Backup and remove folders and files under app/design/frontend/default/default/template/catalog/product/view then copy back from app/design/frontend/default/modern/template/catalog/product/view into the former folder.

Paste the following block of layout tags into Default Theme's catalog.xml, located in app/design/frontend/default/default/layout/catalog.xml

 
<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>Product Description</title><block>catalog/product_view_description</block><template>catalog/product/view/description.phtml</template></action>
    <action method="addTab" translate="title" module="catalog"><alias>upsell_products</alias><title>We Also Recommend</title><block>catalog/product_list_upsell</block><template>catalog/product/list/upsell.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>

within <catalog_product_view>, right below <block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>

Paste the following block of layout tags into Default Theme's tag.xml, located in app/design/frontend/default/default/layout/tag.xml

 
<reference name="product.info.tabs">
    <action method="addTab" translate="title" module="tag"><alias>tags</alias><title>Product Tags</title><block>tag/product_list</block><template>tag/list.phtml</template></action>
</reference>

within <catalog_product_view>, right below the following tags:

 
<reference name="product.info.additional">
    <block type="tag/product_list" name="product_tag_list" before="-" template="tag/list.phtml"></block>
</reference>

Now we need to put some basic styles for the tabs, paste the following css to the end of boxes.css file located at skin/frontend/default/default/css/boxes.css

 
/********************** Tabs */
.tabs                   { margin-bottom:15px; border-bottom:1px solid #666; background: url('/../images/tabs_bg.gif') repeat-x 0 100% #f2f2f2; }
.tabs li                { float:left; border-right:1px solid #a4a4a4; border-left:1px solid #fff; font-size:1.1em; line-height:1em; }
.tabs li.first          { border-left:0; }
.tabs li.last           { border-right:0; }
.tabs a                 { display:block; padding:6px 15px; color:#444; }
.tabs a:hover           { background-color:#ddd; text-decoration:none; color:#444; }
.tabs li.active a,
.tabs li.active a:hover { background-color:#666; font-weight:bold; color:#fff; }
 
/* Style */
.outline-creator { border:1px solid #bbb; border-bottom-color:#666; background:#fff; }
.col-main .padder{ padding-right:20px; }
.layout-3columns .padder { padding:0; }

And the last part is to copy tab's background image from skin/frontend/default/modern/images/tabs_bg.gif to skin/frontend/default/default/images

Here's the screenshot of the integrated tab feature in Default Theme with each collateral div transformed into tabs:

Tab feature ini Default Theme

For your easy modification, I've zipped all the above mentioned files into a zip for you to download: tab-in-default-theme.zip (51KB)

Bookmark

Email this

Comments (68) Add Comment

Subscribe to this comment's feed

...
written by Manu, March 02, 2009

Thanks, Eddy, for this useful post! smilies/wink.gif

It would be great as well to find here the way to hide the prices from the not logged in users in Magento... smilies/grin.gif

Kind regards and thanks! Nice blog! smilies/wink.gif

...
written by Eddy, March 04, 2009

Hi Manu,

I think it has already been discussed repeatedly on the forum about how to hide prices from those who aren't logged-in. Some nice people even created a module for this, check out http://code.google.com/p/magentohideprice/

...
written by Brian Petrosky, March 09, 2009

Hi I applied your method to the default theme in magento 1.2.1.2 and your method doesnt seem to display? Can you tell me how to get this functioning? I did as your instructions said and also downloaded your file! I tryed both methods and neither will display? I would appriciate any information you could provide!

Thank You,
Brian

...
written by Eddy, March 10, 2009

Hi Brian,

I customized my tab view on Magento 1.2.1.1 and though the current stable version is 1.2.1.2, there are no significant changes between the two that might have caused your default template to not showing those tabs.

Have you cleared your magento cache when modifying the theme so that changes are reflected constantly.

...
written by Marcio Eugenio, March 14, 2009

Wow! Great tutorial!! It's help me a lot! smilies/cheesy.gif

...
written by prits, March 25, 2009

Hi, I added the tabs as described above. I added a tab for "Email to Friend" functionality. It is not working properly whereas other tabs "Review", "Product Tag" are working fine. In "Email to Friend" it display the form but when we submit it; report error. Can you plz help me on this....

-1

...
written by Eddy, March 25, 2009

Hi Prits,

I assume that you are loading the Sendfriend (Email to Friend) module through catalog.xml file. Please note that by loading the module through catalog layout, the $this variable within send.phtml isn't referencing to product variable, so some values like product id and product category that are needed by the form action were missing.

Also, if you look into send.phtml, it shows that you need to query the module's maxRecip property and output them within the javascript block of the sendfriend module, otherwise the form will simply throws error.

...
written by Prits, March 26, 2009

Hi Eddy,
Thanks for post your view. you are right that I have implement "Email to friend" tab through catlog.xml.i have getting right product id and category id on send.phtml,because send.phtml page has a form tag in which action is set with category id and product id.form action is :

in this php code I got right url but after clicking on send mail button error report page is display. so if you have any idea then please reply me.

...
written by Eddy, March 27, 2009

Hi again Prits,

May I know where is your Magento live site in which you're putting Sendfriend module? Because I don't know what else you're missing.

Like what I've said before, aside ProductId and CategoryId, you have to pull MaxRecipients variable from Sendfriend module config. The source code is located at : app/code/core/mage/sendfriend/block/Send.php.

Or else, you might want set MaxRecipients to 5 on your send.phtml like this:
"var maxRecip = 5;". Of course, once you change maxrecipient from the module config, it won't be reflected on the tabbed sendfriend module whenever there you update the value from your backend.

...
written by Prits, March 27, 2009

Hi Eddy,
Thanks for reply. Problem related to send mail to friend is arise on http://devstorea.comparepro.co.uk/. i am also check MaxRecipients on send.phtml the value of MaxRecipients is correct which is set from admin. i also change this value and put hard coded value 5. but still problem is same.

...
written by Eddy, March 27, 2009

Prits,

The problem is with the form action and you need to force getUrl function to use sendfriend module instead of catalog module. See the difference of the form action below:

Sendfriend in a Tab:
http://devstorea.comparepro.co.uk/catalog/product/sendmail/id/557/

Default Sendfriend Page:
http://devstorea.comparepro.co.uk/sendfriend/product/sendmail/id/557/

...
written by Prits, March 27, 2009

Thankyou Eddy for your support. My code is run properly and problem is solved. again thankyou very much.

...
written by Prits, March 30, 2009

Hi Eddy,
I added the tabs on "Product detail page" which are run successfully. on this tabs i have one tab for "User reviews" on this tab all user reviews are displayed and on same tab i have add a button for "Add Reviews" on click this button review form is opened. this functionality is run properly for that product in which no reviews are added. but that product which have reviews not open review form on clicking of "Add new review" tab. so if you have any idea please reply me. URL :

...
written by nadeem, March 31, 2009

i did same as described in artical but found following error
"Fatal error: Class 'Mage_Weee_Helper_Data' not found in E:php-projeectstoreappcodecoreMageCoreModelApp.php on line 785"
while i have magento on local machine.

plz help in this regard

...
written by Eddy, April 03, 2009

Hi Nadeem,

I am not sure if that was caused by modifying the template but if it really is, there must be some typos when you're inserting the code into your layout and template files. Please make sure all code are pasted in the way they are shown above.

...
written by nuke, April 04, 2009

Eddy, thanks a lot for this helpfull post!
Please can you help me to workaround such issue:
I did all steps you recommend (but under Classic template), and now
can't force BG image under tabs to be visible
and bottom border of tabs tag I see on the TOP of tabs.

Any ideas?

Thank You for advance

...
written by nuke, April 04, 2009

Hi again! I have found a solution of problem described in previous post.
It happens because of specific behavior of "float" property of .tabs class style. I don't understand yet what a difference between Default and Classic product pages in this concern, but it is enough to
set height of tabs in boxes.css like this:
.tabs - height:24px; margin-bottom:15px; ...
to solve the problem!
Have a nice day!

...
written by nuke, April 04, 2009

Or even more nice:
.tabs - width:100%; overflow:hidden; ....
It forces container to cover underlying tabs completly and you don't need to set it's height.

...
written by darths, April 04, 2009

If I follow the instructions exactly, I get the following error:

Warning: include(/public_html/magento/app/design/frontend/default/default/template/catalog/product/view/options/wrapper.phtml) [function.include]: failed to open stream: No such file or directory in /public_html/magento/app/code/core/Mage/Core/Block/Template.php on line 144

Clearly this is from step 2: # Backup and remove folders and files under app/design/frontend/default/default/template/catalog/product/view then copy back from app/design/frontend/default/modern/template/catalog/product/view into the former folder.

Which eliminates the "options" folder.

Am I doing something wrong? I am running the latest magento 1.3

NOTE: I also added back the "options" directory originally from the default template and the error goes away, but there are still no tabs - just a stacked list of links corresponding to the tabs

...
written by Eddy, April 05, 2009

@nuke: glad you sorted it out smilies/wink.gif

@darths : if you're able to see the stacked list, most probably those list items and divs are already rendered, it's just that the css styles haven't yet been applied which made them not appearing as tabs. (well, this is just an assumption on my part until I see your live store) Also, don't forget to clear your cache, both Magento's and browser's.

...
written by Samser, April 05, 2009

Cool man! Works smoothly...

Thanks Eddy!

...
written by mytex, April 06, 2009

Hi Eddy,
This is great and something I have been wanting to do for a while. Thanks for taking the time to share your expertise.

I have a bit of a problem though which I hope you can help me with. I followed you instructions but find that where the tab page should show, I just get an empty box. No graphics - just the breadcrumb and the empty box.

Any ideas where I might have gone wrong? I am running ver 1.1.6 and have refreshed the cache etc.

Thanks.

...
written by Eddy, April 07, 2009

Hi Mytex,

If you look into your product detail page (like this one : http://www.mytex.co.uk/magento...0-10j.html), you'd see that the template stopped rendering at

. There should be error message popping-up after the div if you turn on your error reporting. And it's pretty clear that the error came from product's template file which might be syntactical error or non-existent variable reference.

...
written by Eddy, April 07, 2009

Oops, the code was chopped off, it should be : stopped rendering at div class="product-img-box"

...
written by mytex, April 07, 2009

Hi Eddy,
Thanks for your reply. Sorry if this is an idiot question but I am a magento novice!....how do I turn on error reporting? I've looked in the admin and there is reference to log settings in advanced/developer but this doesn't seem to give me any information!

I have also looked in the error log on my hosting comapnies control panel and it does have an error as follows:
[Tue Apr 07 10:58:16 2009] [warn] mod_fcgid: stderr: PHP Fatal error: Class 'Mage_Catalog_Helper_Output' not found in /var/www/vhosts/mytex.co.uk/httpdocs/magento/app/code/core/Mage/Core/Model/App.php on line 785

I seem to have missed something but am not sure where the problem is. One slight deviation from your instructions I have made is that I am copying the new and changed files to my own theme thinking that this will help when I upgrade but I can't see why this would cause a problem.

Thanks very much for your help.

...
written by Eddy, April 08, 2009

Hi Mytex,

By error reporting, I mean PHP error_reporting. You can ask your webhost on how to turn it on/off since every webhost might do it differently. When you're hacking theme, turning on error reporting does help as you can see the error messages if something goes wrong.

I don't know how specific you've modified your own theme which is based on core default theme. But since this short guide is about how to implement tabbed view of modern theme on top of default theme, I'd suggest you try it out with a "clean" default theme on different installation before applying the changes to your "modified" default theme. So you'll know which part has been changed as explained in this guide in relation to your own changes.

Also, your error seems rather general. It could always be assumed is a template related error since you're doing modification on top it but the error message doesn't tell more. So my advice is that you can start debugging by looking into catalog/product template files and find what might have caused this, it could be like what I've said before, syntactical error or non-existent variable reference.

...
written by mytex, April 08, 2009

Hi Eddy,
Thanks loads for trying to help me out with this one. Unfortunately, I don't have the expertise (yet) to find the problem so I am having to back everything out.

I will revisit this when I have more time but I am just having to go live with it as standard - no tabs. A bit rubbish but I have to start selling stuff or I'll lose my house!!!!! smilies/sad.gif

If you know of a way to implement simple tabs in the long description field of the default theme, that's all I am after. It's an aesthetic thing. Any pointers for this would be great.

For anyone else reading this, don't let this put you off he mod. Eddy really knows his stuff and it's just my inexperience and lack of time that has caused the problem.

Cheers.

...
written by Ozinnovations, April 09, 2009

Hi Eddy,

I managed to get your tabbed feature on the default theme. But, there was an error when displaying configurable product on front end.
Any idea ?

http://www.ozinnovations.com.au/report/?id=534122624285&s=default

...
written by Charlie, April 11, 2009

Hello Eddy,

Thanks for taking the time share this with us. Can you please tell me how I can add more tabs such as the "more information" tab in your screen shot.

Thanks,
Charlie

...
written by koobklatawa, April 24, 2009

Fantastic tutorial - clear enough for a newbie like me to understand. Unfortunately I am having a little problem with the tabs which I am sure is a simple fix. I am also using the classic theme (Magento 1.3.1) and everything has gone smoothly except that when I view my page I see both tabs (product description and additional information) but the information they are supposed to contain is visible simultaneously, and clicking on the tabs doesn't do anything but reload the page. Could you please help me figure this out. One other thing - is there a way to set the tabs so when you click on them they don't reload the page and start you back at the top? My products have lots of options so you have to scroll all the way back down to the tabs each time you click on them. I hope I have clearly described the issues.

...
written by Paul, April 26, 2009

Somehow i just cannot get the tabs to display along side each other. Must be some kind of css issue. Maybe because i tried to modify a theme other than the default theme?

All things seem to be right on my end, is there anything else we shoild take into account when not editing the default theme?

ty

...
written by Paul, April 26, 2009

I think it is the line in page.xml, had to add it to my theme:
css/boxes.css

...
written by Jacek, May 01, 2009

The same problem as for koobklatawa. Tab containers are all visible and the page jumps to the top after clicking on each tab except for default one.
It happens only in Firefox! IE, OPERA and Chrome works smoothly.
Cache cleared, Eddy - what can be the reason?
Greets

...
written by Jacek, May 01, 2009

-1

...
written by Paul, May 01, 2009

I'm having trouble with the Write Review section. It is blank when i try to access "be the first one to write ...".

How can we add the tab and make it go there by default after clicking the link?

...
written by Harry, May 11, 2009

Thanks Mate, You saved me a lot of time. smilies/wink.gif

-1

...
written by matt, May 13, 2009

Hi Eddy,
I am using the Blue theme. Before I spend time looking into it, I thought I would ask you if the tabs will work on this theme?

Thanks for taking the time to answer.

...
written by Eddy, May 14, 2009

Honestly, I didn't try it on Blue Theme but from a few replies above where people are making amendment on top of themes other than Default Theme, they succeeded. And I think it will work on Blue Theme.

Just give it a try and make sure every file or folder are in correct places.

...
written by toby, May 20, 2009

I just added the tabs to the Blue theme and it worked decently. One extra step is required, though. The tabs.phtml file needs copied from the zip download above into the correct place. Once that is done things just need formatted a bit to appear correctly.

...
written by doughold, May 21, 2009

@jacek & koobklatawa, have you guys figured this out. I am having the same issue with the tabs not working in firefox (FF3). Somehow the JS is not binding to the correct object maybe? I am troubleshooting and will advise if I figure it out.

-1

...
written by doughold, May 21, 2009

Okay, so I figured out why mine weren't working. The issue was actually with the prototype/scriptaculous functions. I had enabled the prototype deprecation log (System>Configuration>Developer) which I have now disabled. Additionally, I updated the scriptaculous scripts from 1.7_beta3 to 1.8.* from the site http://script.aculo.us/downloads . Lastly, I added an empty file to js/calendar/lang/calendar-en.js (I think this and disabling the deprecation log were the two things that did the trick).

...
written by Jacek, May 21, 2009

Thanks doughold! Ckecked and it helped me as well, without updating scripts, just by disabling depreciation log.

...
written by doughold, May 22, 2009

@Paul - I am having the same issue with the writing of the reviews. Have you solved this yet?

...
written by doughold, May 22, 2009

SOLVED - Product Reviews - Okay so you just have to reference the right block from the review.xml file. Basically, all you have to do is change:

to

Change the as="product_additional_data" as="info_tabs" and you should be good to go.

I also have the posted reviews in a tab as per: http://www.magentocommerce.com...ead/31712/

...
written by Luke, May 24, 2009

Hi Eddy, thanks for this post!

I've done everything to the letter (and double checked it), but I'm only getting the one 'Product Description' tab showing up.

The other tabs aren't showing at all. Not even the titles.
Any ideas?

thanks in advance!

...
written by evuska, May 25, 2009

Hi,

I need to change the tabs order. I want the "We also recommend" tab shows after "Product Tags" tab. Is it possible?

thanks

...
written by Eddy, June 08, 2009

@all:
Please use http://pastebin.com to avoid code snipped being filtered-off this commenting system. Here's an example : http://pastebin.com/f649fb19d, remember to choose the syntax language and forever for the posting date. Thanks.

...
written by Eddy, June 08, 2009

@Luke and @evuska: I think you might have missed something along the way, please refer to the posted comments above and make adjustment from them. Thanks.

...
written by toox, June 10, 2009

Hi@all

i have a big problem:
i need this for custom Options. but it doesnt work.
i must have this. anybody have an idea?

...
written by OsO, June 11, 2009

Hi, it works OK. Thanks!!!!!!!!!
A question: I need to create a tab and fill it using a static block. any idea? (excuse my english)

...
written by Krystyna, June 11, 2009

Having problem with reviews section after adding tabs to default theme.
I do not want it to be displayed in tabs but on separate page, just as default setting.

After adding tabs everything works great but: client is not able to add his review after clicking "Add your review" and he is not able to see already posted reviews. After clicking, the page shows info about products with the possibility to go back to product page with tabs; no reviews, no chance to add another.

I've read posts above and Paul had the same problem I guess. Doughold - could you post changes in code you implemented one more time? It seems it is not visible.

Help really needed. Anybody managed to copy with it?

...
written by Eran, June 30, 2009

Hi, I am having the same issue as @Krystyna, @Paul:
after adding the tabs, when you click on the "be the first to review this product" you get a page with some product info but without the option to add a review. in products that were reviewed already it shows the review but also doesnt give the option to add a review.

I also see that @Doughold wrote something to solve this but it's not visible... can someone help?

...
written by Roy, July 09, 2009

Hi,
I wish to add additional tabs in modern theme. How would I do that ?

Regards

Roy

...
written by Eran, July 15, 2009

Hi, can anyone help?
I added the tabs functionality, it works great but now the product review doesn't work. the review form is missing...

...
written by doughold, August 03, 2009

@Eran

block type="review/product_view_list" name="product.info.product_additional_data" as="product_additional_data" template="review/product/view/list.phtml"

TO

block type="review/product_view_list" name="product.info.product_additional_data" as="info_tabs" template="review/product/view/list.phtml"

...
written by Fernando, August 04, 2009

Hello All!

Having problem with image of tabs, it dont appear, any idea?
i make correction on css where:

.tabs { margin-bottom:15px; border-bottom:1px solid #666; background: url('/../images/tabs_bg.gif') repeat-x 0 100% #f2f2f2; }

i correct to

.tabs { margin-bottom:15px; border-bottom:1px solid #666; background: url(../images/tabs_bg.gif) repeat-x 0 100% #f2f2f2; }

but problem persists.

thanks for your help

...
written by vania, August 04, 2009

Eddy, Thank you so much for this great tutorial. It worked seamlessly, but I have a problem with products that were assigned custom options (drop down menu for customers to choose size). The products with custom options return the following error:

Warning: Mage_Core_Block_Template::include(/home/magento/public_html/shop/app/design/frontend/wishgiving/default/template/catalog/product/view/options/wrapper.phtml) [mage-core-block-template.include]: failed to open stream: No such file or directory in /home/magento/public_html/shop/app/code/core/Mage/Core/Block/Template.php on line 144

I know you must be very busy. I'd appreciate any help I can get. Thanks!

...
written by Marco, August 19, 2009

Could I ask some example code to learn how to implement a Tab with sendfriend module inside product detailed view?
I miss some details about ProductId, CategoryId and MaxRecipients variables.

Thank you.

...
written by pusing, August 21, 2009

How do I display Additional Information in the Product Description tab, not as a separate Additional Information tab as displayed above ?

Thanks

...
written by raja, August 29, 2009

I've done everything to the you mentioned above, but I'm only getting the one 'Product Description' tab showing up.

The other tabs aren't showing at all. Not even the titles.
Any ideas?

Could you please help me to solve this problem?

...
written by Miodrag, October 19, 2009

i resolved the send to a friend problem when used in tabbed browsing.
you should hard code the action on the send button.
go to frontend/default/yourtheme/template/sendfriend/send.phtml and replace this line
form action="" method="post" id="product_sendtofriend_form"
with
form action="" method="post" id="product_sendtofriend_form"

http://www.magexpert.ro

...
written by Miodrag, October 19, 2009

this->getUrl('*/*/sendmail' with this->getUrl('sendfriend/*/sendmail'

...
written by gurgelstock, November 27, 2009

This is great, however I am having one problem. With the normal upseel the item count is limited to 4 in catalog.xml (http://pastebin.com/m22933c06) but this wont affect the tabs for some reason. How can I limit the count in the upsell tab? Thanks!

...
written by sterg17, December 04, 2009

Hi All,

Please help me. I actually want to do the reverse!! How can i remove the tabbed browsing from the modern theme?? Any suggestions?

...
written by gurgelstock, December 14, 2009

OK I managed to limit the items by adding it to an extra reference like this:

4
upsell4

...
written by Magento Templates, February 03, 2010

This was excellent! Worked like a charm! Thanks!

...
written by David, February 05, 2010

@FERNANDO

You need to add a height property to the .tabs class like this:

.tabs { height:24px; margin-bottom:15px; .....

Write comment

Adding Tabbed-View to Magento Default Theme

Latest Comment

Most Popular