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.



56 comments

  1. Prestashop version 1.5.6 –
    There is a Customize tab already available and would be perfect if it would except the type of text that I need. Unfortunately, it throws an error. No code, just an error.
    It excepts a short sentence, but what I need is a copy of a customization for a wedding invitation and this is what it looks like…
    1165-19-c24Traditional – Parents InvitingA[bride parent names] along with[groom parent names]request the honour of your presenceat the marriage of their children[bride name]- and -[groom name]on [date][year]at [ceremony time][ceremony location][ceremony city], [ceremony prov/state]Cocktails, Dinner, and Dancingat [reception time]at [reception location][reception address], [reception city], [reception prov/state]…
    I do not need any code interpretation. Just need this to post as text, exactly like it is.
    Am at a loss. do not know what to do.
    Can you help me?

  2. Jason,

    Report customization is quite a challenging task for an unexperienced user. We will try to make a post where will highlight general steps of this process, but still it is better to leave this for professionals.

  3. Michelle,

    Sorry did not quite understand what you mean: did you follow the instruction but something went wrong?

  4. Hi.

    I need one clarification, i read the comments and the text but i am not a programmer and my knowledge is limitated.

    I need to add 2 extra fields, basically one is the “Manufacturers URL” where i put the link to the brand product page URL and in the product frontpage there is a text “Manufacturers Page” near the reference of the product where the client can click and open the product page in a new tab.

    Also i want to have a field that is SRPr (Recommended Street Retail price), that appears also near the reference.

    Questions:

    1) Can i do this with this Module? Maybe making 2 instalations and changing something in the code to do it? Where in the code?
    2) Can i Hook the information near the reference and make it non editable text, has the modules when installs becomes editable by the user.

  5. Nelson,

    This is not exactly like this, because it is just an example. So, if you want to add 2 fields you can use this module as a basis. But in your case you also need import and ERP which makes the process more difficult.

  6. Hello Alex,

    Why not using hookActionProductSave ?
    With this hook, you can add errors to the controller ($this->context->controller->errors[])

    +
    @prestarocket

  7. Prestarocket,

    Thanks for the advice! Using method hookActionProductSave() is actually better. We will take this into account while adapting this article for Prestashop v1.6.

  8. That’s for this modul, it’s great just what i needed. I wanted to show “shipping starting from”

    I have already changed the hook to the right column, but how do you post it right under the price? Can you do that?

  9. 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?

  10. 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

  11. 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.

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

    anyway thanks for the mudole

  13. 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

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

  15. 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

  16. 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

  17. 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”.

  18. 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

  19. 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.

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

  21. 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.

  22. 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

Post a new comment

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