Customize product creation form
What's in this topic
This topic describes how developers can customize the product creation form used on the product creation and product edit pages in Admin.
The following image is an illustration of the default view of the form on the New Product page:
In Magento version 2.1, the product creation form was completely refactored, and implemented using the form UI component.
Product attributes and attribute sets available in the form, can be customized and added under STORES > Attributes in the Admin. But you can also customize the form view and behavior in code. The following sections describe what files define the form and how they can be customized in your module.
Set Magento to developer mode while you perform all customizations and debugging.
For the sake of compatibility, upgradability, and easy maintenance, do not edit the default Magento code. Instead, add your customizations in a separate module.
Customize the form configuration
Customizing the form config file (that is, declarative customization) is preferable for changes like introducing new fields, field sets and modals.
To customize the product creation form, take the following steps:
In your custom module, add an empty
In this file, add content similar to the following:
Adding new elements
By default, the new elements (fields, field sets, modals, grids) which you add in the form configuration file, are displayed on the form whatever product is created; that is, for all product types.
In the modifier class described further, you can set the conditions for displaying certain elements for certain product types.
Customizing existing fields and field sets
product_form.xml is merged with the same files from the other modules. So there is no need to copy their content, you only need to define changes. Even if you want to customize the existing entities, you only have to mention those options, the values of which are customized.
To customize an existing entity, declare only those options, the values of which are customized, do not copy its entire configuration.
To delete an existing field, or field set, in your
product_form.xml use the following construction:
For reference, view the product form configuration files of the Magento modules:
Customize using a modifier class
Modifier classes should be used when static declaration is not applicable. For example, in cases when additional data should be loaded from database. Also, modifier is a place where you add validations to display only certain fields for certain product types.
In the run time, the form structure set in the modifier is merged with the configuration that comes from the
General implementation overview
Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider data provider class is responsible for data and metadata preparation for the product form. The pool of modifiers
Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool (virtual type) is injected to this data provider using the
__construct() method. The pool’s preference is defined in
To add your custom modifier, you need to do the following:
Add your modifier
In your custom module directory, add the modifier class that implements the
Magento\UI\DataProvider\ModifierInterface interface or extends the
Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifierclass. In your modifier, the
modifyData() and the
modifyMeta() methods must be implemented.
In the modifier class, you can add UI elements using the same structure as in the XML configuration.
You can create nested structures of elements by adding them to the
children key of any element.
Add modifier to the pool
<your_module_dir>/etc/adminhtml/di.xml define your modifier as a dependency for
Following is an example of such definition:
sortOrder parameter defines the order of invocation for your
modifyMeta() methods among other these methods of other modifiers in the pool. If a modifier is first in a pool, its
modifyMeta() are invoked with empty arguments.
To access product model within your modifier, it’s recommended to use an instance of
For reference, view the modifier classes in the Magento modules, for example:
For reference about setting conditions for displaying certain elements for certain product types, view