Wednesday , September 20 2017
Home >> All tutorial >> Instruction on how to add custom tabs in Magento Product Page

Instruction on how to add custom tabs in Magento Product Page

Hi guys,

In today post, I will give you a detailed instruction on how to add custom tabs to Magento Product Page which is one of the most important part of your store.

magento-custom-product-tabs

You can find tons of Magento templates with tabs on the product view page and we are going to tell you the easiest way to add them there. All examples are applicable to the default Magento theme, but with practice you can use following methods to customize your own theme.

Step 1: 

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="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="pricestemplate="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:

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
templatecatalog/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.

Step 2: 

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

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:

/* 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 4: 

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:

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

Over to you

That’s all about adding custom tabs to Magento Product Page. Hope that’s useful for you!

We also contribute great content of Magento Tutorial for Magento 1.x.

DON'T MISS THE CHANCE!

magento tutorial

About Champ

Leave a Reply

Your email address will not be published. Required fields are marked *