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.

Installation Via Composer

  1. Create a folder anywhere on your server (preferably not in the Magento installation directory). Put the zip archive into this folder.

  2. Use any SSH client to connect to your server. Navigate to the root Magento folder. Bear in mind that the user should write permissions to this folder and its subfolders.

  3. Add the folder with the extension's archive as a repository. For this, run the Composer command:

    composer config repositories.mageworx artifact {/ABSOLUTE/PATH/TO/FOLDER}
    

    like:

    composer config repositories.mageworx artifact /mageworx/extensions/zip
    

    This command will add these lines to your composer.json file:

    "mageworx": {
        "type": "artifact",
        "url": "/mageworx/extensions/zip"
    }
    
  4. Perform the command:

    composer require mageworx/module-advancedproductoptions
    
  5. Clear the compiled code and the cache:

    php bin/magento setup:upgrade
    
  6. To update the extension via composer perform the command:

    composer update mageworx/module-advancedproductoptions
    

Installation by copying the code

  1. Download the extension's package from your customer account, unzip it.

  2. Use any SSH client to connect to your server. Bear in mind that the user should write permissions to this folder and its subfolders.

  3. Upload all the files and folders from the extension's package to the root Magento folder.

  4. Via SSH, navigate to the root Magento folder and perform the command:

    php bin/magento module:enable MageWorx_OptionBase MageWorx_OptionDependency MageWorx_OptionInventory MageWorx_OptionFeatures MageWorx_OptionTemplates MageWorx_OptionLink MageWorx_OptionSwatches MageWorx_OptionSkuPolicy
    

    This extension consists of separate submodules

    All of them need to be enabled for the extension to be working correctly.

  5. Clear the compiled code and cache:

    php bin/magento setup:upgrade
    php bin/magento cache:flush
    php bin/magento setup:static-content:deploy
    

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.

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.

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.

SKU Policy

If the store owners need to associate some pre-existing product to the custom option, they can put the SKU of this product to this box.

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.

The values that will be populated from the original product can be managed in the Option Link Configuration. 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.

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 http://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.