One of the requests we have seen a lot on the forum and through emails is adding tabs to the thirty bees theme product pages. Some users do not like the standard layout of sections and prefer the tabs better. So we decided to write a quick tutorial on how to remove the sections and replace them with tabs.

Getting Started

For this tutorial you are going to have to have a basic understand of how to ftp into your site and edit theme files. Below is the area on the product page we are talking about.

thirty bees sections

The first thing you will want to do is ftp into your site and navigate to the /themes/community-theme-default/ directory. Then you will want to open the product.tpl file.  You want to find line 417 in version 1.0.1 of the theme, that is where it starts. If you are using a different theme version look for this line

{if !empty($features)}

You will want to delete down to line 587, it should be the second of two ending if statements out of a group of three.  Then you will want to paste the code below in place of what you just erased.

<div id="more_info_block" class="clear">
    <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
        {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
        {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
        {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab3">{l s='Download'}</a></li>{/if}
        {if isset($packItems) && $packItems|@count > 0}<li><a id="more_info_tab_pack" href="#blockpack">{l s='Pack Content'}</a></li>{/if}
        {if isset($accessories) AND $accessories}<li><a href="#idTabz4">{l s='Accessories'}</a></li>{/if}
        {if isset($product) && $product->customizable}<li><a href="#idTab15">{l s='Product customization'}</a></li>{/if}
        {$HOOK_PRODUCT_TAB}
    </ul>
     
    <div id="more_info_sheets" class="sheets align_justify">
        {if isset($product) && $product->description}
            <!-- More info -->
            <div id="idTab1" class="rte">
                {$product->description}
            </div>
            <!--end  More info -->
        {/if}
         
         
        {if isset($features) && $features}
            <!-- Data sheet -->
            <div id="idTab2" class="rte">
                <table class="table-data-sheet">
                    {foreach from=$features item=feature}
                    <tr class="{cycle values="odd,even"}">
                        {if isset($feature.value)}
                        <td>{$feature.name|escape:'html':'UTF-8'}</td>
                        <td>{$feature.value|escape:'html':'UTF-8'}</td>
                        {/if}
                    </tr>
                    {/foreach}
                </table>
            </div>
            <!--end Data sheet -->
        {/if}
         
         
        {if isset($attachments) && $attachments}
            <!--Download -->
            <div id="idTab3" class="page-product-box">
                {foreach from=$attachments item=attachment name=attachements}
                    {if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}
                        <div class="col-lg-4">
                            <h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>
                            <p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>
                            <a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">
                                <i class="icon-download"></i>
                                {l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})
                            </a>
                            <hr />
                        </div>
                    {if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}
                {/foreach}
            </div>
            <!--end Download -->
        {/if}
         
         
                 {if isset($accessories) && $accessories}
                   <!--Accessories -->
                     <div id="idTabz4" class="page-product-box">
                       {include file="$tpl_dir./product-list.tpl" products=$accessories}
                     </div>
                   <!--end Accessories -->
                 {/if}
         
         
        {if isset($packItems) && $packItems|@count > 0}
              <div id="blockpack">
                {include file="$tpl_dir./product-list.tpl" products=$packItems}
              </div>
        {/if}
         
         
        {if isset($product) && $product->customizable}
            <!--Customization -->
            <div id="idTab15" class="page-product-box">
                <!-- Customizable products -->
                <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
                    <p class="infoCustomizable">
                        {l s='After saving your customized product, remember to add it to your cart.'}
                        {if $product->uploadable_files}
                        <br />
                        {l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
                    </p>
                    {if $product->uploadable_files|intval}
                        <div class="customizableProductsFile">
                            <h5 class="product-heading-h5">{l s='Pictures'}</h5>
                            <ul id="uploadable_files" class="clearfix">
                                {counter start=0 assign='customizationField'}
                                {foreach from=$customizationFields item='field' name='customizationFields'}
                                    {if $field.type == 0}
                                        <li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
                                            {if isset($pictures.$key)}
                                                <div class="customizationUploadBrowse">
                                                    <img src="{$pic_dir}{$pictures.$key}_small" alt="" />
                                                        <a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
                                                            <img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
                                                        </a>
                                                </div>
                                            {/if}
                                            <div class="customizationUploadBrowse form-group">
                                                <label class="customizationUploadBrowseDescription">
                                                    {if !empty($field.name)}
                                                        {$field.name}
                                                    {else}
                                                        {l s='Please select an image file from your computer'}
                                                    {/if}
                                                    {if $field.required}<sup>*</sup>{/if}
                                                </label>
                                                <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
                                            </div>
                                        </li>
                                        {counter}
                                    {/if}
                                {/foreach}
                            </ul>
                        </div>
                    {/if}
                    {if $product->text_fields|intval}
                        <div class="customizableProductsText">
                            <h5 class="product-heading-h5">{l s='Text'}</h5>
                            <ul id="text_fields">
                            {counter start=0 assign='customizationField'}
                            {foreach from=$customizationFields item='field' name='customizationFields'}
                                {if $field.type == 1}
                                    <li class="customizationUploadLine{if $field.required} required{/if}">
                                        <label for ="textField{$customizationField}">
                                            {assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
                                            {if !empty($field.name)}
                                                {$field.name}
                                            {/if}
                                            {if $field.required}<sup>*</sup>{/if}
                                        </label>
                                        <textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
                                            {if isset($textFields.$key)}
                                                {$textFields.$key|stripslashes}
                                            {/if}
                                        {/strip}</textarea>
                                    </li>
                                    {counter}
                                {/if}
                            {/foreach}
                            </ul>
                        </div>
                    {/if}
                    <p id="customizedDatas">
                        <input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
                        <input type="hidden" name="submitCustomizedDatas" value="1" />
                        <button class="button btn btn-default button button-small" name="saveCustomization">
                            <span>{l s='Save'}</span>
                        </button>
                        <span id="ajax-loader" class="unvisible">
                            <img src="{$img_ps_dir}loader.gif" alt="loader" />
                        </span>
                    </p>
                </form>
                <p class="clear required"><sup>*</sup> {l s='required fields'}</p>
            </div>
            <!--end Customization -->
        {/if}
     
        <!-- extra tabs -->
        {$HOOK_PRODUCT_TAB_CONTENT}
        <!-- END extra tabs -->
    </div>
   {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

Next you will need to navigate to the css directory and edit your product.css file. You can simply paste the code below into the bottom of the file.

.idTabs {
list-style-type:none;
margin-top:20px;
}

ul.idTabs li {
float:left;
margin-right:-1px;
}

.idTabs a {
color:#337ab7;
text-transform:uppercase;
font-family:"Open Sans",sans-serif;
font-weight:600;
font-size:18px;
line-height:60px;
position:relative;
border:1px solid #d6d4d4;
background:#fbfbfb;
margin:0 0 20px;
padding:14px 20px 17px;
}

#more_info_sheets .product_desc .block_description {
float:left;
margin-left:10px;
width:420px;
}

#more_info_sheets .product_desc .clear_product_desc {
clear:both;
height:0;
line-height:0;
}

.idTabs .selected,#header .sf-menu > li.sfHover > a,#header .sf-menu > li > a:hover,#header .sf-menu > li.sfHoverForce > a {
color:#fff;
background: #337ab7;
border-bottom-color: #337ab7;
text-decoration:none;
}

#more_info_sheets .rte {
    padding:10px!important;
}

#more_info_sheets .bx-wrapper {
  width:100%!important;
  max-width:none!important;
  display:block;
}

Save an upload both files and your tabs should be working and looking like the image below.

thirty bees tabs

I have even put a gist together of the two complete files so you can copy the whole files over the ones in your theme to make the tabs work. You can view the gist here. 

Good luck and happy editing.