How to reposition the product details and description tab?

[MrWade]

Yes, I am using the classic them v. 8.2.3 what I am wanting to do I want to reposition the product details/Description tab from the bottom to under the price. Is that possible?

Wade

[Prestashop Addict]

Yes if you have skills with templating.

[MrWade]

Just now, Prestashop Addict said:

Yes if you have skills with templating.

How can I do that?

[Prestashop Addict]

Are you a developer? Do you have HTML/Smarty skills?

[MrWade]

Just now, Prestashop Addict said:

Are you a developer? Do you have HTML/Smarty skills?

No, I am not a developer.

[Andrei H]

Hello,

You need to make the changes in the following file: themes/classic/templates/catalog/product.tpl

You would need to take the entire code from line 141 until line 223 (basically the entire product_tabs block) and move it on line 82, below the product_prices block. Check the GitHub links for reference

You might need to add some CSS as well, to add a bottom margin to the tabs

[MrWade]

How can I hide the product details tab?

[wepresta]

1 hour ago, MrWade said:

How can I hide the product details tab?

Just ask ChatGPT... 

[MrWade]

7 hours ago, wepresta said:

Just ask ChatGPT... 

Ok, I moved it. Another question is it possible to have "Product Details" tab contents under "Description" tab instead of its own tab?

[Andrei H]

Hello,

Do you want the "Product Details" tab contents to replace the content of the "Description" tab? Or to be merged with it and have the content of both tabs under the "Description" tab?

[MrWade]

7 hours ago, Andrei H said:

Hello,

Do you want the "Product Details" tab contents to replace the content of the "Description" tab? Or to be merged with it and have the content of both tabs under the "Description" tab?

I want to merge them together. I was planning to put the product details below the description in the description tab.

[Andrei H]

Hello, 

These are the necessary changes:

In themes/classic/templates/catalog/_partials/product-details.tpl:

Remove {if $product.description} and the corresponding {/if}. Keep the li element that was inside it.

Remove the 'Product Details' li element

Move the product_details block below the the product_description one

This is how it should look in the end:

{block name='product_tabs'}
    <div class="tabs" style="margin-bottom: 40px;">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a
              class="nav-link active js-product-nav-active"
              data-toggle="tab"
              href="#description"
              role="tab"
              aria-controls="description"
              aria-selected="true">{l s='Description' d='Shop.Theme.Catalog'}</a>
        </li>
        {if $product.attachments}
          <li class="nav-item">
            <a
              class="nav-link"
              data-toggle="tab"
              href="#attachments"
              role="tab"
              aria-controls="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}"
              role="tab"
              aria-controls="extra-{$extraKey}">{$extra.title}</a>
          </li>
        {/foreach}
      </ul>

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

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

        {block name='product_attachments'}
          {if $product.attachments}
          <div class="tab-pane fade in" id="attachments" role="tabpanel">
              <section class="product-attachments">
                <p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p>
                {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}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
          {$extra.content nofilter}
        </div>
        {/foreach}
    </div>
  </div>
{/block}

Then, in themes/classic/templates/catalog/_partials/product-details.tpl, replace 

<div class="js-product-details tab-pane fade{if !$product.description} in active{/if}"

with

<div class="js-product-details tab-pane fade in active"

Check the attached screenshot to see how the result should look like

Edited 11 hours ago by Andrei H (see edit history)

[Andrei H]

Hello,

My bad, I just realized the above code had a bug. If there was no product description, the tab would not be selected.

I edited the code above and now the tab will be selected when there is no description as well

Edited 11 hours ago by Andrei H (see edit history)