{"id":442588,"date":"2024-05-22T13:28:03","date_gmt":"2024-05-22T13:28:03","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=442588"},"modified":"2024-05-22T13:32:01","modified_gmt":"2024-05-22T13:32:01","slug":"how-to-create-custom-tab-in-back-office-product-page","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/","title":{"rendered":"How to create custom tab in back office product page"},"content":{"rendered":"\n

In this blog, we are about to learn, how to create custom tab on the back office product page. So, we will define our own Symfony services in the module and will use existing components.<\/p>\n\n\n\n

You can explore our PrestaShop Development Services<\/a> and a large range of quality PrestaShop Modules<\/a>.<\/p>\n\n\n\n

Here, we are showing the process step by step with an example module \u2018wktestmodule\u2018<\/p>\n\n\n\n

First, create a module, with a composer.json<\/a><\/code> file as per your requirement.<\/p>\n\n\n\n

Step 1:<\/strong> Create the module class<\/p>\n\n\n\n

Here, we have created the module class file \u201cwktestmodule\/wktestmodule.php\u201c<\/strong><\/p>\n\n\n\n

In this class, we are initializing the module, product controllers tab, and form fields.<\/p>\n\n\n\n

declare(strict_types=1);\n\nuse PrestaShop\\Module\\WkTestModule\\Form\\Modifier\\ProductFormModifier;\nuse PrestaShop\\PrestaShop\\Core\\Domain\\Product\\ValueObject\\ProductId;\n\nclass WkTestModule extends Module\n{\n    public function __construct()\n    {\n        $this->name = 'wktestmodule';\n        $this->tab = 'front_office_features';\n        $this->version = '1.0.0';\n        $this->need_instance = 0;\n        $this->bootstrap = true;\n        parent::__construct();\n        $this->displayName = $this->l('Webkul');\n        $this->description = $this->l('Form types within PrestaShop');\n        $this->ps_versions_compliancy = ['min' => '8.1', 'max' => _PS_VERSION_];\n    }\n\n    \/**\n     * @return bool\n     *\/\n    public function install()\n    {\n        return parent::install() && $this->registerHook(['actionProductFormBuilderModifier']);\n    }\n    \n    \/**\n     * Modify product form builder\n     *\n     * @param array $params\n     *\/\n    public function hookActionProductFormBuilderModifier(array $params): void\n    {\n        \/** @var ProductFormModifier $productFormModifier *\/\n        $productFormModifier = $this->get(ProductFormModifier::class);\n        $productId = isset($params['id']) ? new ProductId((int) $params['id']) : null;\n        $productFormModifier->modify($productId, $params['form_builder']);\n    }\n}<\/pre>\n\n\n\n
After that, In the console in your module root run the command composer dump-autoload<\/em><\/strong><\/code>. This will generate a vendor folder containing an autoload.php<\/strong> file which allows the use of your namespace or the classes defined in the classmap.<\/p>\n\n\n\n
Step 2:<\/strong> Define the service<\/p>\n\n\n\n
Create a services.yml file inside the wktestmodule\/config\/services.yml<\/strong> folder<\/p>\n\n\n\n
In the given code, we have defined our services. These will be used for form creation and form handling. Service is created inside the wktestmodule\/src\/Form\/Modifier<\/strong> folder<\/p>\n\n\n\n
services:\n    PrestaShop\\Module\\WkTestModule\\Form\\Modifier\\ProductFormModifier:\n        autowire: true\n        public: true\n        arguments:\n            $formBuilderModifier: '@form.form_builder_modifier'\n\n    PrestaShop\\Module\\WkTestModule\\Form\\Type\\CustomTabType:\n        class: PrestaShop\\Module\\WkTestModule\\Form\\Type\\CustomTabType\n        parent: 'form.type.translatable.aware'\n        public: true\n        tags:\n            - { name: form.type }<\/pre>\n\n\n\n
Step 3:<\/strong> Create a CustomTabType class <\/p>\n\n\n\n
The tab class is created inside the wktestmodule\/src\/Form\/Type folder<\/p>\n\n\n\n
declare(strict_types=1);\n\nnamespace PrestaShop\\Module\\DemoProductForm\\Form\\Type;\n\nuse PrestaShopBundle\\Form\\Admin\\Type\\TranslatorAwareType;\nuse Symfony\\Component\\Form\\Extension\\Core\\Type\\TextType;\nuse Symfony\\Component\\Form\\FormBuilderInterface;\nuse Symfony\\Component\\OptionsResolver\\OptionsResolver;\nuse Symfony\\Component\\Translation\\TranslatorInterface;\nuse Symfony\\Component\\Validator\\Constraints\\NotBlank;\nuse Symfony\\Component\\Validator\\Constraints\\PositiveOrZero;\nuse Symfony\\Component\\Validator\\Constraints\\Type;\n\nclass CustomTabType extends TranslatorAwareType\n{\n    \/**\n     * @var \\Currency\n     *\/\n    private $defaultCurrency;\n\n    \/**\n     * @param TranslatorInterface $translator\n     * @param array $locales\n     * @param \\Currency $defaultCurrency\n     *\/\n    public function __construct(\n        TranslatorInterface $translator,\n        array $locales,\n        \\Currency $defaultCurrency\n    ) {\n        parent::__construct($translator, $locales);\n        $this->defaultCurrency = $defaultCurrency;\n    }\n\n    \/**\n     * {@inheritDoc}\n     *\/\n    public function buildForm(FormBuilderInterface $builder, array $options)\n    {\n        parent::buildForm($builder, $options);\n        $builder\n            ->add('webkul_custom_field', TextType::class, [\n                'label' => $this->trans('Webkul Custom Field', 'Modules.Demoproductform.Admin'),\n                'label_tag_name' => 'h3',\n                \/\/ 'currency' => $this->defaultCurrency->iso_code,\n                'required' => false,\n                'constraints' => [\n                    new NotBlank(),\n                    new Type(['type' => 'float']),\n                    new PositiveOrZero(),\n                ],\n            ])\n        ;\n    }\n\n    \/**\n     * {@inheritDoc}\n     *\/\n    public function configureOptions(OptionsResolver $resolver)\n    {\n        parent::configureOptions($resolver);\n\n        $resolver\n            ->setDefaults([\n                'label' => $this->trans('Webkul Tab', 'Modules.Demoproductform.Admin'),\n            ])\n        ;\n    }\n}<\/pre>\n\n\n\n
Step 4:<\/strong> Create a service ProductFormModifier class <\/p>\n\n\n\n
\ndeclare(strict_types=1);\n\nnamespace PrestaShop\\Module\\WkTestModule\\Form\\Modifier;\n\nuse PrestaShop\\Module\\WkTestModule\\Entity\\CustomProduct;\nuse PrestaShop\\Module\\WkTestModule\\Form\\Type\\CustomTabType;\nuse PrestaShop\\PrestaShop\\Core\\Domain\\Product\\ValueObject\\ProductId;\nuse PrestaShopBundle\\Form\\FormBuilderModifier;\nuse Symfony\\Component\\Form\\FormBuilderInterface;\nuse Symfony\\Component\\Translation\\TranslatorInterface;\n\nfinal class ProductFormModifier\n{\n    \/**\n     * @var TranslatorInterface\n     *\/\n    private $translator;\n\n    \/**\n     * @var FormBuilderModifier\n     *\/\n    private $formBuilderModifier;\n\n    \/**\n     * @param TranslatorInterface $translator\n     * @param FormBuilderModifier $formBuilderModifier\n     *\/\n    public function __construct(\n        TranslatorInterface $translator,\n        FormBuilderModifier $formBuilderModifier\n    ) {\n        $this->translator = $translator;\n        $this->formBuilderModifier = $formBuilderModifier;\n    }\n\n    \/**\n     * @param ProductId|null $productId\n     * @param FormBuilderInterface $productFormBuilder\n     *\/\n    public function modify(\n        ?ProductId $productId,\n        FormBuilderInterface $productFormBuilder\n    ): void {\n        $idValue = $productId ? $productId->getValue() : null;\n        $customProduct = new CustomProduct($idValue);\n        $this->addCustomTab($customProduct, $productFormBuilder);\n    }\n\n    \/**\n     * @param CustomProduct $customProduct\n     * @param FormBuilderInterface $productFormBuilder\n     *\/\n    private function addCustomTab(CustomProduct $customProduct, FormBuilderInterface $productFormBuilder): void\n    {\n        $this->formBuilderModifier->addAfter(\n            $productFormBuilder,\n            'extra_modules',\n            'custom_tab',\n            CustomTabType::class,\n            [\n                'data' => [\n                    'webkul_custom_field' => $customProduct->custom_price,\n                ],\n            ]\n        );\n    }\n}<\/pre>\n\n\n\n
The above module uses a Form Builder Modifier (FormBuilderModifier) and adds a new Tab “Webkul Tab” with a field “Webkul Custom Field”.
After successfully installation of the above module. You will get the result as follows<\/p>\n\n\n\n
\n
\"Sample<\/figure>\n<\/figure>\n\n\n\n
NOTE: <\/strong>“actionProductFormBuilderModifier” supports in PrestaShop Version V8.1.0<\/p>\n\n\n\n
So, this hook will work in the below PrestaShop Versions.<\/p>\n\n\n\n
That\u2019s all.<\/p>\n\n\n\n
You also learn to save and display custom form field using PrestaShop Hook<\/a>.<\/p>\n\n\n\n
If you are facing any issues or doubts in the above process, please feel free to contact us in the comment section.<\/p>\n\n\n\n
I would be happy to help.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we are about to learn, how to create custom tab on the back office product page. So, we will define our own Symfony services in the module and will use existing components. You can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules. Here, we are showing the […]<\/a><\/p>\n","protected":false},"author":434,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[209],"tags":[2065,6883,15221],"class_list":["post-442588","post","type-post","status-publish","format-standard","hentry","category-prestashop","tag-prestashop","tag-product-page","tag-v8-1"],"yoast_head":"\nHow to create custom tab in back office product page - Webkul Blog<\/title>\n<meta name=\"description\" content=\"In this blog, we are about to learn, how to create custom tabs on the back office product page. So, we will define our own Symfony services in the module and will use existing components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create custom tab in back office product page - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog, we are about to learn, how to create custom tabs on the back office product page. So, we will define our own Symfony services in the module and will use existing components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-22T13:28:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-22T13:32:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp\" \/>\n<meta name=\"author\" content=\"Ravindra Gautam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ravindra Gautam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\"},\"author\":{\"name\":\"Ravindra Gautam\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1a45b107e54bb2991c05f20fbb1dae12\"},\"headline\":\"How to create custom tab in back office product page\",\"datePublished\":\"2024-05-22T13:28:03+00:00\",\"dateModified\":\"2024-05-22T13:32:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\"},\"wordCount\":324,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp\",\"keywords\":[\"prestashop\",\"product page\",\"V8.1\"],\"articleSection\":[\"prestashop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\",\"name\":\"How to create custom tab in back office product page - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp\",\"datePublished\":\"2024-05-22T13:28:03+00:00\",\"dateModified\":\"2024-05-22T13:32:01+00:00\",\"description\":\"In this blog, we are about to learn, how to create custom tabs on the back office product page. So, we will define our own Symfony services in the module and will use existing components.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp\",\"width\":1093,\"height\":292,\"caption\":\"Sample Tab Example\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create custom tab in back office product page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1a45b107e54bb2991c05f20fbb1dae12\",\"name\":\"Ravindra Gautam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b8439e2774cf21a264df535ff994154071e538a17da7dc76beb9f7ffa28fa19?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b8439e2774cf21a264df535ff994154071e538a17da7dc76beb9f7ffa28fa19?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ravindra Gautam\"},\"description\":\"Ravindra is a Software Engineer in PrestaShop platform with expertise in Marketplace Development services. He excels in creating and managing online stores using PrestaShop, leveraging his skills in JavaScript, jQuery, and Web Services to deliver dynamic, user-friendly e-commerce solutions that drive business success.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/ravindra-gautam192\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create custom tab in back office product page - Webkul Blog","description":"In this blog, we are about to learn, how to create custom tabs on the back office product page. So, we will define our own Symfony services in the module and will use existing components.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/","og_locale":"en_US","og_type":"article","og_title":"How to create custom tab in back office product page - Webkul Blog","og_description":"In this blog, we are about to learn, how to create custom tabs on the back office product page. So, we will define our own Symfony services in the module and will use existing components.","og_url":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-05-22T13:28:03+00:00","article_modified_time":"2024-05-22T13:32:01+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp","type":"","width":"","height":""}],"author":"Ravindra Gautam","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ravindra Gautam","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/"},"author":{"name":"Ravindra Gautam","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1a45b107e54bb2991c05f20fbb1dae12"},"headline":"How to create custom tab in back office product page","datePublished":"2024-05-22T13:28:03+00:00","dateModified":"2024-05-22T13:32:01+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/"},"wordCount":324,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp","keywords":["prestashop","product page","V8.1"],"articleSection":["prestashop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/","url":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/","name":"How to create custom tab in back office product page - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp","datePublished":"2024-05-22T13:28:03+00:00","dateModified":"2024-05-22T13:32:01+00:00","description":"In this blog, we are about to learn, how to create custom tabs on the back office product page. So, we will define our own Symfony services in the module and will use existing components.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-from-2024-05-22-12-55-35.webp","width":1093,"height":292,"caption":"Sample Tab Example"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-tab-in-back-office-product-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create custom tab in back office product page"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1a45b107e54bb2991c05f20fbb1dae12","name":"Ravindra Gautam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b8439e2774cf21a264df535ff994154071e538a17da7dc76beb9f7ffa28fa19?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b8439e2774cf21a264df535ff994154071e538a17da7dc76beb9f7ffa28fa19?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ravindra Gautam"},"description":"Ravindra is a Software Engineer in PrestaShop platform with expertise in Marketplace Development services. He excels in creating and managing online stores using PrestaShop, leveraging his skills in JavaScript, jQuery, and Web Services to deliver dynamic, user-friendly e-commerce solutions that drive business success.","url":"https:\/\/webkul.com\/blog\/author\/ravindra-gautam192\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/442588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/434"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=442588"}],"version-history":[{"count":2,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/442588\/revisions"}],"predecessor-version":[{"id":442847,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/442588\/revisions\/442847"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=442588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=442588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=442588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}