Magento 2 Advanced Product Options Manual

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. 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
    

    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.

1. 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.

Show in the Frontend. The toggle that allows the store owner to temporary disable the template.

2. Products Relations

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

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.

3. 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.

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 personalisation. 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

This 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 visualise 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, 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.

Current extension's implementation provides the basic SKU modification: 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)

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 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 for 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.

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 name will be shown instead.

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 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.

Dependent Custom Options

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

Assuming, the store owner sells T-shirts for boys and girls: the green and pink are for girls only, the black are for boys only, the red and blue are for both girls and boys.

Mageworx Option Template Dependent Options

So, 2 custom options will be needed: one for the gender (values: girls, boys) , another for the color (values: red, pink, blue, green, black).

On the color options click the Dependency button.

Mageworx Option Template Dependent Options

The dependency setup appears with the possibility to specify conditions. Clicking the Add button provides the list of other product options. The logic is to choose the parent option. The current option will be visible only in case the parent one is selected.

Note!

Any option types can be used for the child option but only select type can be selected as the parent.

In case you need several parents, they can be added by clicking the Add button several times. The recycle bin icon deletes the condition. This operation cannot be undone.

Red and blue options are the same for both girls and boys so the dependencies for them will be like

Mageworx Option Template Dependent Options

Green and pink are for girls only, so the dependency will be a single one:

Mageworx Option Template Dependent Options

Black t-shirts is for boys only, so the boys should be selected for the black color dependency:

Mageworx Option Template Dependent Options

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

On the dependencies setup, it will be shown in the brackets in both option and value dropdowns.

Mageworx Option Template Title Identifier

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 options 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.

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 PRODUCTS ⟶ Catalog 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 (1). Note that you can select several templates by Ctrl+Click. After that click the Save button.

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

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

It is also possible to modify the products.

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.