Bring Back Prestashop Product Page Dynamic Tabs in Default Theme for v. 1.6.1.4

Prestashop 1.6.1.4 default theme doesn’t have dynamic tabs anymore. Previous Prestashop versions used to have them on product page. Don’t know why they have removed them…  But the JavaScript that made them work is still present in the theme, and is used in some other sections of the site. Though looks like it’s not the latest version of famous idTabs.  Here’s how to put them back to your site.

Default static product page tabs for this version look like this:

Static Prestashop Tabs

If you have exactly this version of Prestashop, just take my product.tpl code from GitHub and overwrite product.tpl page located in your theme folder. For previous versions create similar code around tab sections and tabs ul on top. It will work.

Add my CSS and modify it to your needs, colors, font sizes, changes for responsive layouts etc.

I hide titles of tabs content in CSS, unhide if needed.

Also you’ll have to translate “Reviews” word from Translations > YourTheme inside Prestashop Back-End, if you have more languages enabled.

Here’s what you gonna get.

Dynamic Tabs for Prestashop 1.6.1.4

Share:
This entry was posted in PrestaShop and tagged . Bookmark the permalink.

8 Responses to Bring Back Prestashop Product Page Dynamic Tabs in Default Theme for v. 1.6.1.4

  1. Sean says:

    Hello, Thanks for a great tutorial,

    I followed this tutorial after trying many others on the PS forums and this one actually worked!

    However I found a little bug going from the original tpl to your modified tpl and its something that changed with my previous ps forum attempts too.

    Basically, The product price jumps from around 29px down to about 13px and i am a little unsure how to fix this?.. I’ve looked at the CSS however any changes made to font-size have an impact elsewhere on the website. so I imagine it has something to do with the tpl?

    when I inspect the price “#span_our_price_display” I checked the tpl and replaced the section with my original tpl but that hasnt solved the issue either.

    when i inspect view, this is what i see in the styles

    original

    global.css:2
    element.style {
    }
    media=”all”
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;

    after

    global.css:5817
    element.style {
    }
    media=”all”
    .price {
    font-size: 13px;
    color: #777777;
    white-space: nowrap;

    if you can help solve this i would be very grateful 🙂

  2. sean says:

    I eventually found the change i needed to make.

    {convertPrice price=$productPrice|floatval}

    should be

    {convertPrice price=$productPrice|floatval}

    class=”price” seems to override the CSS and once removed it is back to normal!

  3. Amelia says:

    Hi, Thanks for a quick tutorial. actually this feature was available in old versions of PrestaShop but sadly removed from the newer one. I tried many methods to create tabs on product page but they all not proved well, so have to buy a module for this purpose http://bit.ly/1TZrxNj . Please let me know that how much tabs can be created using this trick?

  4. Naeem says:

    When i open any product the save button continuously spinning and not stop. Please guide how to solve this problem.

Leave a Reply

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