Magento 2 Dependent Custom Options extension helps improve product custom options by making product custom options dependent on each other.
2. How Does It Work?
2.1. General Configuration
Please go to Store ⇒ Configuration ⇒ BSSCommerce ⇒ Dependent Custom Option
In Enabled: choose Yes to enable the module, or No to disable it.
In Children Option Values Display:
- Be Enabled Only If the Parent Option Value is Selected: choose this option to set the children options are hidden and they will be enabled only when their parent option is picked.
- Always be Displayed but Customers Can’t Pick If the Parent Option Value isn’t Selected: choose this option to set the children options always be shown but the checkboxes aren’t enabled until the parent option is selected.
In Children Options’ Values Depend on Multiple Parent Values: this configuration is applied when the children options depend on multiple parent options.
- Be Enabled If At Least One Parent Value is Selected: the children options will be enabled if at least one parent option is chosen.
- Be Enabled Only If All Parent Values are Selected: the children options will be enabled only when all parent options are chosen.
Note: The display of children options is dependent on the setting in Children Option Values Display config.
After setting, please press Save Config button and flush cache to start using the module.
2.2. Set Dependent Custom Options
- The maximum number of input variables allowed in a form is set to 1000. Since our module will create two inputs per value option, the number of inputs in the save product form may exceed this amount.
- Please make sure that you have changed the max-input-vars of your server to a proper value. If one product has more than 50 value options, you should set the max-input-vars to 1500, for example.
Now, let’s get started setting up dependent custom options.
You need to go Customization Options section of the product edit page.
Each custom option and option value is added a unique ID number. The custom option IDs will be used to set up dependent custom options.
When there are multiple pages of custom options, you must open and view all pages so our module can save and validate all options ID.
- In Dependent Options’ IDs: enter the custom option IDs and custom option value IDs to set them to be dependent on this option value.
Besides directly entering the option ID, You can click on the icon next to Dependent Options’ IDs field to multiple select the available option IDs to be dependent on this option value.
- The custom options depended on other options are called children options and the option values added dependent custom options are called parent options
- Only the custom option values in Select input types (Drop-down, Checkbox, Radio Buttons, and Multiple Select) can be the parent options.
- All custom options and option values in any input types can be the children options.
- The parent options and children options must be in the same product.
- You can’t add the children option IDs that do not exist.
- A children option can be dependent on multiple parent options.
After setting, please press Save button.
2.3. Frontend Display
Here we have a product includes custom options and they are set as the following:
- Options of Size “M” and “L” are dependent on Color “Black”
- Options of Size “L” and “XL” are dependent on Color “White”
And you set up the configuration as:
- Children Option Values Display: Always be Displayed but Customers Can’t Pick If the Parent Option Value isn’t Selected.
- Children Options’ Values Depend on Multiple Parent Values: Be Enabled If At Least One Parent Value is Selected.
Then, you will get the output in the frontend product page like this: