{"id":380209,"date":"2023-05-06T12:36:13","date_gmt":"2023-05-06T12:36:13","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=380209"},"modified":"2024-03-21T04:24:08","modified_gmt":"2024-03-21T04:24:08","slug":"how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/","title":{"rendered":"How to add a custom form field on the PrestaShop product page using hook"},"content":{"rendered":"\n<p>In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components. So, we will define our own Symfony services in the module and will use existing components.<\/p>\n\n\n\n<p>You can explore our <a href=\"https:\/\/webkul.com\/prestashop-development\/\">PrestaShop Development Services<\/a> and a large range of quality <a href=\"https:\/\/store.webkul.com\/PrestaShop-Extensions.html\">PrestaShop Modules<\/a>.<\/p>\n\n\n\n<p>Here, we are showing the process step by step with an example module \u2018wkdemo\u2018<\/p>\n\n\n\n<p>First, create a module, with a\u00a0<code><a href=\"https:\/\/devdocs.prestashop-project.org\/8\/modules\/concepts\/composer\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">composer.json<\/a><\/code>\u00a0file as per your requirement. <\/p>\n\n\n\n<p><strong>Step 1:<\/strong> Create the module class<\/p>\n\n\n\n<p>Here, we have created the module class file <strong>\u201cwkdemo\/wkdemo.php\u201c<\/strong><\/p>\n\n\n\n<p>In this class, we are initializing the module, product controllers tab, and form fields.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">declare(strict_types=1);\n\nuse PrestaShop\\Module\\WkDemo\\Form\\Modifier\\ProductFormModifier;\nuse PrestaShop\\PrestaShop\\Core\\Domain\\Product\\ValueObject\\ProductId;\n\nclass WkDemo extends Module\n{\n    public function __construct()\n    {\n        $this-&gt;name = &#039;wkdemo&#039;;\n        $this-&gt;tab = &#039;front_office_features&#039;;\n        $this-&gt;version = &#039;1.0.0&#039;;\n        $this-&gt;need_instance = 0;\n        $this-&gt;bootstrap = true;\n        parent::__construct();\n        $this-&gt;displayName = $this-&gt;l(&#039;Webkul&#039;);\n        $this-&gt;description = $this-&gt;l(&#039;Form types within PrestaShop&#039;);\n        $this-&gt;ps_versions_compliancy = &#091;&#039;min&#039; =&gt; &#039;8.1&#039;, &#039;max&#039; =&gt; _PS_VERSION_];\n    }\n\n    \/**\n     * @return bool\n     *\/\n    public function install()\n    {\n        return parent::install() &amp;&amp; $this-&gt;registerHook(&#091;&#039;actionProductFormBuilderModifier&#039;]);\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-&gt;get(ProductFormModifier::class);\n        $productId = isset($params&#091;&#039;id&#039;]) ? new ProductId((int) $params&#091;&#039;id&#039;]) : null;\n        $productFormModifier-&gt;modify($productId, $params&#091;&#039;form_builder&#039;]);\n    }\n}<\/pre>\n\n\n\n<p>After that, In the console in your module root run the command&nbsp;<code><strong><em>composer dump-autoload<\/em><\/strong><\/code>. This will generate a&nbsp;vendor&nbsp;folder containing an&nbsp;<strong>autoload.php<\/strong>&nbsp;file which allows the use of your namespace or the classes defined in the classmap.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Define the service<\/p>\n\n\n\n<p>Create a services.yml file inside the <strong>wkdemo\/config\/services.yml<\/strong> folder<\/p>\n\n\n\n<p>In the given code, we have defined our services. These will be used for form creation and form handling. Service is created inside the <strong>wkdemo\/src\/Form\/Modifier<\/strong> folder<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\nservices:\n    PrestaShop\\Module\\WkDemo\\Form\\Modifier\\ProductFormModifier:\n        autowire: true\n        public: true\n        arguments:\n            $formBuilderModifier: &#039;@form.form_builder_modifier&#039;<\/pre>\n\n\n\n<p><strong>Step 3:<\/strong> Create a service class<\/p>\n\n\n\n<p>Now create a service class in the <strong>wkdemo\/src\/Form\/Modifier\/ProductFormModifier.php<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">declare(strict_types=1);\n\nnamespace PrestaShop\\Module\\WkDemo\\Form\\Modifier;\n\nuse PrestaShop\\PrestaShop\\Core\\Domain\\Product\\ValueObject\\ProductId;\nuse PrestaShopBundle\\Form\\FormBuilderModifier;\nuse Symfony\\Component\\Form\\Extension\\Core\\Type\\TextType;\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-&gt;translator = $translator;\n        $this-&gt;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        $data&#091;&#039;seo&#039;] = &#039;Test data&#039;;\n        $data&#091;&#039;price&#039;] = &#039;0&#039;;\n        $this-&gt;modifyDescriptionTab($data, $productFormBuilder);\n    }\n\n    private function modifyDescriptionTab($data, FormBuilderInterface $productFormBuilder): void\n    {\n        $descriptionTabFormBuilder = $productFormBuilder-&gt;get(&#039;seo&#039;);\n        $this-&gt;formBuilderModifier-&gt;addAfter(\n            $descriptionTabFormBuilder,\n            &#039;tags&#039;,\n            &#039;demo_module_custom_field&#039;,\n            TextType::class,\n            &#091;\n                \/\/ you can remove the label if you dont need it by passing &#039;label&#039; =&gt; false\n                &#039;label&#039; =&gt; $this-&gt;translator-&gt;trans(&#039;Demo custom field&#039;, &#091;], &#039;Modules.WkDemo.Admin&#039;),\n                \/\/ customize label by any html attribute\n                &#039;label_attr&#039; =&gt; &#091;\n                    &#039;title&#039; =&gt; &#039;h2&#039;,\n                    &#039;class&#039; =&gt; &#039;text-info&#039;,\n                ],\n                &#039;attr&#039; =&gt; &#091;\n                    &#039;placeholder&#039; =&gt; $this-&gt;translator-&gt;trans(&#039;Your example text here&#039;, &#091;], &#039;Modules.WkDemo.Admin&#039;),\n                ],\n                \/\/ this is just an example, but in real case scenario you could have some data provider class to wrap more complex cases\n                &#039;data&#039; =&gt; $data&#091;&#039;seo&#039;] ,\n                &#039;empty_data&#039; =&gt; &#039;&#039;,\n                &#039;form_theme&#039; =&gt; &#039;@PrestaShop\/Admin\/TwigTemplateForm\/prestashop_ui_kit_base.html.twig&#039;,\n            ]\n        );\n        \n        $pricingTabFormBuilder = $productFormBuilder-&gt;get(&#039;pricing&#039;);\n        $this-&gt;formBuilderModifier-&gt;addAfter(\n            $pricingTabFormBuilder,\n            &#039;wholesale_price&#039;,\n            &#039;demo_module_pricing_field&#039;,\n            TextType::class,\n            &#091;\n                \/\/ you can remove the label if you dont need it by passing &#039;label&#039; =&gt; false\n                &#039;label&#039; =&gt; $this-&gt;translator-&gt;trans(&#039;Extra price for demo&#039;, &#091;], &#039;Modules.WkDemo.Admin&#039;),\n                \/\/ customize label by any html attribute\n                &#039;label_attr&#039; =&gt; &#091;\n                    &#039;title&#039; =&gt; &#039;h2&#039;,\n                    &#039;class&#039; =&gt; &#039;text-info&#039;,\n                ],\n                &#039;attr&#039; =&gt; &#091;\n                    &#039;placeholder&#039; =&gt; $this-&gt;translator-&gt;trans(&#039;0&#039;, &#091;], &#039;Modules.WkDemo.Admin&#039;),\n                ],\n                \/\/ this is just an example, but in real case scenario you could have some data provider class to wrap more complex cases\n                &#039;data&#039; =&gt; $data&#091;&#039;price&#039;],\n                &#039;empty_data&#039; =&gt; &#039;&#039;,\n                &#039;form_theme&#039; =&gt; &#039;@PrestaShop\/Admin\/TwigTemplateForm\/prestashop_ui_kit_base.html.twig&#039;,\n            ]\n        );\n    }\n}<\/pre>\n\n\n\n<p>The above module uses a Form Builder Modifier (FormBuilderModifier) and adds two text field<br><strong>1-<\/strong> &#8220;Extra price for demo&#8221; in the Pricing tab, after the existing <code>Cost price<\/code> form element<br><strong>2-<\/strong> &#8220;Demo custom field&#8221; in the SEO tab, after the existing <code>Tags<\/code> form element<br>to the SEO tab form, after the existing tags form element.<\/p>\n\n\n\n<p>The above module gives the result as shown below custom form fields:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1108\" height=\"460\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png\" alt=\"Pricing tab field\" class=\"wp-image-380213\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png 1108w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15-300x125.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15-250x104.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15-768x319.png 768w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1126\" height=\"386\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot1.png\" alt=\"SEO Custom form field\" class=\"wp-image-380214\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot1.png 1126w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot1-300x103.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot1-250x86.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot1-768x263.png 768w\" sizes=\"(max-width: 1126px) 100vw, 1126px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>NOTE: <\/strong>&#8220;actionProductFormBuilderModifier&#8221; supports in PrestaShop Version V8.1.0<\/p>\n\n\n\n<p>So, this hook will work in the below PrestaShop Versions.<\/p>\n\n\n\n<p>That\u2019s all.<\/p>\n\n\n\n<p>You also learn save and display custom form field using <a href=\"https:\/\/webkul.com\/blog\/how-to-save-and-display-a-custom-form-field-value-using-the-prestashop-hook\/\" target=\"_blank\" rel=\"noreferrer noopener\">PrestaShop Hook<\/a>.<\/p>\n\n\n\n<p>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<p>I would be happy to help.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components. 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, <a href=\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":434,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[14148,14147,14001,2065,7055,14149],"class_list":["post-380209","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-8-1","tag-custom-form-field","tag-hook","tag-prestashop","tag-service","tag-symphony"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add a custom form field on the PrestaShop product page using hook - Webkul Blog<\/title>\n<meta name=\"description\" content=\"In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components and 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-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add a custom form field on the PrestaShop product page using hook - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components and 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-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\" \/>\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=\"2023-05-06T12:36:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T04:24:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png\" \/>\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-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\"},\"author\":{\"name\":\"Ravindra Gautam\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1a45b107e54bb2991c05f20fbb1dae12\"},\"headline\":\"How to add a custom form field on the PrestaShop product page using hook\",\"datePublished\":\"2023-05-06T12:36:13+00:00\",\"dateModified\":\"2024-03-21T04:24:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\"},\"wordCount\":351,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png\",\"keywords\":[\"8.1\",\"custom form field\",\"hook\",\"prestashop\",\"service\",\"symphony\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\",\"name\":\"How to add a custom form field on the PrestaShop product page using hook - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png\",\"datePublished\":\"2023-05-06T12:36:13+00:00\",\"dateModified\":\"2024-03-21T04:24:08+00:00\",\"description\":\"In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components and will define our own Symfony services in the module, and will use existing components.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png\",\"width\":1108,\"height\":460,\"caption\":\"Pricing tab field\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a custom form field on the PrestaShop product page using hook\"}]},{\"@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 add a custom form field on the PrestaShop product page using hook - Webkul Blog","description":"In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components and 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-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/","og_locale":"en_US","og_type":"article","og_title":"How to add a custom form field on the PrestaShop product page using hook - Webkul Blog","og_description":"In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components and will define our own Symfony services in the module, and will use existing components.","og_url":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-05-06T12:36:13+00:00","article_modified_time":"2024-03-21T04:24:08+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png","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-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/"},"author":{"name":"Ravindra Gautam","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1a45b107e54bb2991c05f20fbb1dae12"},"headline":"How to add a custom form field on the PrestaShop product page using hook","datePublished":"2023-05-06T12:36:13+00:00","dateModified":"2024-03-21T04:24:08+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/"},"wordCount":351,"commentCount":16,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png","keywords":["8.1","custom form field","hook","prestashop","service","symphony"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/","url":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/","name":"How to add a custom form field on the PrestaShop product page using hook - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png","datePublished":"2023-05-06T12:36:13+00:00","dateModified":"2024-03-21T04:24:08+00:00","description":"In this blog, we will learn how to implement a new custom form field on the Product Page using Symfony services and components and will define our own Symfony services in the module, and will use existing components.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-15.png","width":1108,"height":460,"caption":"Pricing tab field"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-a-custom-form-field-on-the-prestashop-product-page-using-hook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add a custom form field on the PrestaShop product page using hook"}]},{"@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\/380209","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=380209"}],"version-history":[{"count":21,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380209\/revisions"}],"predecessor-version":[{"id":428837,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/380209\/revisions\/428837"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=380209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=380209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=380209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}