[tutorial] Full width product tabs

Standard classic theme in PrestaShop 1.7 displays tabs on the right  hand side (see screenshot), where is not enough space to display more tabs. In addition this place looks weird, especially if we have more informations to show. Theme looks distorted and not well. In this guide i want to show you how to move tabs below and make it full width like on screenshot below. Just for better appearance purposes.

full width tabs in PrestaShop 1.7 classic theme

full width tabs in prestashop 1.7 classic theme

 

Tutorial for PrestaShop < v1.7.0.5 (for newest version scroll down)

How to make tabs section full width?

To make this section appear as a full width block we have to alter one theme file. It is located in theme directory: /themes/classic/templates/catalog/product.tpl. Please open this file for edit purposes.Near the line 163 you should see the code that is responsible for appearance of the tabs. You can find this code below:

{block name='product_tabs'}
    <div class="tabs">
        <ul class="nav nav-tabs">
            {if $product.description}
                <li class="nav-item">
                    <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
                        {l s='Description' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            <li class="nav-item">
                <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
                    {l s='Product Details' d='Shop.Theme.Catalog'}
                </a>
            </li>
            {if $product.attachments}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#attachments">
                        {l s='Attachments' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            {foreach from=$product.extraContent item=extra key=extraKey}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
                </li>
            {/foreach}

            {hook h='ProductTab'}
        </ul>

        <div class="tab-content" id="tab-content">
            <div class="tab-pane fade in{if $product.description} active{/if}" id="description">
                {block name='product_description'}
                    <div class="product-description">{$product.description nofilter}</div>
                {/block}
            </div>

            {block name='product_details'}
                {include file='catalog/_partials/product-details.tpl'}
            {/block}

            {block name='product_attachments'}
                {if $product.attachments}
                    <div class="tab-pane fade in" id="attachments">
                        <section class="product-attachments">
                            <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
                            {foreach from=$product.attachments item=attachment}
                                <div class="attachment">
                                    <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                                    <p>{$attachment.description}</p
                                    <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                                        {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                                    </a>
                                </div>
                            {/foreach}
                        </section>
                    </div>
                {/if}
            {/block}

            {foreach from=$product.extraContent item=extra key=extraKey}
                <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
                {$extra.content nofilter}
                </div>
            {/foreach}

            {hook h='ProductTabContent'}
        </div>
    </div>
{/block}

 

You may not have there highlighted lines because these lines i added in enable old dispalyProductTab hook in PrestaShop 1.7 tutorial. Please copy this code to clipboard (ctrl+c) and remove it from this position. Just erase it. Then scroll product.tpl file edit window a little down, you will see there code that adds two blocks to your shop:

{block name='product_accessories'}
 {if $accessories}
  <section class="product-accessories clearfix">
   <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
   <div class="products">
    {foreach from=$accessories item="product_accessory"}
     {block name='product_miniature'}
      {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
     {/block}
    {/foreach}
   </div>
  </section>
 {/if}
{/block}

Right before this code please paste code that you copied before (code that is responsible for block with tabs). After save your tabs block will be full width. That's all. In the next guide i will show you how easily you can add other tabs to this section, exactly as it was before in older PrestaShop 1.6 or 1.5.

 

If you're looking for module that allows to create additional product tabs in new version of PS engine you can check our extra tabs for PrestaShop 1.7

 

 

 

 

 

 

Tutorial for PrestaShop > v1.7.0.5

How to make tabs section full width?

To make this section appear as a full width block we have to alter one theme file. It is located in theme directory: /themes/classic/templates/catalog/product.tpl. Please open this file for edit purposes.Near the line 163 you should see the code that is responsible for appearance of the tabs. You can find this code below:

{block name='product_tabs'}
    <div class="tabs">
        <ul class="nav nav-tabs">
            {if $product.description}
                <li class="nav-item">
                    <a class="nav-link{if $product.description} active{/if}" data-toggle="tab" href="#description">
                        {l s='Description' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            <li class="nav-item">
                <a class="nav-link{if !$product.description} active{/if}" data-toggle="tab" href="#product-details">
                    {l s='Product Details' d='Shop.Theme.Catalog'}
                </a>
            </li>
            {if $product.attachments}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#attachments">
                        {l s='Attachments' d='Shop.Theme.Catalog'}
                    </a>
                </li>
            {/if}
            {foreach from=$product.extraContent item=extra key=extraKey}
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#extra-{$extraKey}">{$extra.title}</a>
                </li>
            {/foreach}
        </ul>

        <div class="tab-content" id="tab-content">
            <div class="tab-pane fade in{if $product.description} active{/if}" id="description">
                {block name='product_description'}
                    <div class="product-description">{$product.description nofilter}</div>
                {/block}
            </div>

            {block name='product_details'}
                {include file='catalog/_partials/product-details.tpl'}
            {/block}

            {block name='product_attachments'}
                {if $product.attachments}
                    <div class="tab-pane fade in" id="attachments">
                        <section class="product-attachments">
                            <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
                            {foreach from=$product.attachments item=attachment}
                                <div class="attachment">
                                    <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
                                    <p>{$attachment.description}</p
                                    <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
                                        {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
                                    </a>
                                </div>
                            {/foreach}
                        </section>
                    </div>
                {/if}
            {/block}

            {foreach from=$product.extraContent item=extra key=extraKey}
            <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
            {$extra.content nofilter}
        </div>
        {/foreach}
    </div>
{/block}

Just cut the code from current position (ctrl+x). Then scroll product.tpl file edit window a little down, you will see there code that adds two blocks to your shop:

{block name='product_accessories'}
 {if $accessories}
  <section class="product-accessories clearfix">
   <h3 class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</h3>
   <div class="products">
    {foreach from=$accessories item="product_accessory"}
     {block name='product_miniature'}
      {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
     {/block}
    {/foreach}
   </div>
  </section>
 {/if}
{/block}

Right before this code please paste code that you copied before (code that is responsible for block with tabs). After save your tabs block will be full width. That's all. In the next guide i will show you how easily you can add other tabs to this section, exactly as it was before in older PrestaShop 1.6 or 1.5.

If you're looking for module that allows to create additional product tabs in new version of PS engine you can check our extra tabs for PrestaShop 1.7

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim