How to add custom fields in Product Edit pages in Magento 2

The post today provides two steps to successfully add custom fields to Product Edit page in Magento 2

“I want to add some custom fields in Product Edit pages in Magento 2”. I see that is quite important demand when you desire to use extra information on your pages which the default system does not include. If you are also facing this problem, here is the proper solution for you. The post today provides two steps to successfully add custom fields to Product Edit page in Magento 2.

Overview of adding custom fields in Product Edit pages in Magento 2

Though Magento 2 already supports additional product attributes, sometimes you will need to add special data for a certain product only. This requires an extra process of adding custom fields to the product page.

Steps to add custom fields to the product edit page:

Step 1: Generate UI Component
Step 2: Insert Manage Notes section in Product form (product_form.xml)

Step 1: Generate UI Component

Run the command in your module to generate UI component

/app/code/Mageplaza/HelloWorld/view/adminhtml/ui_component/product_form.xml

Step 2: Insert `Manage Notes` section in Product form (`product_form.xml`)

To insert Manage Notes section, do the following:

Use the code snippet:

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">   
<modal name="advanced_inventory_modal">  
     <fieldset name="manage_note">
         <argument name="data" xsi:type="array">        
             <item name="config" xsi:type="array">
                 <item name="label" xsi:type="string" translate="true">Manage Note</item>
                 <item name="dataScope" xsi:type="string"/>
                 <item name="sortOrder" xsi:type="number">0</item>
                 <item name="collapsible" xsi:type="boolean">true</item>
                 <item name="opened" xsi:type="boolean">true</item>
             </item>
         </argument>
         <field name="note">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="label" xsi:type="string" translate="true">Notes</item>
                     <item name="formElement" xsi:type="string">textarea</item>
                     <item name="dataScope" xsi:type="string">quantity_and_stock_status.note</item>
                     <item name="sortOrder" xsi:type="number">1</item>
                     <item name="scopeLabel" xsi:type="string">[GLOBAL]</item>
                 </item>
             </argument>
         </field>          
     </fieldset>
     <fieldset name="stock_data">
         <argument name="data" xsi:type="array">
             <item name="config" xsi:type="array">
                 <item name="label" xsi:type="string" translate="true">Stock Configuration</item>
                 <item name="dataScope" xsi:type="string"/>
                 <item name="sortOrder" xsi:type="number">100</item>
                 <item name="collapsible" xsi:type="boolean">true</item>
             </item>
         </argument>
     </fieldset>   
</modal>
</form>

Insert the field note with the type as Textarea into the manage_note fieldset (<field name="note">) that is applied to insert Fieldset manage_note into Product form (<fieldset name="manage_note">)
Enable this custom module, then login to the backend to edit a product. The note field will be visible in Product form.

Wrap up

With this tutorial, I believe everything will come with ease when you need to add custom fields in Product Edit pages in Magento 2.

Previous Add a Custom Discount

Next Add EAV Attribute

One Step Checkout for Magento 2 by Mageplaza

magento-2-tutorial

how-to

add

custom

fields

product-edit-page

Sam Thomas

CEO and Founder of Mageplaza. Pursueing a simple and healthy lifestyle. A friend, a husband and a dad of two children, a trainer and an influencer wannabe. He is a big fan of sports and travel, also.