How to add custom fields in Product Edit pages 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.

Why Add Custom Fields in Magento 2?

Adding custom fields can greatly enhance the overall functionality of your product pages. Some reasons you might want to add custom fields include:

  • Capturing additional product details: You may need to store extra information about a product that isn’t available by default.
  • Improving product categorization: Custom attributes can help you better organize and filter products on your site.
  • Enhancing customer experience: By displaying additional product information on the frontend, you improve the user’s understanding of the product.

Magento 2 provides a rich and flexible system for adding and managing custom attributes that can be displayed in both the admin panel and the storefront.

Prerequisites

Before you start the process of adding custom fields in Magento 2, ensure you have the following:

  • Basic understanding of Magento 2’s architecture.
  • Access to the Magento 2 file structure, either through a local setup or a hosting provider.
  • Familiarity with PHP and XML.
  • Magento 2 admin panel access.

Make sure to have a backup of your Magento installation before making any changes. This ensures you can quickly revert back in case something goes wrong.

2 Steps to Add 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

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

Adding custom fields to the product edit pages in Magento 2 will come with ease through this tutorial, which enhances the functionality and usability of your eCommerce store. From there, you should now be equipped with the knowledge to implement these fields in both the backend and frontend of your store.

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous How to Add Custom Discount in Magento 2
Next Add EAV Attribute
One Step Checkout for Magento 2 by Mageplaza

People also searched for

  • magento 2 how to add custom fields product edit pages
  • 2.3.x, 2.4.x
x