MageWorx Advanced Product Options Customization

How to Display Weight & WeightType Fields Outside the Modal Window?

MageWorx Advanced Product Options Customization | MageWorx Blog
Reading Time: 4 minutes

No matter how robust a solution is, customization might be required to achieve business-specific objectives or preferences.

Following some requests our Support Team received regarding the ability to take the Weight and WeightType fields from the Modal Window in the Magento 2 Advanced Product Options extension, we are happy to share a quick how-to guide on the means to achieve that objective easily. Read on for easy-to-follow guidelines.

Step-by-Step Guide on Advanced Product Options Customization

This is how the Weight & Weight Type fields look in the Advanced Product Options extension out-of-the-box:

MageWorx Advanced Product Options Customization | MageWorx Blog

To display these fields outside the modal window, you’ll need to follow these five easy steps:

Step #1. New Module Creation

Start with creating a new module: VendorName_OptionCustomFieldWeight.

For that,

  1. Create the app/code/VendorName/OptionCustomFieldWeight directory,
  2. Generate and fill in three standard files that are normally used to register a module, i.e., composer.json, etc/module.xml, registration.php.


2) etc/module.xml

3) registration.php

Step #2. Class Copying

Next, you need to find and copy the following class: /app/code/MageWorx/OptionFeatures/Ui/DataProvider/Product/Form/Modifier/Features.php to /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php.

Step #3. Class Modification

Now, let’s modify the copied class. To do that, you need to:

a) Change the namespace of our class to VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier;

and add the classes that we will need a little later. These classes are

use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight;


use Magento\Ui\Component\Form\Element\Input;

If all is done correctly, this should look as follows:

b) Add the MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weightclass object to our constructor:

c) Find the getValueFeaturesFieldsConfig() method:

And add the getWeightConfig() and getWeightTypeConfig() methods to the array with custom fields for custom options values. These methods will implement a corresponding configuration. Now, the getValueFeaturesFieldsConfig() method must look as follows:

d) After the getValueFeaturesFieldsConfig() method, lets implement the getWeightConfig() and getWeightTypeConfig() methods of fields configuration:

Step #4. Overriding the Class

It’s high time for our /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php modified class to start working instead of the original /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php. To achieve that, we need to override it in the dependencies configuration file. For that, let’s create the /app/code/VendorName/OptionCustomFieldWeight/etc/adminhtml/di.xml file, and add the following code:

Step #5. New Module Installation

We are almost there! The only thing left is to install our new module.

To begin with, run the following command:

php bin/magento module:status

You will see a list of enabled and disabled modules. Our new VendorName_OptionCustomFieldWight module should be located within the disabled ones.

Let’s enable it:

php bin/magento module:enable VendorName_OptionCustomFieldWeight

After you update the database,

php bin/magento setup:upgrade

you’ll see the following result:

MageWorx Advanced Product Options Customization | MageWorx Blog

Congratulations! You’ve removed the Weight & Weight Type fields from the modal window successfully.

Bottom Line

We hope this step-by-step guide has helped you easily customize the Advanced Product Options extension and thus achieve your preferences. Should you have any questions or difficulties, feel free to leave a comment in the comments box below. Otherwise, our Support Team is always happy to assist at [email protected]! =)


Please enter your comment!
Please enter your name here