Guide for Magento 2 Dependent Custom Options

Live Demo Buy Now

Magento 2 Dependent Custom Options enable the admin to make dependent options for products. These options will be presented on the product page and will be dependent on one another.

The buyer will see the next choice for the product that is related to the prior one in this sort of selection.

The given chained choices can also be unassigned by the store merchants. The store owners can create multiple dependent options for a single product.

Check the video mentioned below for checking the workflow:

Features

Admin can define a group of custom options that are interdependent.
Admin may easily apply custom options to products.
The admin can also unassign custom options from products in an easy way.
The extension is compatible with the Hyva Theme.

Installation

#1 Download Module

Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

#2 Upload Folder

Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

#3 Run Commands

After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

Language Translation

For translating the module language, navigate through src/app/code/Webkul/ChainedCustomOption/i18n and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

Now, upload it to the path src/app/code/Webkul/ChainedCustomOption/i18n where the installation of Magento 2 is on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.

The user can edit the CSV like the image below.

Admin Configuration – Dependant Custom Options

The admin will navigate through Stores>Chained Custom Options>Manage Chained Custom Options to make a general configuration.

Now, the admin will click on the Add Chained Custom Option button to create custom options.

Here, the store admin will have to enter the below details to add a custom option.

Title- Enter the option title.

Input Type- Select the dropdown menu as the input type.

Is Required- Select Yes in the option Is Required.

Sort Order- The sort order needs to be selected as per choice.

Now click on the Save Chained Custom Options and the option will get created.

Furthermore, the admin can also edit the option after the creation. They can add new rows to give the selections for the dependent option.

Note:

If the changes made in the existing Chained custom options show the old custom options as well along with the newly added (options) template too when re-assign the updated template to the respective products.

Hence to remove the old custom option admin has to unassign that custom option from the particular edit product page in the admin panel.

These rows will contain the columns named title, price, price type, sort order, and children. Now by clicking on Save Chained Custom Option the changes will get saved.

Likewise, the admin can create more custom options such as size that will be depended on the first created option.

In this custom option, the admin will have to select the parent option as per the given screenshot.

Now, the admin will have to click on the Save and Continue Add/Edit Options button. Once the admin clicks on the button Add New Row option will display.

This time the admin will view the Select Children option additionally to create the dependent option. Here, the admin needs to click on the checkbox to add the children option.

Similarly, the admin can create more dependent options that will depend on the previous one as shown below.

Now all the options will display with ID, title, sort order, and action as shown below image.

The store admin will assign these options to the product by navigating through Chained Custom Option>Chained Custom OptionAssigned to Product.

The admin can assign the options by the Actions dropdown menu. By clicking on Action, there will be two options will display named Assign and Unassign.

The admin will have to select the Assign option and it will open the created dependent options as shown below.

The admin can assign the custom options to the product one by one selecting each option. In case the admin wants to remove the assigned option then he can use the Unassign option.