QODE Product Extra Options for WooCommerce

• created: 08/01/2024
• latest update: 08/05/2024
• by: Qode Interactive
• helpcenter.qodeinteractive.com/

Hi, and welcome to the QODE Product Extra Options for WooCommerce User Guide. The User Guide covers all the information needed to use the QODE Product Extra Options for WooCommerce plugin with your theme to build an amazing eCommerce website.

If you need any additional assistance while using our plugin, you can always submit a topic to the support forum at wordpress.org/support/plugin/qode-product-extra-options-for-woocommerce and our support team will be glad to help you out. You can also send us an email at [email protected]

You can navigate through different sections of the User Guide by clicking on the links in the menu to the left of your screen. You will also notice that we have highlighted certain parts of the text throughout the User Guide, such as important pieces of information and useful tips.

The QODE Product Extra Options for WooCommerce plugin is designed to take the eCommerce experience on your website to new highs by allowing you to present your shoppers with easily adjustable free or paid advanced product options in lists and on product single pages.

Installing the QODE Product Extra Options for WooCommerce plugin

First off, here's a list of minimum requirements as well as recommended hosting parameters for running QODE Product Extra Options for WooCommerce plugin: 

Minimum Requirements

• WordPress 5.0 or greater
• PHP version 5.6 or greater
• MySQL version 5.0 or greater

Recommended Hosting Parameters

• PHP version 7.0 or greater
• MySQL version 5.6 or greater
• WordPress Memory limit of 128 MB or greater

There are two ways you can go about installing the QODE Product Extra Options for WooCommerce plugin: 

Installing From Your WordPress Dashboard

1. Navigate to your WordPress Dashboard -> Plugins -> Add New
2. Search for QODE Product Extra Options for WooCommerce
3. Install and Activate Qode Product Extra Options from your Plugins page.

Installing Directly From wordpress.org

1. Locate and download QODE Product Extra Options for WooCommerce on wordpress.org
2. Upload the qode-product-extra-options-for-woocommerce directory to your ‘/wp-content/plugins/’ directory, using your preferred method (ftp, sftp, scp, etc…)
3. Install and Activate QODE Product Extra Options for WooCommerce from your Plugins page.

In the following sections of the User Guide you'll find a comprehensive overview of all the settings available in the plugin's QODE Plugins for WooCommerce > Product Extra Options section of your WordPress admin panel once you have installed and activated the QODE Product Extra Options for WooCommerce plugin.

The settings found here are applied globally and will affect the entirety of your website.

You can look up any of the available global options by typing in the keyword or a part of the option name in the search field located at the top of the screen in the Product Extra Options options section. 

In the Global section of the plugin options you are presented with options for making general adjustments to the plugin funcionalities.

This is where you can choose between displaying the 'Select Options' or 'Add to Cart' buttons in WooCommerce loops. In the event that you select the 'Select Options' buttons, you can also input a custom label for the button. 

After this, you have the option to select where you wish to place the options on product single pages relative to the 'Add to Cart' button. 

The set of options that follows lets you choose whether you wish to hide titles and images from option groups, hide images from single options, and display names of selected options. 

Following this you can opt to change the product base prices in price boxes by enabling the price of selected options to be calculated in the total price.

You can also choose which info you'd like to display in the total price box; you can show product price and total options, show the final total but hide options total only if value is 0, show only the final total, or you can hide price box on the product page. 

Next up, you can choose whether you wish to hide the 'Add to Cart' button until the required options are selected, and you can enable a 24H format for time pickers. 

The remaining options let you adjust the options for files uploaded by your customers.

First off, you can input a name of the folder that will be used to store files uploaded by users. After this, you can choose which file types will be allowed for upload, adjust the maximum sizes for uploaded files, and choose whether to include the uploaded files in order emails or not.  

This is where you can set up the product extra features partaining to the cart page. 

You can allow option editing in carts (which will effectively display an 'Edit' button for products in carts), you can choose whether to show the added options in carts or not, choose whether to display product images with option images in the cart, and finally, select whether to include or hide added options from order emails. 

This is where you can make general adjustments to the appearance of blocks. 

Blocks are sections in which the individual options can be inserted. 

First off, you can choose a heading tag for the titles in the block options. Following this, you can set a background color for the blocks, input values for block content padding, and choose whether to display options in toggles.

In the event that you enable displaying options in toggles, you can choose whether the toggle will be opened initially by default or not. 

