View Product Page

Migrate from 1.x to 2.0

Since version 2.0 of YITH Product Add-ons, you will be able to use the totally new redesigned and refactored version of this powerful plugin, which includes now not only a more user-friendly design, but also lots of new amazing features.

If you’re installing version 2.0 (or a greater version) of this plugin, you can skip this page.

If are using any previous version of this plugin and you have configured at least one add-on before, as soon as you switch to the new 2.0 version, all the add-ons created in version 1.x will be automatically copied.

From a technical point of view, the plugin will create 2 new tables in the database that will be independent from the ones used by the 1.x version.

Database tables in v. 1.x Database tables in v. 2.0
wp_yith_wapo_groups wp_yith_wapo_addons
wp_yith_wapo_types wp_yith_wapo_blocks

As the tables are independent between the two versions, in case of any issue with the new version (due to incompatibilities with other plugins or similar cases), it will be possible for you to switch again to the 1.x version and restore the older settings without the changes.

So, just make sure you update to version 2.0 (or greater) first. Then, go to YITH > Product Add-ons: you’ll see the old settings page here (please, refer to the legacy settings here).

Legacy settings panel

To switch to the new version, then, go to Products > Add-ons and click on the button Switch to the new 2.0 version.

This is the start screen you will see, but no worries, you can always switch back to version 1.x at a later stage, if needed.

Version 2.0 - start screen

Options blocks

In the first tab of the plugin settings, you will be able to configure your blocks of options.

Every block can group unlimited options sets of different types, and each options set can have unlimited options in it.

To create your first block, go to YITH > Product Add-ons > Options blocks.

This is how it looks like:

(If you’re using a previous version than 2.0 and need to import the add-ons, please, refer to this page)

Click on + Add block to add your first block.

Options block - name and priority

Here you will be able to set:

  • The name of the options block
  • A priority that will help you sort the blocks in case more than one block apply to the same product.

Then, you will be able to configure the options and the rules. We’ll check all the available settings in detail in the following pages.

Also, after closing the options block, you will see them all in a list and using the buttons on the right, for each block you can:

  • edit
  • duplicate
  • delete
  • move with drag&drop
  • enable/disable the block in one click.
Actions on blocks

Options blocks

In the first tab of the plugin settings, you will be able to configure your blocks of options.

Every block can group unlimited options sets of different types, and each set of options can have unlimited options in it.

To create your first block, go to YITH > Product Add-ons > Options blocks.

This is what it looks like:

Click on + Add block to add your first block.

Here you will be able to set:

  • the name of the options block
  • priority that will help you sort the blocks in case more than one block apply to the same product
  • the possibility to show the block of options in all products or specific products and categories
  • the possibility to show options to all users, only guest users, only logged-in users or only specific user roles

Then, you will be able to configure the options and the rules. We’ll check all the available settings in detail on the following pages.

Also, after closing the options block, you will see them all in a list and, by using the buttons on the right, for each block you can:

  • edit
  • duplicate
  • delete
  • move with drag&drop
  • enable/disable the block in one click.
Blocks list actions

HTML elements

Let’s start from the Options tab. Here is where you can add either an HTML element or an options set. Just click on Add options.

New block

Let’s focus on available HTML elements first:

Heading

You can set the text, the type of heading (H1 to H6), and the color.

Text

Enter a custom static text here .

HTML text

Separator

Configure a graphic separator that you can use between your options sets.

HTML separator
  • Separator style: simple border, double border, dotted border, dashed border, empty space.
  • Width (px)
  • Height (px)
  • Color

Move on to the next section:

HTML elements

Let’s start from the Options tab. Here is where you can add either an HTML element or an options set. Just click on Add options.

New block

Let’s focus available HTML elements first:

Add HTML elements

Heading

You can set the text, the type of heading (H1 to H6) and the color.

HTML heading

Text

Enter a custom static text here.

HTML text

Separator

Configure a graphic separator that you can use between your options sets.

HTML separator
  • Separator style: simple border, double border, dotted border, dashed border, empty space.
  • Width (px)
  • Hight (px)
  • Color

Move on to the next section:

Options sets

From the Block settings > Options tab, click on + Add options and you will be able to choose between one of the following types of options sets:

  • Checkbox
  • Radio
  • Input text
  • Textarea
  • Color swatch
  • Number
  • Select
  • Label or image
  • Product
  • Date
  • File Upload

For every option set, you can enter a title that will help you identify it in the options list of the block:

Option title and list of options

Also, after closing the options set, you will see them all in a list and using the buttons on the right, for each set you can:

  • edit
  • duplicate
  • delete
  • move with drag&drop
  • enable/disable the block in one click.
