How To Create A Custom Product Tab In Prestashop

Feb 19, 2013

4683 Alex Simonchik

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.

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



Igor Dragun

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Igor


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

Add a new block to your store’s homepage with this quality Home Tabs extension.

product_tabs

Product Tabs

Take your online store to the next level with BelVG module

Download here
Igor Dragun

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Igor

70 Comments

  1. Hi jLuis,
    Unfortunately, we lost all the archives and backups due to server issues. Sorry, now there is nothing we can do to help you.

  2. Hi @Alex Simonchik ,
    great thanks for the tutorial , it seems intresting , just when i can’t dowload the module .
    How can i dowload it ??
    thanks

  3. Hi Stimu,

    Unfortunately, we had some server issues and all the archives got lost. Sorry, but there is nothing we can do to help you now.

    Regards

  4. Hello for all,
    I can’t download this module,
    there is one who can help me or send me this compressed version of this module?

    thanks for all

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

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

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

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

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

  10. Dear guys,

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

    Best wishes,
    Priska

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

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

  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. Please, I would like to show the field also on the page product-list.tpl
    Please tell me how to do it?

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

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

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

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

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

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

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

    anyway thanks for the mudole

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

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

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

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

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

  28. Hello Alex,

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

    +
    @prestarocket

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

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

  31. Michelle,

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

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

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

  34. Alex,

    Thank you for this wonderful tutorial. I have the same question with Tom, if I wanna import many products with this customed field, how do I modify the importing controller(s) to include this field?
    Thank you so much.

  35. kahn,

    Thank you for your comment. You need to create one more field in the database (in order to save the second field) and duplicate the logic for it to be saved/displayed on the front end.

  36. Its really very nice tutorial for beginners like me :)

    I want to know one more thing, what I should do if I have to add more than 1 textarea?

  37. Tom,

    Here you can read more about adding new attributes.

    To be able to use these fields in standard export you would need to considerably customize the export module. Which, I think, is a good topic for my next blog post, so, please, stay tuned))

  38. As well as the information of the tab/mobule being searchable, I cant see it within the exported CSV… I need to be able to import large amounts of products with these additional fields/information… is this possible ?

  39. This looks decent! How does this work within the search… I cant see a “weight” option within the “Preferences > search” for this module

    Thanks

  40. Hi Alex,

    Thanks a lot for this. It’s very clear and definitely helpful !

    Now, is it possible to upload an image (just one, for page layout) ?

    Thanks again.

  41. Alberto,

    BELVG_SAMPLE_UNIQ – is the index name for the filed id_product in the database. It is recommended to add indexes for the table fields which will be involved into the JOIN operations.
    !Configuration::updateValue(‘sample_module_textarea’, ”) OR – this construction means that if the constant ‘sample_module_textarea’ in the field Configuration is not updated, then the installation of the module will fail. Configuration::updateValue – updates the variable in the table Configuration

  42. Ritesh,

    To display content on the homepage use the hook Home. You can take the standard module Homefeatured as an example.

  43. Hi !

    First, thanks for your tuto ! it is really helpful ;)
    Second, I am trying to modify the module a bit, in order to add some more functionality, however, for the moment I am not able to have a succesfull installation after I make the changes…

    I wanted to ask you some stuff about your code:
    – For what is this: UNIQUE BELVG_SAMPLE_UNIQ ( id_product )
    – and this ? !Configuration::updateValue(‘sample_module_textarea’, ”) OR

    Thanks in advance

  44. George,

    The answer to your question is actually what the article is exactly about. Would you kindly clarify what difficulties you encounter?

  45. Thanks thanks a lot for your post. It really saved my a lot of time and helped to understand prestashop better.

    Congrats!

  46. Boxy,

    Please, follow our blog, in the nearest future we will describe how to add multi-languages to the fields of this tab. unfortunately, it is impossible to briefly describe this process here in the comments since it requires remaking the module and database.

  47. I was wondering. suppose I have a current module installed in the modules. suppose the module name is abc and the mail file is abc.php. in that I make a function
    public function hookDisplayAdminProductsExtra($params)
    {
    $this->_html .= ‘

    bla
    bla
    bla

    }

    and I have a function xyz()

    why dosent it update in the tab but this will work in the module page is I go through modules.

    I mean why follow so complicated procedure just to update values in database.

  48. Hi Alex,
    Thanks for this very nice article, everything works as expected.
    I’m just wondering how to make this module multi-languages.
    What I mean is having the flags displayed beside the text area in the BO so we can provide a different text on the FO depending on the language of the user.
    Could you give me a hint?
    If it’s to much to ask, I’ll understand, you’ve already been very helpful.
    Thanks again

  49. As you can see on the screen, the archive from the article worked for us. We installed the module on the 1.5.3.1 PS version.

    This screen indicates that there were no problems with the front end.

    So your problem is a real head-scratcher :) Would you kindly send your FTP and admin accesses to support@belvg.com so that we could resolve your issue?

  50. I tried installing this sample module on 1.5.3.1 and though it installed successfuly – when I go to the ‘catalog’ and edit a product or try add a new product – the tab isnt there?

  51. Hey Alex.

    Thanks a lot for this. Its amazing, it really helped me to understand how this works.

    Now I have to figure out how to display the tab info in a tab on the FO products page. I’d really appreciate if you can give me any guideline…

    Best regards.

  52. Hello Michael,

    Thanks a lot for your comment.

    What Prestashop version do you use?

  53. Hey Alex,

    Thanks for the article. It’s definitely helpful to get an understanding of how all the works. I did try the example as well as install the sample module provided, but the new tabs did not appear.

    If I override the AdminProductsController and manually add the tabs to the ‘$this->available_tabs’ array, the tabs show up.

    However, by creating a module and registering the hook ‘displayAdminProductsExtra’, the new tab doesn’t appear.

    Did you have any further ideas on what could be preventing this from working.

    Thanks.

    Great website by the way, very very helpful.

Post a new comment

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