Next up, you can choose whether you wish to display tooltips for options when they are hovered over. 

In the event that you enable this option, you can choose the position for the tooltips inside blocks, as well as adjust the text color and background color for tooltips. 

After this, you can make stylistic adjustments to the price boxes. You have the option to choose a color for the price box text, as well as the price box background. 

Following this, you can configure the appearance of required options. You can set a color for options that are required, as well as to input a custom label for those products. 

The set of options that follows pertains to the appearance of select field form styles. You can choose whether you wish to use the plugin-styled, predefined style or the style of the theme you are using. 

In the event that you select the predefined style, you can choose whether to apply this stylization only to the plugin select  fields or all select fields on your site, and you can pick a checkbox style, main selected option color, form border color, radio button color, radio button color in inactive state, label font sizes, and description text font sizes. 

Options that follow allow you to configure the appearance of Color Swatches. First off you can pick a style for the swatches, and adjust the size of color swatches thumbnails. 

Next up, you have settings relating to the appearance of Image or Label options for products. You can configure the label style, position, description position, input values for label padding, set the default image position, and choose whether you wish to force equal image heights for these product options. 

The final set of options found here allows you to configure the apperance of Upload Files. You can input a custom label for the 'Upload Files' section, choose a type of link you wish to display. and adjust the background and border colors for this section. 

Blocks are sections or your product pages in which you can insert specific extra product options you wish to feature.

In this tab of Product Extra Options you'll find an overview of all the blocks with options you have created. You'll also be able to see the block priority, products which have the specific block, and their status (active or inactive). 

You can also edit the blocks from this page, and create new blocks by clicking the 'ADD NEW' button found in the top right of the screen. 

Adding New Blocks

To add a new block, click the 'ADD NEW BLOCK' button in the top left. 

First up, you'll get presented with options for making general adjustments for the block you are creating. 

You can input a block name, and set a priority level for the block and effectively set up the order for this block shown for products relative to other blocks and their respective priority levels (1 is the highest priority level). 

After this, you can choose whether the block you are creating will be shown for all products, or specific products or categories. In the event that you selected the latter, you'll be able to choose which previosly created products and categories will contain this block. You can choose one or more products and/or categories.

Next up, you can choose whether you wish to exclude certain products and effectively prevent this block from being displayed for them. If you choose to do so, you can select the product(s) you wish not to feature this block. 

Finally, you can choose which users will be able to see this block. You can display it to all users, guest users, logged-in users, or you can specify the user role(s) which will be privy to this block. 

Adding Options to Blocks

To add Product Extra Options to this block, you should click the 'ADD OPTION' button found in the bottom left of this screen.

In addition to addint the product options themselves, you can also make use of the three HTML elements: Heading, Separator, and HTML Text. 

HTML Heading

Here you can add a heading text, set a heading tag for said text, input CSS classes you wish to add to the heading tag, and adjust the color for the heading. 

Separator

This is where you can set up separators which can be placed in the option blocks. 

You have the option to choose a separator style, input CSS classes you wish to add to the separator holder, adjust the separator width, height, and in the event that you selected on of the bordered separator styles, you can set the separator border colors here. 

HTML Text

Here you can add some HTML text to the option block. 

You can input the content you wish to display, as well as add CSS classes you wish to add to the content holder. 

Adding Product Extra Options to Blocks

Now you can add the product options you wish to feature in this block. 

There are 12 options to choose from: checkbox, radio, input text, textarea, color swatch, number, select, label or image, product, date, file upload, and color picker. 

Checkbox

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Radio

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Option Configuration

You can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Input Text

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input placeholder text, input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can limit the amount of characters the users can enter into an input field to a certain value by inputting the maximum and minimum number of characters. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Textarea

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input placeholder text, input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can limit the amount of characters the users can enter into an input field to a certain value by inputting the maximum and minimum number of characters. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Color Swatch

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Here you can choose between color or image swatches. Depending on your selection, you'll be able to set a color for the color swatches (set only the first color for single color variant, input both for creating a color range for gradient effect). If you input two colors, you'll be able to adjust the gradient rendering here. If you selected the image swatch style, you can set an image to be displayed for the option here. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can make the option required to be selected by users in order to proceed with their purchase. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Number

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

The set of options that follows lets you choose how you wish to display the number field initially. The field can be left empty by default, or you can input a default number to be displayed in the number field. 