Actions on the options sets

For every options set, you will see different settings tabs:

Available settings for options

Let’s start with the Populate options tab >

Populate options

In the Populate options, you will be able to add as many options as you wish. For example, if you choose a Label/image options set to display the available pizza toppings, every option will be one topping.

To add more options in this set, just click on + Add a new option:

Add new option

The Populate settings allow enabling or disabling every option and vary based on the type selected. Let’s go through all of them one by one below.


Checkbox

As opposed to radio buttons, checkboxes let your users select more than one option for the same set. For every option you can set:

  • Selected by default
  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: add extra paid options to your custom box delivered at home like order tracking and insurance.


Radio

For every option you can set:

  • Selected by default
  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

By its very nature, users can only select one option in a radio input. Use checkboxes if you want to let users select multiple options instead.

Example: I can create a radio add-on for the SSD Storage with two options:
1. 256GB SSD with an additional cost of $30 and selected by default
2. 512GB SSD with an additional cost of $65


Input text

For every option you can set:

  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Number of characters: you can set a minimum and maximum value here.
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: let your customer have a custom text printed on a T-shirt for extra $5. The text can be no more than 20 characters. Explain what this is for in the option description. The screenshot above shows these specific settings and below is how it appears on the frontend.


Textarea

For every option you can set:

  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Number of characters: you can set a minimum and maximum value here.
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: show a textarea for delivery notes.


Color swatch

For every option you can set:

  • Selected by default
  • Show as:
    • single color swatch
    • double color swatch
    • image picker
Single
color swatch
Double
color swatch
Image
color swatch
  • Color picker: pick the color from the spectrum or enter the hexadecimal code
  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: you sell the Macbook pro in two colors, space gray and silver gray. For each of them you have not only selected a color using single color swatches, but also uploaded an image of the macbook in that color.
The settings are shown in the screenshot above, whereas below you can how it looks on the frontend.

Color swatches with images

Number

For every option you can set:

  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • price multiplied by value (this option will be available if you select Increase by product price): this allows you to multiply the option price by the number you enter.
    • discount the product price
    • value multiplied by product price: this will multiply the product price by the number that you enter in the option.
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: you can add a number add-on to collect the age of users for statistic purposes.


Select

For every option you can set:

  • Selected by default
  • Label
  • Description
  • Required: enable this option if you want to make the add-on required
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price

Example: you write copy and you offer two standard length for a blog post:
1. up to 500 words is the basic product price
2. 501 to 1000 words has an additional cost of $10.
Settings are in the screenshot above, frontend is below.


Label or image

For every option you can set:

  • Selected by default
  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: you sell customizable baby towels, with 4 different options.


Product

With the Product add-on you can include one or more products as options of another product. This will automatically update the stock of the selected products.

For every option you can set:

  • Selected by default
  • Product: pick a product from your WooCommerce products
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
    • use price of linked product
    • discount price of linked product: this discount will be available on the product only if the user buys it as an add-on.
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: you sell a customizable computer and you can let your user choose every part of it by selecting processor, motherboard, case etc. Each of these parts will be an add-on with products/options the user can choose from.


Date

  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Date format: choose between
    • Day / Month / Year
    • Month / Day / Year
    • Day . Month . Year
  • Year: select the start and end year you want to display in the calendar picker. You can refine this ranges with the options below.
    For example, if you want to let your users select a delivery date only within the year 2021, select 2021 both in the start and end year, but if you want to let your users select their date of birth, make sure the start year goes back enough to cover your users’ actual age.
year
  • Default date: this is the date that will be selected by default on the frontend:
    • None
    • Current day
    • Currenty day + 1
    • Set a specific day
    • Set a time interval from current day: for example, 7 days from today
    • First available date
7 days from today
Example of 7 days from today
  • Selectable dates:
    • Set no limits
    • Set a range of dates – this allows you to select a date range from the current date. For example, the user will be able to select any date between 1 and 10 days from today.
    • Set a specific date range – this allows you to select a specific start date and end date (for example 20th – 30th May), static dates basically.
  • Enable/disable specific days: you can enable or disable custom dates, days of the week, months or years. For example, you may want to disable deliveries on Sundays, Christmas and the months of July and August.
July August and Christmas disabled
  • Show time selector: let your customers select also the time. You can either show every time slot available or enable/disable specific time slots. Choose also the time interval that will be used to automatically generate the time slots.

Example – in the following screenshot, you see time slots of 30 minutes between 9am and 6pm.

Time selector - frotntend
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

File upload

