How To Create A Custom Product Tab In Prestashop

How To Create A Custom Product Tab In Prestashop

To create a custom product tab we will use the following hooks: displayAdminProductsExtra and actionProductUpdate.

  • displayAdminProductsExtra is required to output content into the tab, such as, for instance, a form to load images or some personal custom fields etc.
  • actionProductUpdate – is called when the product is changed, so at this moment we can fetch data from our tab and process it.

In this article we will create a sample module Belvg_Sample to serve as an example for how to create a custom tab and output its content for a product page. You can download the ready-made module at the end of the article.

How to create a custom product tab

How to create a custom product tab

In our tab we will have only element textarea, but, actually, nothing prevents us from creating more complex structures;)

How to create a custom product tab

By default, the name of the new tab coincides with the module name, so, if we hadn’t changed anything our tab would have the name Module Belvg_samplemodule, which is not very good. To fix this, we need to create the config.xml file in the module root folder where the node displayName defines the displayed name

As you see, there is nothing complicated here. You just need to understand the algorithm and follow the instructions:

  1. Create a module and register it in the below hooks: displayAdminProductsExtra and actionProductUpdate. This is a minimum required number of hooks for back-end data output and data saving.
  2. Create a table to store personal data
  3. Create a class to work with this table
  4. Create tpl files to output information in the admin panel and front-end
  5. Change the tab name in config.xml

Here you can download Belvg_Sample module.



65 comments

  1. Yep, i used google, and found an answer :)
    displayProductButtons that the hook :)

    How do you add a css to the modul, one that will be combined in the all.css file?

  2. Hello

    I install BVLG Sample Module in Prestashop 1.6X. The installation of module done successful. Now this module apper in product page in just above footer.

    Is it possible that can i show this module under image area. because information which i need to provide to my client’s for that i need this module to be hook under image area.

    I hope if you can provide me a solution as soon as possible.

    Thank you

  3. It’s working for 1.6 but when you update the status of the product from the product list, the content of this custom tab disappear.

  4. same for me, when you update the product the content of the custom tab disappear

    anyway thanks for the mudole

  5. Sir ,i have a query regarding product availability as per postal code entered by buyer..is there any solution for that?..i’m using prestashop 1.5

  6. Thank you so much. I am learning PS, I cannot figured out how these stuff are working together.

  7. Hi,

    Is it possible to show the product info we have from the tab in the cart summary along with the product name, desc etc?

    Thanks

  8. Do you have a solution for the content of the custom tab being deleted when an update on the product is saved automatically by any chance? I.e. if we change the product quantity, the change is saved automatically and the content of the custom tab is then deleted, the value in the table is deleted. Thanks

  9. Hi, thanks for sharing this tutorial, what I’ve noticed is that on the new tab there isn’t any “save” and “save & stay” buttons, I’m pretty sure they can be inserted there by useing the helper form class, I’ve done some research but there isn’t any example for this very case.
    is there something I’m missing, I don’t like the idea to add them directly into the tpl, because I should copy the same structure from a rendered form, and the look and feel must be checked to match the other buttons… therse should be something more “automagic”.

  10. Hello
    thanks for this very helpful sample.
    but could you help us to manage “FILES” input filelds ?
    for example I wan to ad an extra single Image field to my product or a pdf field or some other attached files.
    I want to use input type=”file” in the form but I can’t get and store the result. could you add an example to manage files ?
    regards

  11. Hi Loule,
    Thank you for your comment. You can get in touch with our Support Team (store@belvg.com) to make an estimation for that kind of customization.

  12. Please, I would like to show the field also on the page product-list.tpl
    Please tell me how to do it?

  13. Hi Antonio! You will need to edit product-list.tpl file and add a function that generates a custom field. Or you may connect to the hook, which is on the list and implement the hook method in a module.

  14. Hello,
    Can you help me to do so? I really do not know how to do it.
    I also tried adding a new hook in the file (belvg_samplemodule)
    But I always get an error.
    If for you, I can also pay for the assistance

  15. Dear guys,

    I tried it out on Prestashop 1.7. It worked one day and the next I got the message that my DB doesn’t exist. Fact is that I have created one static DB manuall with the name ps_unique_item_lang plus one that I’m working with with your file that is called ps_unique_item. Now with add() or insert(), the add-hook tries to generate an entry in a DB ps_unique_item_lang too and not only into ps_unique_item. Can you explain why?

    Best wishes,
    Priska

  16. Dear guys,

    Found it! Language was on TRUE in class file. Sorry for inquiring.

    Best wishes,
    Priska

  17. Hello ,
    The Belvg_Sample module not working in the latest version of prestashop (1.7.2.4).
    The Modules tab that appear in admin side of product,while editing products, along with the other tabs : Basic settings,Quantities etc is also not available in prestashop 1.7.2.4.
    Can you explain why?
    Thank you.

  18. Hello Iryna Kandrashova,
    I tried it out on Prestashop 1.7.1.2 and it worked for me. But when i updated prestashop to 1.7.2.4 it didn’t.
    I want to use the hook DisplayAdminProductsExtra . The modules appear under this hook in positions, but the modules tab and configuration not displaying in admin end of products. Could you please help me?

  19. Anjali, there is no difference in this part between Prestashop 1.7.1.2 and 1.7.2.4.
    Most likely something went wrong after an update. Have you tried to use this way with the clear installation of the version 1.7.2.4?

  20. Hello Alex Simonchik,
    I tried clear installation of prestashop 1.7.2.4 version, but no change!!
    Not even the Modules tab appear while editing product details .However the Belvg_Sample module lists under the DisplayAdminProductsExtra hook in positions.
    What should i do?

  21. Dear Anjali,

    if it works on 1.7.1.2 it should work on 1.7.2.4 as well.
    Probably, there is a bug somewhere. The better option is to check everything once more.
    In case you need any help from our team please drop us an email at store@belvg.com. We’ll be happy to assist.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *