Firstly, it essential to create an options group including all the add-ons we want to insert in one or more products of the shop.
Go to “Products -> Product Add-Ons” and click on “Add New”.
Assign a name to the group and choose to which products you want to associate it.
The plugin allows creating three “typologies” of options group:
- “global”: options are inserted to all the products of the shop
- “by category”: the options group is applied to the products related to one or more specified categories
- “by product”: the options group is used only on the selected product. For further information about how to create an options group from the product editing page, we suggest reading this page of the documentation.
The plugin allows creating options groups for variable products, but not for single product variations. The options group can be configured in the general product information and not in a different way for single variation.
Before inserting all the options of the group, configure the following parameters:
- “Priority”: the priority is used to give an order to the options group shown in product page (in value ascending order)
- “Visibility”: the option allows choosing to hide the options group, to show it to all users or only to the administrator of the shop.
By way of example, we have decided to create an options group that will be shown only on “Ring” product.
If you need to create a group with similar add-ons, consider the possibility of duplicating a group.
From the page where all groups are listed, click on the duplicate icon as shown in the following image:
An exact copy of the group will be created, including all the items in it. Start editing the ones that need to be changed and leave the others unchanged. This button will let you save a lot of time!
The third and last step of the configuration of a new add-on is related to the option addition associated to it.
Please note: in order to show the add-on, you must insert at least one option.
With the ‘drag and drop’ option you can sort the list of options.
Specify for each of them the following values:
- Option label: the text to identify this option on the frontend
- Description: enter here details about this option (valid for all types of add-ons except for Select)
- Placeholder: the placeholder text shown if no text has been entered by the user yet. Use this to help your users have more information about how to use the option (valid only for Date, Number, Text, and Textarea types of add-ons)
- Tooltip: type the text that will be shown as a tooltip (valid for all types of add-ons except for Select)
- Price: the price associated with the option can be calculated in 4 different ways depending on the related add-on type
- fixed price (valid for all add-on types)
- percentage price: based only on the base price of the product (valid for all the add-on types)
- multiplied by the length of the string: the option base price is multiplied by the length of the text string the user inserted in the option (valid only for Text and Textarea add-on types)
- multiplied by the option value: the option base price is multiplied by the value the user inserted in the option (valid only for Number type add-ons)
- “Min/Max”: these values can be configured if the add-on is of “number” typology
- “checked”: if the add-on is of “checkbox” typology, it can be used to set a single product as “checked”
- “Hide label”: hide label and only show input field
To enable/disable the display of add-on option details, go to “General” section of the plugin settings dashboard.
This is how our add-on is shown on the frontend.
If you need to create an option similar to an existing one, consider the possibility of duplicating the option.
From the page where all options are listed, click on the duplicate icon as shown in the following image:
An exact copy of the option will be created, including its details. Start editing the parts that need to be changed and leave the others unchanged. This button will let you save a lot of time!
Each add-on option may include all or just two of the following fields:
Here is a table that lists all add-ons and which fields are supported for each of their options.
For example, the date add-on supports the three of them, but the description only since version 1.5.1.
This is how the date add-on fields look like:
Did you insert a number type add-on in the product? Only in this case, you can set the product quantity as the sum of the option values for the number type add-on. How to do it? Enable the Calculate quantity by values amount entry for the number type add-on as shown in the following image.
In this way, the product quantity to add to the cart will be given by the values the user inserted in the number type fields.
Remember: you can take advantage of this feature exclusively if there is only one number type add-on among the ones available for your product.
For each add-on you have created, you can enable the product image “replace” feature in case the user selects the add-on.
To allow this action, it is essential to apply the following conditions:
- the “Replace the product image” option must be enabled on the add-on
- you must associate an image with the add-on or with its single options
When the user will select the add-on, the system will dynamically replace the highlighted product image with the one associated with the option or with the add-on.
If you have problems switching images with your theme, you can select one of the “Replace image” methods:
- Alternative method
- Divi method
- Paul’s method
Start by setting the standard method, if it does not work you can try out the other options. The standard method works with standard themes like Twenty Nineteen or Storefront.