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.xDatabase tables in v. 2.0
wp_yith_wapo_groupswp_yith_wapo_addons
wp_yith_wapo_typeswp_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

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 – free version

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
  • Select

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.

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

Let’s start with the Populate options tab >

Populate options – free version

In the Populate options, you will be able to add as many options as you wish. For example, if you choose a Checkbox 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:

The Populate settings of every option vary based on the type selected. Let 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:

  • 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
  • Selected by default
  • 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:

  • 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
  • Selected by default
  • 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 Delivery with two options:
1. pick up in store is free of charge and is the default selection
2. delivery at home has an additional cost of $29.99

Delivery options - radio buttons

Input text

Input text settings

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: let your customer have a custom text printed on a T-shirt for extra $5. The text can be no more than 20 charcaters. 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.


Select

Select

For every option you can set:

  • Label
  • 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
  • Selected by default
  • Required: if enabled, the customer cannot add the product to the cart without entering a text in this option.

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.


Move on to the Conditional logic >

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:

Advanced settings – free version

From the advanced settings, you will be able to set whether to let the user select only one or multiple options for every options set.

Example: you let your users select multiple pizza toppings from a list of checkboxes.

Please, note, this tab and this functionality is only available for the checkbox options sets.

Options pricing

In this post we will cover all price options, the general ones available in all types of options and the extra ones available for specific options sets:


General price options

For every option, you can choose one of the following:

  • product price doesn’t change – set option as free
  • increase the product price (on-sale available as well)
  • discount the product price

When you select either increase or decrease, you can choose the price as:

  • fixed or
  • percentage

Also, you can set not only the regular price for the option but also a sale price.

Example: you sell customizable baby towels, with 4 different options.
1. The baby dragon discounts the base product price of 10%
2. The pink mermaid would generally cost $10.00 more, but it is on sale for +$3.00
3. Sweet lamb and 4. Teddy bear will not change the base product price.

Below you find the settings of the Pink mermaid option and the frontend of all 4 options.

Image option with extra cost and on-sale

Pro tip: if you want to offer a certain number of options as free, but charge the users if they select more, you can do that from the Advanced settings (option available only with the premium version).


Custom price options for Product type

Whenever you create a Product type option (so, include an existing product as add-on of another product), you have some extra options concerning the price.

  • use the price of the linked products
  • discount price of linked product: this discount will be available on the product only if the user buys it as an add-on.

Example: you sell a customized print and want to offer a frame as an add-on with a special 30% discount.


Extra price options for Text inputs and Textareas

Do you offer a custom ring with engraving options and want to charge the user $1 for every letter?

Text input and Textarea options include this extra feature and allow you to multiply the cost of the option by the number of characters typed in by the user.

When you choose to Increase the product price, besides fixed or percentage, you will be able to choose also Price multiplied by string length:

Example: in the screenshot below you can see that the cost of the engraving is €1 per character, so a total of €7 as the word forever is made of 7 letters.


Extra price options for Number

If you create a Number option type, you will have a couple of more options at your disposal to control the price.

Multiply by product price

In the Price dropdown, besides the standard options, you will be able to select also the Value multiplied by product price option.

This allows you to multiply the price of the product by the number entered by the user.

Example: if you sell fabric by the meter, you may want to let the customer use this option, enter the number of meters needed and get the product price updated based on that value (decimal values are supported).
If the fabric is €15/meter and the user selects 4,5 m, it will cost €67.50.

Multiply by option price

The Number options set includes this extra feature and allows you to multiply the cost of the selected option by the value entered by the the user. So, for example, 2 cokes at €2 each will add €4 to the total.

When you choose to Increase the product price, besides fixed or percentage, you will be able to choose also: Price multiplied by value.

Price multiplied by value

Example: you offer drinks as extras on a pizza and want the user to enter a quantity for each drink: 2 cokes for €2.00 each and 1 beer for €4.00 each will add €8.00 to the total.

Additionally, you can also limit the input number and set a minimum and maximum value for every option:

Block display rules – free version

From the block settings > Rules you will be able to choose on which products the options block will show and users who will be able to see them.

Show this block of options in:

  • All products: you will be able to exclude some products if needed.
  • Specific products and categories: you will be able to select one or more categories. You can exclude some products from this setup, if needed.

General options – free version

In the General settings tab, you will find two sections, the first of which is about General options, let’s check them one by one.

General options

Options position in product page:

  • Before “Add to cart”
  • After “Add to cart”

In WooCommerce pages show:

  • “Select options” button
  • “Add to cart” button

Both of them will take the user to the product page, where the user can configure the add-ons.

Label for “Select options” button: customize here the text of the “Select options” button that shows on archive pages when a product has add-ons to be selected.

Change the product base price with the calculated total: enable to replace the product base price (below the title) the the newly calculated total of the selected options.

Hide “Add to cart” until the required options are selected: if your product includes required options to be selected, enable this to make sure the “Add to cart” button is hidden until they are selected. Leave it to OFF, if you want to show the “Add to cart” button but keep it disabled until the required options are selected.

Total price box:

  • Show product price and total options
  • Show the final total but hide options total if the value is 0
  • Show only the final total
  • Hide price box on the product page

Hide titles and images of options groups: enable to hide all titles and images set in the “display” tab of the options.

Hide images of all singular options: enable to hide all the images uploaded in the “populate options” tab of the options.