PrestaShop, with its powerful and flexible framework, allows developers to customize various aspects of the platform to meet specific business needs. One such customization is adding a custom tab in the product page of the back office. In this blog, we will walk through the step-by-step process to achieve this by creating a sample module called kbcustommodule.
We can create the custom tab in the back office product page in two ways:
- Using Symfony components.
- Using the displayAdminProductsExtra hook
Method 1:
This tutorial is applicable to PrestaShop version 8.1 and above, using Symfony components.
Step 1: Create your module
kbcustommodule/ |– composer.json |– config/ | |– services.yml |– src/ | |– Form/ | | |– Modifier/ | | | |– ProductFormModifier.php | | |– Type/ | | | |– CustomTabType.php |– kbcustommodule.php Start by creating a folder named kbcustommodule under the modules directory of your PrestaShop installation. In this folder, create the kbcustommodule.php file, which will contain the main class of your module. The module class initializes the module and registers the required hooks. Here is an example of the kdcustommodule.php file:
Run the composer dump-autoload command in your module’s root directory to enable namespace autoloading.
Step 2: Define the services
Create a services.yml file under your module’s config directory (kbcustommodule/config/services.yml). This file defines the Symfony services needed to customize the form.
Step 3: Create the Custom Tabbed Form Type
Create a CustomTabType class in the src/Form/Type folder of your module. This class defines the fields that will appear in the custom tab.
Step 4: Create the ProductForm classEdit
The ProductFormModifier class defines how the custom tab integrates with the existing product form.
Final step: install and test
- Install the module via the back office or manually place it in the modules directory and activate it.
- Navigate to the product page in the back office. You should see a new tab called “Custom Tab” with a field called “Custom Field”.
- Test the functionality by adding data to the custom field and ensuring it is saved correctly.
After successfully installing the above module, you will get the following result.
Method 2:
The displayAdminProductsExtra hook allows you to add custom content or tabs to the product edit page in the Back Office. This method avoids the complexity of defining Symfony services and is easier for developers who are not familiar with Symfony.
Step 1: Create the module
Start by creating a basic module structure. For example: Kbcustommodule/ |– config/ |– translations/ |– views/ | |– templates/ | |– admin/ | |– products/ | |– custom_tab.tpl |– Kbcustommodule.php
Step 2: Define the module class
In the Kbcustommodule.php file, define your module and register the displayAdminProductsExtra hook.
Step 3: Create the template file
In the views/templates/admin/products/custom_tab.tpl file, define the HTML code and content of your custom tab.
Step 4: Backup Data
To save custom data, use the actionAdminControllerSetMedia hook with JavaScript or PHP. You can also use the actionProductUpdate hook in PHP. Example in Kbcustommodule.php:
Step 5: Add the field to the database
Modify the database to store your custom data. For example: ———————————————————————— ALTER TABLE ps_product ADD custom_field TEXT NULL; ————————————————————————– After successfully installing the above module. You will get the following result For further assistance, feel free to contact us or leave a comment below. You can also contact us on Knowband Help Desk .
