How to Create a Custom Tab in the Back Office Product Page in PrestaShop

How to Create a Custom Tab in the Back Office Product Page in PrestaShop

PrestaShop, with its powerful and flexible framework, allows developers to customize various aspects of the platform to meet specific business requirements. One such customization is adding a custom tab in the back office product page. 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:

  1. Using Symfony components.
  2. Using displayAdminProductsExtra Hook

Method 1:

This tutorial is applicable for PrestaShop version 8.1 and above, utilizing 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. Inside this folder, create the kbcustommodule.php file, which will contain the main class for your module. The module class initializes the module and registers the required hooks.

Here’s an example of the kdcustommodule.php file:

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-1-Create-Your-Module

Run the command composer dump-autoload in your module’s root directory to enable namespace autoloading.

Step 2: Define Services

Create a services.yml file under the config directory of your module (kbcustommodule/config/services.yml). This file defines the Symfony services required for form customization.

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-2-Define-Services

Step 3: Create the Custom Tab 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.

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-3-Create-the-Custom-Tab-Form-Type

Step 4: Create the ProductFormModifier Class

The ProductFormModifier class defines how the custom tab integrates with the existing product form.

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-4-Create-the-ProductFormModifier-Class

Final Step: Install and Test

  1. Install the module via the back office or manually place it in the modules directory and enable it.
  2. Navigate to the back office product page. You should see a new tab labeled “Custom Tab” with a field labeled “Custom Field.”
  3. Test the functionality by adding data to the custom field and ensuring it saves correctly.

After successfully installation of the above module. You will get the result as follows.

Knowband Prestashop Google Tag Manager

Integrate Google Tag Manager with Prestashop

SHOP NOW

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

 

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-2-Define-the-Module-Class

Step 3: Create the Template File

In the views/templates/admin/products/custom_tab.tpl file, define the HTML and content for your custom tab.

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-3-Create-the-Template-File

Step 4: Save the Data

To save the custom data, use the actionAdminControllerSetMedia hook along with JavaScript or PHP. Alternatively, you can use the actionProductUpdate hook in PHP.

Example in Kbcustommodule.php:

Create a Custom Tab in the Back Office Product Page in PrestaShop-Step-4-Save-the-Data

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 installation of the above module. You will get the result as follows

 

For further assistance, feel free to reach out or leave a comment below. Or you can also reach out to us on Knowband Helpdesk.

Gabriel

We are professionals in the eCommerce industry, specializing in plugin development. With years of experience, We provide the best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also offer custom module development and customization services for websites and modules. Our team remains at the forefront of industry trends, delivering cutting-edge solutions to enhance eCommerce website functionality. With a customer-centric approach, our company is trusted partner for eCommerce plugin solutions.

Leave a Reply

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