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:
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.
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.
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
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.
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
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.
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.
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.
For more global settings of your upload options, please, refer to this page.
Color picker
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.
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.
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
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 labelLeft side
Below labelRight 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
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 layoutNo 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).
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.
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.
For every options set, you can configure also some more advanced settings, let’s see what this tab offers.
Set the first selected options as free
Enable to set a specific number of options as free. For example, the first three pizza ingredients are free and included in the product price. The user will pay for the fourth ingredient.
In the example below, you can see that the product price does not change for the first 3 ingredients, but it adds $2 per any additional ingredient selected after the fourth.
Selection type
Single: user can select only ONE of the options available
Multiple: user can select MULTIPLE options
Please, note, this tab and this functionality is only available for the following options sets:
checkbox
color swatch
label or image
product
Minimum, maximum, exact number of options selected
Moreover, if you select Multiple in the option above, you will be able to also set a minimum and/or a maximum number of selectable options, or the exact number of options that the user has to select.
Example: I would like the user to select a minimum of 2 ingredients for the pizza, but a maximum of 5.
Force selection
If you want to force users to select an option before proceeding with the purchase, you can enable the option Force user to select an option.
Please note – This option is available only in the Select type.
Sell options individually
By enabling Sell options individually, the options selected by the user will be added to the cart in a separate row. In this case, option prices won’t change based on the purchased product quantity.
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:
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.
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 foreveris 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.
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:
