Magento 2 Advanced Product Options Manual

Advanced Product Options Cover

Introduction

Out of the box, Magento Custom Options allow users to create dozens of products variants. This is how the default product options grid looks like.

Magento Custom Options

Yet, this default functionality lacks some key features, thus making the user manage the product options by means of the Configurable Products, which may be a rather time-consuming task.

Magento 2 Advanced Product Options extension takes the best from both configurable products and custom features extending and enhancing them. Below is a side-by-side comparison of the default platform’s functionality and the advanced product options added by MageWorx extension.

Feature Default Custom Options Magento 2 Advanced Product Options
Templates You have to separately add custom options for every chosen option. Templates are not provided. Create sophisticated custom options templates with an unlimited number of custom options on the fly and assign them to any chosen product or group of products.
Dependencies Is not provided. Showing the dependent (child) options when the main (parent) one is selected. For example, a 'Shade' option will be available only when a customer chooses the 'Color'.
Stock Management Is not provided. The possibility to show the quantity and the out-of-stock note for the chosen options on the frontend.
Stock Report Is provided only individually, in the special tab of the corresponding product. Managing and tracking the inventory of the custom options. Mass actions for products.
Prices Provides relative prices only. Provides relative prices (e.g. +$5) and the absolute prices (the custom option's price fully replaces the product's price). One time prices (the custom option's price will be added to product price only once, regardless of the quantity of added to cart products).
Weight and Cost Is not provided. Specify the weight and cost for the custom options with the possibility to handle them as absolute values (replacing the initial product's cost and weight). Weight is important for the correct shipping costs calculation in the shopping cart. Specifying the cost allows calculating the net profit correctly.
Images Is not provided Present custom options in all their color variations by means of color swatches. Possibility to upload multiple images to one custom option; to replace a product's image with a custom option's image.

Requirements and Installation

Advanced Product Options supports both Community and Enterprise edition of Magento starting from version 2.1.2 The current version of the Magento installed on your website can be found in the lower right corner of any backend page.

Magento 2 Version

Advanced Product Options has 2 separate ways of installation: via Composer or by copying the code.

You can use our Repository for extension installation as well.

Extension Configuration.

Custom Options Templates

Advanced Product Options extension allows the store owner to apply a set of custom options to any number of products. This set can be as sophisticated as needed and include an unlimited amount of product custom options.

Log into the Magento Admin panel and go to STORES ⟶ MageWorx Option Templates ⟶ Manage Option Templates.

Mageworx Option Templates

Please note that during the initial setup this grid will be empty.

Here, you can see the list of all the created templates and the number of products each template is assigned to. The Show in the Frontend column provides the possibility to view the enabled/disabled templates.

The columns can be sorted alphabetically by clicking the column title.

To create a new product custom option template, click the Add New Option Template button.

The initial setup of the template consists of the 3 tabs.

Options Template Settings

Mageworx Option Template Settings Title. A name of the template. Will be visible on the Manage Option Templates and on the Product Edit page.

Assigned Products

Mageworx Option Template Settings Here, the store owner can select the products that should use this template. Here, one can see the default products grid with the possibility to use the standard Magento filters functionality to easily find the necessary products.

Mageworx Option Template Settings

Note that after the template is saved and the dropdown is set to Yes, only the selected products will be shown. This may be handy in order to edit the products that should be applied by this template.

Add Products by ID/SKU

You can also assign templates to products by entering their Product IDs or Product SKUs. Each individual ID/SKU should be comma-separated. Mageworx Option Template Settings

Note: no spaces allowed between multiple values.

The store owner can use both Assigned Products tab and this one simultaneously. Afther the template is saved, all the selected products will be visible in the Assigned Products grid.

Customizable Options

Mageworx Option Template Customizable Options The customizable options is the main place for managing the template. For better understanding, we'll specify the configuration settings one by one, according to the initial logic.

Mageworx Option Template Customizable Options

The first settings block is designed for the possibility to use the absolute values for the customizable options instead of the default relative ones.

Absolute Cost. If enabled, the custom option's cost fully replaces the initial product's cost. This may be important as it allows calculating the net profit correctly.

Absolute Weight. If enabled, the custom option's weight fully replaces the initial product's weight. This may be important for the correct shipping calculation.

Absolute Price. If enabled, the custom option's price fully replaces the initial product's price.

The same product can't have options with normal and absolute values at the same time. If you enable any of these toggles, all the options will behave as options with absolute values for this selected option.

The SKU Policy setting manages the way how the product SKU will be handled and will be described later in this document.

To create the new customizable option, click the Add Option button.

Mageworx Option Template Customizable Options

Once you specify the Option Title, the name of the tab will be automatically set up.

These tabs are collapsible allowing more handy and comfortable navigation. They are draggable as well: to change the position of the options, you need to press the eight-dots rectangle to grab the tab and change the position of the tab. The recycle bin icon deletes the tab. Note that this operation cannot be undone.

Mageworx Option Template Customizable Options

Once the name of the option tab is specified, you need to choose the Option Type.

Mageworx Option Template Types

All the types are divided into 4 separate groups:

  1. Text

  2. File

  3. Select

  4. Date

1. Text

This section can be useful in case the store owner wishes the client to put some text to personalize the product (e.g. the name to engrave on the cup). This section provides 2 option types to select from.

The Field is for one-string texts.

The Area is for multiple strings.

If you select either Field or Area, you can specify the Max Characters for limitations matters.

Mageworx Option Template Types Text

This information will be visible on the frontend.

2. File

Another option type for product option personalization. Allows users to upload files. In the backend, you can specify the file extension to load and the maximum width and height (if images are used).

Mageworx Option Template Types File

These extra fields are informing the client on the frontend. Extension uses the default Magento validation so in case the file extension or resolution doesn't match the requirements, the default error message will be shown.

3. Select

This one allows to visualize the customizable options. They cover all visualisation tools available in Magento.

Mageworx Option Template Types Select

On the left screenshot, you can see the dropdown and radio-buttons while on the right screenshot, the options types that were changed to checkbox and multiple select option types respectively.

4. Date

This group of customizable options may be quite useful in case the store owner wants to allow the user to specify some time (e.g., for the pick-up at store or such).

Mageworx Option Template Types Date

It is possible to specify date, the exact time and both date and time in the same row as separate option types.

Mageworx Option Template

To the right of the Option Type field, there are 2 checkboxes: Required and One Time.

Mageworx Option Template Required Field

If the Required is selected, the customer will need to select the custom option before adding a product to cart. On the frontend, this option is shown with the red asterisk.

If the One Time option is selected, the custom price will be added only once despite the quantity of the products added to cart, e.g, the custom price is +$4 and 10 products are added to the cart. The surcharge will be just $4 or $40 with this option unchecked.

To add the custom option, click the Add Value button.

The customizable options differ greatly depending on their type and the Option Features Configuration. The most basic setup is:

Mageworx Option Template Custom Options

The Title field adds the name of the customizable option.

The Price specifies the surcharge of the option, it's value depends on Price Type: if Fixed is selected, the numbers represent the exact sum of money, Per Cent stands for the percentage changes. If the product option doesn't change the price, the field can be left empty.

The SKU Policy will be described later in this document.

The extension provides the possibility to change the Sort Order either manually (by entering the desired order value) or by dragging the option values: to change the position of the options, you need to press the eight-dots rectangle to grab the tab and change the position of the tab. Once the position is changed, the Sort Order value will be changed automatically.

The recycle bin icon deletes the tab. Note that this operation cannot be undone.

Quantity and Manage Stock specify the Advanced Product Options Inventory.

The Is Default setting provides the possibility to specify the default value for the custom option. If selected, this will be chosen as the pre-defined one.

If the store owners need to temporary hide some product option value, they can switch the Disabled toggle. If all product option values are disabled, the option won't be shown on the frontend.

The Dependency button introduces the possibility to show the values in case some particular option is selected. The configuration of the dependency is provided below in this documentation.

The Advanced Pricing introduces the special/tier prices. The configuration is provided later in this document

If the settings in the Option Features Configuration are enabled, several more options are added:

Mageworx Option Template Custom Options

The ability to specify the weight and cost of the custom options provides more precise fine-tuning of the customizable options.

Weight is important for the correct calculation of the shipping costs right in the shopping cart. In case the product with custom options has an absolutely different weight, it will lead to the incorrect shipping costs.

Specifying the Cost allows calculating the net profit correctly. It is important for the reports.

Mageworx Option Template Custom Options

The Description option provides the ability to add description of the option that is shown on the frontend.

Custom Option Images

Custom option images implementation allows you to create a visual presentation of a product’s custom options. Thus, with this feature you can:

  • display images instead of custom options on the front-end;

  • upload multiple images to a custom option’s value;

  • assign the uploaded image to the custom options block or as the thumbnail;

  • replace a product’s image with a custom option’s one.

The images setup is available only for the select group of the custom options.

Mageworx Option Template Images

Option Gallery Display Mode provides the way how the images are shown.

Mageworx Option Template Images

If Disabled is selected, no images will be shown.



Mageworx Option Template Images

Beside Option displays images as thumbnails near the option.



Mageworx Option Template Images

Once selected hides all the images and show it only if some option is selected.



It is possible to display the image swatches by means of our extension. Swatch is actually the box with the image that is shown instead of the text. To enable the swatches view, select the Drop-down Option Type and click the Is Swatch checkbox.

Mageworx Option Template Images

Note that if no images are uploaded, the corresponding options get displayed as text swatches.

Mageworx Option Template Images

To upload the image for some custom option, click the Images button. The option gallery popup will appear.

Mageworx Option Template Images

To upload the image drag the image to the Brouse to find or drag image here (alternatively, you can click).

Mageworx Option Template Images

Once the image is uploaded, you can delete it by clicking the empty bin icon or change its settings by clicking it.

Mageworx Option Template Images

From here, you can specify the Text (that is actually the HTML alt tag) or temporary hide it.

Mageworx Option Template Images

The way how the hidden image is shown in the option galley popup.

The most important setting is the Role multiselect field. This is important if you wish to distinguish several images for one custom option:

  • the Base role is the default image. This is the image that will be shown as swatch if swatches are enabled;

  • the Thumbnail is the image that is shown in the thumbnail popup. (currently works only if the swatches are enabled);

  • the Replace Main Gallery Image hides the default image for this product and shows this image instead.

To be able to replace the default product image, the Image Mode setting should be modified to Replace option.

Mageworx Option Template Images

Roles Example

For instance, we've uploaded 3 images and selected separate roles for them.

Mageworx Option Template Images

After the changes in the option gallery popup are done, click the Continue Edit button.

Mageworx Option Template Images

On the frontend, we observe the product with the swatches, the image is the Base image and, on hover, we can observe the thumbnail image.

Mageworx Option Template Images

Clicking the red swatch will replace the base image of the product.

Use Cases

Click here to see the practical Use Cases of this functionality.

Dependent Custom Options

With Advanced Custom Options extension, you can create dependent custom options.

For this, on the child option click the Dependency button.

Mageworx Option Template Dependent Options

The dependency setup appears with the possibility to specify conditions.

Mageworx Option Template Images

The Dependency Type setting defines the conditions to display the current option value on the frontend. AND dependency sets the scenario, when the child option gets displayed given that all the parent options are selected. OR dependency sets the scenario, when the child option gets displayed given that any of parent options gets selected.

The Parent Options field allows choosing the option values that should be selected to display the current option value on the front-end. It supports the multiselect and the tree of options for the easy navigation though option features.

Sometimes, the value of the separate options or even the option names can be the same. To distinguish them, the special setting adds the possibility to add the suffix to the name.

If such a situation occurs, go to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Option Dependency.

Mageworx Option Template Dependent Options

Enabling Title Identifier setting allows specifying it in the Product Options configuration. The ID can be managed for both option and option value.

Mageworx Option Template Title Identifier

Use Cases

Click here to see the practical Use Cases of this functionality.

Advanced Pricing

To observe the Advanced Pricing pop-up, click the Advanced Pricing button on the child option.

Advanced Pricing APO

The extension provides the possibility to implement the special prices and the tier prices (aka customer group prices) in the custom option configuration. Setting up these price types encourages customers to purchase more.

Special Price

The Special Price can be offered for a defined period of time. It is shown instead of the regular one. The regular price is provided as well in the note, showing the possible benefit.

Advanced Pricing APO

Here, you can see the special price ($ 5.00) with the comment set in the advance pricing configuration and the original price of this option ($ 10.00).

This is the backend setup of the special price:

Advanced Pricing APO

For the Special Price, the store owner can select the desired Customer Group, From - To dates and enter the Comment visible on the frontend. The Price can be set as either Fixed or by Per Cent. If Fixed one is selected, the numbers represent the exact sum, the Per Cent one stands for the percentage changes.

Customer Group Price (Tier Price)

The Customer Group Prices (Tier Prices) lets you set quantity discount on each order item purchased in bulk. These prices can be set up for a designated period of time for some particular customer group just as the Special Prices.

Advanced Pricing APO

Here, you can see the customer group prices grid with the new price and the discount percent. Note that this percent is calculated from the special price (as here, $ 5.00) or from the original price (if the special price is not set up).

This is the backend setup of the customer group prices:

Advanced Pricing APO

The Customer Group Price / Tier Prices section provides the same grid as the special price with the same set of columns. This price type provides the possibility to specify the quantity threshold as well. This number states the minimum value for the bulk purchase with the new price. There is a direct correlation between the quantity and the price for one item. In the screenshot above, according to the settings, the customers should see the $ 6.00 price if they add at least 3 products, $ 4.00 for 5 products and so on.

However, as you may see on the frontend image, the first value ($ 6.00 for the 3 products) is not shown on the frontend. This happens because the Special Price value ( $ 5.00) is less.

Advance Pricing Configuration

The configuration and the layout of these prices can be managed in the Option Advanced Pricing configuration. For this, go to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Advanced Product Options and open the Option Advanced Pricing tab.

Advanced Pricing APO

Enable Special Price and Enable Tier Prices/Enable Customer Group Prices settings displays/hides the the special/tier prices settings in the backend.

The Display Tier Price Table, if disabled, hides the customer group prices grid.

The Option Special Price Display Template sets the custom text for the special prices. This configuration supports variables:

  • {price} sets the original, regular price;

  • {special_price} sets the price populated in the Special Price field for the current customer group;

  • {special_price_comment} adds the text that was added in the Comment block.

The Option Link allows the customer to solve a quite frequent task when the store owner needs to add some other products as the custom options of the main one. This can be done via bundle products creation, but it may be rather a time-consuming and tricky operation that doesn’t allow to change the custom option’s prices or some other features.

This can be solved by means of the Option Link functionality: the store owner should just add the products’ SKUs into the custom options SKU box and all the SKU’s characteristics will be automatically pulled into this option.

For this, go to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Advanced Product Options and open the Option Link tab.

Mageworx Option Template Custom Options

This settings specify what product’s attributes should be copied to the option’s ones when they are connected via SKU. If none is selected, nothing will be copied from the linked products to the option. When some settings are selected, they will be grayed out in the product option.

Suppose you need to associate the product option with some particular product like this one. The SKU of the product is 24-MG01.

Mageworx Option Template Custom Options If we put 24-MG01 in the SKU box of the product option, the name, value and the price will be automatically populated from this product.

SKU Policy

SKU Policy feature lets you determine how the SKU of purchased products with custom options will be formed in the order. The point is that if a custom option has a SKU, Magento will add it to the product’s SKU in the order.

SKU Policy doesn't create extra products in the catalogue. That’s why the SKU Policy only works when an option is linked to the product that already exists in the catalog. Note that it is possible to link only the simple and virtual products.

We provide several methods to manage the SKU policy.

First of all, the SKU policy settings can be handled globally. For this, go to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Advanced Product Options and open the Option SKU Policy tab.

Mageworx Option Template Custom Options

The merchant should Enable SKU Policy to use this feature.

There are 5 types of SKU solutions. We will check all of them based on the product with several custom options. The original SKU of the product is dell-opti-ind.

  1. The standard. If any information is provided, it will be added to the initial SKU with the hyphen like SKU-optionname. Separate custom SKUs are added in the same way (SKU-optionname1-optionname2). Mageworx Option Template Custom Options

  2. The disabled. This solution simply ignores the SKU and doesn't add it to the order. Only the main product SKU will be provided. Mageworx Option Template Custom Options

  3. The replacement. This mode replaces the product’s SKU with the option’s one in the order. The original SKU won't be shown in this case. Only the last product option SKU will be shown. Mageworx Option Template Custom Options

  4. The independent mode transforms custom options into separate items in the order and keeps the original product. Mageworx Option Template Custom Options

  5. The grouped mode transforms custom options into separate items in the order and hides the original product. Mageworx Option Template Custom Options

It's possible to apply the SKU Policy to the order view or to the cart and order view. Thus, you get a full control of how you need to display custom options with SKUs in the order.

You can select the mode in the extension configuration tab, for any product or per each option separately.

Mageworx Option Template Custom Options

Note that if the product option has the Use Config mode, then the product SKU policy will be used. In case the product SKU policy is set as Use Config as well, the mode from the extension configuration will be set.

Stock Management

Advanced Product Options extension allows you to specify the available stock quantity for each custom option's value.

Mageworx Option Template Stock Management

To start using the inventory for custom options, the Manage Stock toggle should be enabled and the Quantity set up.

Mageworx Option Template Stock Management

To change the way how the custom options inventory is shown for the clients on the frontend, go to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Option Inventory.

Mageworx Option Template Option Inventory

1. Display Option Inventory on Front-end allows showing the quantity of the custom option values on the frontend.

Mageworx Option Template Option Inventory

On the left screenshot, the frontend view with the option enabled, on the right the option is disabled.

2. Out-Of-Stock options. The products that are currently out-of-stock can be hidden or disabled on the frontend. This happens automatically when the quantity of the custom option reaches zero as well. If the setting is setup to Disable, the option will be visible on the frontend but not clickable. In case it is Hidden, it won't show at all.

Mageworx Option Template Option Inventory

On the left screenshot, the frontend view with the option Disable selected (option visible but grayed out), on the right the option is Hidden.

3. Display Out-Of-Stock message. If the Out-Of-Stock option is set to Disable, this configuration appears. It allows the store owner to hide the Out-Of-Stock message.

Mageworx Option Template Option Inventory

On the left screenshot, the Out-Of-Stock message is Enabled. On the right the option is Disabled

Сustom Option Inventory Report

Advanced Product Options extension has a detailed built-in stock report for custom options. There may be hundreds of such options and to have a quick view on all of them go to STORES ⟶ Other Settings ⟶ Option Inventory Report

Mageworx Option Inventory Report

The grid allows to sort the custom options. It may be useful to check the out-of stock or low-in-stock products.

Mageworx Option Inventory Report

The default Magento functionality to update several values from the grid in bulk is provided here as well. For this, mark the checkbox of the desired custom options and click the Actions Dropdown.

Click the Edit option:

Mageworx Option Inventory Report

This option mass-updates of the Quantity and the Manage stock toggle. Check Stock Management for the reference. To apply the changes click the Apply button and the Save Edits.

You can modify any particular custom option by clicking the Edit button.

Use Cases

Click here to see the practical Use Cases of this functionality.

Individual Product Custom Options

With the extension, you can create custom options for individual products. This provides the fine-tuning for the template in case some modifications are needed individually or the possibility to assign the templates to any product.

To modify the products individually, go to CATALOG ⟶ Products and select the desired product or click the Edit button on the Custom Option Inventory Report.

Mageworx Option Individual Product Custom Options

To assign the pre-created template, select it via the MageWorx Option Templates. Note that you can select several templates by Ctrl+Click. After that click the Save button.

Keep Options on Unlink toggle is used when it’s necessary to keep all the options of an assigned template after removing the connection between a product and this template. If the store owner removes the product from the template, its options will be deleted, unless the toggle is enabled.

The Import Option allows to select some other product with the custom options to transfer their values to this product.

The Add Option button adds the same blocks as described in the templates section of this manual.

Mageworx Option Individual Product Custom Options

These settings share the same design and logic that we've already described in the templates configuration. The name of the used template is provided above the options for better understanding if this particular option is added by template or manually.

Use Cases

Click here to see the practical Use Cases of this functionality.

Option Features Configuration

Extension's configuration can be found in STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Option Features.

Mageworx Option Features Configuration

These settings handle the appearance of the weight and cost fields for the custom options and the toggle for the absolute values of the weight and cost.

Mageworx Option Features Configuration

In case you do not need some of these fields, you can disable them in these settings.

Mageworx Option Features Configuration

These settings allow disabling the absolute price toggle and one-time price feature if not needed.

Mageworx Option Features Configuration

Got Questions?

MageWorx offers FREE lifetime support and updates for any extension developed for Magento. Need help with the extensions? Feel free submit a ticket from https://www.mageworx.com/support/ 



MageWorx offers outstanding services developing custom-tailored solutions for Magento platform to attain your eCommerce objectives. Our professional impassioned team provides profound and custom oriented development of your project in a short timeframe.