Table Tab Format for Product Description

[jhyun]

Hello everyone,

 

I wasn't recently given management to a website and I wanted to make a few changes on it. More specifically, I want to change the format of the product description. I am using Prestashop 1.5.3!

 

It is currently displayed as the Product Description.PNG, but I would like it to look like the Table Tab Layout.PNG

 

 

Please let me know if there is any way that I can make it look like this format! It is driving me crazy and I could not find any information that could help me with this.

 

Thank you!

[vekia]

you use non default theme? im asking because in default template there should be tabs like you want.

btw. if you want more tabs to insert additional description fields you should use module to define additional tabs on product page

[jhyun]

Hi vekia,

 

Thank you for your swift reply and yes, I am using a non default theme!

 

And for the additional tabs, what module would you recommend that I use?

[vekia]

so if you use non-default theme i suppose, that you will have to edit the product.tpl file a bit, because now your theme doesnt support tabs like you want (second picture)

[jhyun]

Okay, and what exactly would I need to edit/add in the product.tpl file?

 

I tried looking through it myself, but I started to get a little overwhelmed hahaha. I pasted the code below (hopefully it's the correct section).

 

<!-- description and features -->
{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments)}
<div class="more_info_inner">
 {if $product->description}<h3>{l s='More info'}</h3>{/if}

{if isset($product) && $product->description}
 <!-- full description -->
 <div id="idTab1"><div>{$product->description}</div></div>
{/if}
 </div>
<div class="more_info_inner2">
{if $features}<h3>{l s='Data sheet'}</h3>{/if}

{if isset($features) && $features}

 <ul id="idTab22" class="bullet">
 {foreach from=$features item=feature}
		{if isset($feature.value)}
   <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
		{/if}
 {/foreach}
 </ul>
{/if}
</div>
<div class="more_info_inner3">
 {if $attachments}<h3>{l s='Download'}</h3>{/if}

{if isset($attachments) && $attachments}
 <ul id="idTab9" class="bullet">
 {foreach from=$attachments item=attachment}
  <li><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")}">{$attachment.name|escape:'htmlall':'UTF-8'}</a><br />{$attachment.description|escape:'htmlall':'UTF-8'}</li>
 {/foreach}
 </ul>
{/if}
</div>
<div class="more_info_inner4">
{if isset($accessories) AND $accessories}<h3>{l s='Accessories'}</a></h3>{/if}
{if isset($accessories) AND $accessories}

[vekia]

this code is only for tabs contetns, not for tabs headings.

i suppose that you will have to edit also css styles for them.

[jhyun]

So I would have to edit both the global.css and product.tpl? and where in the product.tpl do I find the code for tabs headings?

 

Thanks!

 

PS: Sorry for all these questions, I am new to this whole coding thing

Edited August 30, 2013 by jhyun (see edit history)

[vekia]

your website is online? if so, can you please share the url? it will be much easier to find proper code

[jhyun]

Hey vekia,

 

Sorry for the late reply! Here is the URL:

 

http://www.vietafashion.com/satchels/233-hilary.html