View Product Page

Add options

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.

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

Global options - Options

This is how our add-on is shown on the frontend.

Add-on example

Duplicate options

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:

Duplicate option

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!

Duplicated option