You can also adjust the minimum and maximum values that the users can input in the number field, or leave this option open-ended.

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can make the option required to be selected by users in order to proceed with their purchase. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Another setting found here lets you force users to enter values within a specific range of values when all the options are added together. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Select

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you can enable forcing users to pick options from this block in order to proceed with their purchase.

After tjos, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Label or Image

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can make the option required to be selected by users in order to proceed with their purchase. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Product

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can choose one of the products you wish to show. 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can make the option required to be selected by users in order to proceed with their purchase. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Date

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can choose one of the products you wish to show. 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Following this, you can pick a date format you wish to use for the option, and input a start and end year. After this, you can pick a default date to be shown, and choose which dates will be selectable. 

You also have the option to enable or disable specific dates. 

Next up, you can choose whether you wish to show a time selector for the option. You can enable time slots, and set up the rules for these slots by inputting specific times and selecting whether the option is enabled or disabled during them. You can add multiple time slots if you choose to do so. 

The option that follows allows you to set up time intervals for the option; you can input the amount of time and pick the time unit (interval type) which applies here. 

Finally, you can make the option required to be selected by users in order to proceed with their purchase. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

You can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

File Upload

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

You can also make the option required to be selected by users in order to proceed with their purchase. 

Finally, you can choose whether you wish to allow users to upload multiple files. In the event that you choose to enable this option, you can limit the maximum number of files users can upload. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status. 

Color Picker

There are four tabs found here: option settings, option configuration, display settings and conditional logic. 

Option Settings

Here you can input a title to be displayed before the options (the text provided here can also be optionally used as a title when the product with the selected option is in cart), and input some description text to be displayed before the options. 

After this, you can proceed with the setup of the option. 

You can click the checkbox at the top of this set of options to display the option as selected by default. Next to the checkbox you'll also find a toggle which turns the option on or off. 

Here you can choose what to show in the picker. You can opt for the a default color or placeholder text, and set up your selection accordingly by picking a color or inputing the placeholder text. 

Following this, you can input a label for the option (and optionally use this label in the cart if you wish), input some text for the option tooltip, input some description text, and add an image to the option (this replaces the default product image). 

Next up, you can set up the option price and choose how it affects the total product price. 

You can set the option as free, or it can increase or decrease the total product price. 

If you select the Product Price Increase price behavior, you'll be able to set the option price. 

You can input the amount you wish to set for the option price, add a sale price (the regular price will be shown as crossed-out, with the sale price shown below it), and choose between the fixed amount and percentage behaviors for the price. 

If you selected the Product Price Decrease option, you can input the amount for the price (the product total price will be decreased by the amount specified), and choose between the fixed amount and percentage behaviors for the price. 

Finally, you can make the option required to be selected by users in order to proceed with their purchase. 

Option Configuration

In this tab you'll be able to make further adjustments to your option. 

First off, you'll have the option to choose whether the users can select only one option or multiple options. 

After this, you can choose whether you wish to offer a certain number of options to be added to the product for free. 

Following that, you can enable forcing users to pick options from this block in order to proceed with their purchase.

In the event that you choose to do so, you can set rules for this feature. You can choose between the at least and exactly conditional rules, and input the amount that refers to this selection. In addition to this, you can set a maximum number of options users can select for their purchase. 

Finally, you can enable the sale of individual options here. Options are added to the cart in a separate row and their prices are not impacted by the quantity of purchased products. 

Display Settings

Here you can configure how the options in this block appear. 

You can choose a display type for the option, pick a style for the color swatches, set a size for the swatches, and you can upload an image to be displayed for this set of options. 

After this you have the option to choose the default product image to be shown, and in the event that you do not select to hide option images, you can adjust their position. 

Following this, you can choose whether to display the options in toggles. If you choose to do so, you can pick whether the toggle will be initially opened or closed on page load. 

Next up you can choose whether you wish to hide option labels and prices, and adjust the size for the gap between options in px. In addition to this, you can input the number of options to be displayed per row, and optionally align the options in a grid layout. In the event that you enable this option, you'll be able to set the number of columns for option rows for different responsive stages separately. 

Conditional Logic

Here you can choose whether you wish to add specific conditions under which the options will be shown or hidden. 

You can also hide or show the options from this block on specific product variations. 

Finally, the display rules allow you to choose between show and hide behaviors, if you enabled hiding/showing options for product variations you can pick the variations here, and finally adjust the rules themselves. The status of options can be conditioned by all the rules, or any of the rules set here. The rules are defined by selecting an add-on and picking its desired status.