For every option you can set:

  • Label
  • Tooltip
  • Description
  • Image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

Example: you sell a customizable T-shirt and let your customers upload their own image(s) to be printed on it.

Upload your logo

For more global settings of your upload options, please, refer to this page.

Color picker

Color picker options

For every option you can set:

  • the picker to show: you can choose from a default color and a placeholder text
  • default color or placeholder according to the previous selection
  • label
  • tooltip
  • description
  • image
  • Price: the option price can be calculated as a fixed or percentage amount from the product price:
    • product price doesn’t change – set option as free
    • increase the product price (on-sale available as well)
    • discount the product price
  • Required: if enabled, the customer cannot add the product to the cart without choosing a color in this option.
Color picker on frontend

Move on to the Display settings >

Display settings

For every options set you can have custom display settings. The options are the same for all types of options sets, except for the Product set that will be explained below on this page.

Display settings 1

Show an image for this add-on

Enable to show an additional image or icon near the title. You can have both an image for each option and an image for the set.

Example: in the screenshot below, we set a custom image for each option, without any label, plus the additional add-on image (the truck icon), and set the image position to the right (see settings below).

Product image replacing options

Choose to replace the default product image when an option is selected and which image to use to replace it.

  • Don’t replace the image
  • Replace with add-on image
  • Replace with options images
Add-on image
Add-on image
Option image
Option image

Note: make sure that if you replace the product image either with the add-on image or the option image, you don’t have more than one add-on with these settings in the same product. If you have more, the replacement image will be the one of the last selected add-on.

Options images position

(not available for Label and Image as it has its custom Style tab)

  • above label
  • below label
  • left side
  • right side
Above label
Left side
Below label
Right side

Show as toggle

  • no
  • yes, with toggle opened by default
  • yes, with toggle closed by default

Hide options images

Hide the images of all the options in this add-on in one click. Please, note, that if you’re using an image color swatch, also this image will be hidden.

Hide options labels

Hide the labels of all the options in this add-on in one click.

Hide options prices

Hide the prices of all options in this add-on in one click.

Options layout

Display settings - label 2

In the second section in this tab, you will also find some extra options layout to control the way the options are displayed on the page.

Options per row: you can set it to 1 to 10 options per row.

Use a grid layout: enable to adjust the options in a grid based on the page width. This is particularly useful when you have many options with texts of different length: forcing them into a grid will make them cover the same space.

Grid layout
No grid

Options width (%): if you enable the grid layout, you will be able to choose how much of the grid tile the option will cover. For example, you can set this to 80% to add some extra spacing between tiles.

Example: in the following screenshots, there’s a setting of 4 options per row in a grid view, with 100% or 80% width.


Product options set — custom display settings

The display settings of the “Product” add-on differ from the general ones. It will look like this:

Show an image for this add-on: enable to show an additional image or icon near the title.

Show as toggle:

  • no
  • yes, with toggle opened by default
  • yes, with toggle closed by default

Hide options prices: hide the prices of all options in this add-on in one click.

Show SKU label: enable to show the related product SKU.

Show stock label: enable to show the stock info and quantity (if set).

Show add to cart button: enable if you want that customers can not only select these products as components of the main product, but add them to the cart as individual products.

Show quantity selector: enable to let your customers select the quantity of the add-on product.

In this image you see the SKU, stock, Cart button and quantity selector options enabled.

Options layout are the same as for all other add-ons (please, see above).

Move on to Conditional logic >

Style — Label and image

Style tab - label and image

These options are only available for the Label and image options sets (add-ons) and override what you can globally set up from YITH > Product Add-ons > Style.

Additionally here you can set the Content alignment to either Center, Right or Left.

Conditional logic

The conditional logic is extremely useful if you want to hide or show some options based on what the customer selects in another options set.

After enabling the creation of display conditions, you will be able to set up the display rules.

You can choose whether to show or hide the current options set (add-on) if either All of the following rules or any of them match.

You can create unlimited rules and for each of them, you can pick as a condition:

  • either the entire set of options
  • or one specific option selection
  • or a specific product variation.

Then set if it has to be:

  • Selected
  • Not selected
  • Empty
  • Not empty

Let’s give an example to clarify how these rules work.

Example — show X if set of options Y is selected

You offer copy writing as a paid service, but SEO keywords can be added optionally and at an extra cost.

So, use a checkbox to let the user add the extra paid service for SEO keywords, and only if it is flagged, show a textbox where the user can type them in.

Create both add-ons, and then from the Textarea conditional logic, set the display rule like in the following screenshot:

This is what your customers will see on the frontend.

Move on to: