Once you have installed WooCommerce Product Options and activated your license key, it's time to start adding options to your products.

You can create as many product options as you like, structured into groups. You can either display the same options on all your products, or show/hide each group on specific products and categories.

Create and manage your product options in the WordPress admin under Products → Product Options. This page lists all your option groups, each of which can contain one or more product options.

You can watch this video, or find full written instructions below:

Option groups

When you first install the plugin, an empty 'Product Options' group is automatically created for you. Edit this as you wish, or delete it and create your own groups from scratch:

• Use the 'Add New' button to create a new options group.
• Hover over an existing group to edit, duplicate or delete it.
• Use the 'Sort' icons to re-order the list of groups. This will be used on any products that have more than one option groups visible - the group listed first will appear first on the product page.

Use the 'Edit options group' page to add/edit the name of the group, choose which products it appears on, and to add product options.

Option group name

Enter a name for the group of options. This will only be used in the WordPress admin and won't be visible to your customers.

Tick the 'Display' box if you want to display the name of the group above the options.

Visibility

By default, the options in the group will be added to all the products in your store. To change this, use the visibility settings to choose which products and categories the options will appear for:

• Products - Start typing the name of a product, and select all the products that you want the option group to appear on.
• Categories - Start typing the name of a product category, and select all the categories that you want the option group to appear on.
• Exclude products - Start typing the name of a product, and select all the products that you DO NOT want the option group to appear on.
• Exclude categories - Start typing the name of a product category, and select all the categories that you DO NOT want the option group to appear on.

You can use more than one of these options to create the exact logic you require. When creating more complex rules, we recommend checking the logic carefully to avoid conflicts or errors.

Further reading: Learn more about the logic for the visibility options.

WordPress caps the number of records returned by a query at 100 rows. For this reason, we do not recommend adding a large number of products to the inclusion or exclusion lists. If you need to use a group of options on a large number of products, we recommend using categories instead. See why queries are capped at 100 results.

Adding/editing product options

The 'Edit option group' page contains a table where you can add as many options as you like:

• Drag and drop the 'Sort' icons to change the order of the options. This changes the order in which they appear on the front end of your website.
• Use the '+ Add option' button to add new product options, and hover over an existing option to edit, duplicate or delete it.

Option name

Enter the name of the option, e.g. "Pizza Toppings". In a minute, you can choose whether or not to display this to visitors.

Tick the 'Display' box if you want to display the name of the product option on the front end of your site (e.g. "Pizza Toppings"). Alternatively, select 'No' to hide this and just show the choices without a title above.

Type

WooCommerce Product Options comes with 10 types of product option, plus two options for adding static information alongside your options. Click on a type to select it.

Types of product option: 

• Checkbox (the default) - Display 1 or more tick boxes, of which customers can tick one or more.
• Radio Buttons - Display 1 or more radio buttons, of which customers can select only one.
• Dropdown Select - Display a dropdown list containing more than one choice. Customers can select one option.
• Text Input - Display a text box that customers can type into. We recommend using this option type for collecting any text-based information including custom messages, email, address, URL/website, date/time, color picker/hex value, or password.
• Paragraph - Display a larger text box where customers can type larger amounts of text.
• Number - Create a field where the customer can enter a number, such as a phone number or measurement.
• File Upload - Allow customers to upload one or more files which will be sent with their order.
• Image Buttons - Display a grid of images, of which customers can select one or more.
• Color Swatches - Display a grid of color squares, of which customers can select one.
• Text Labels - Display a grid of text-based options, each appearing within a box. Customers can select one or more options.
• Customer Defined Price - Display a price field where customers can type an additional amount to be added to the cost of the product.
• Date - Display and date and/or time picker so that customers can select a date from a calendar.
• Price Formula - Create a hidden field which will perform a calculation based on the number fields. Learn more about adding price formula fields.
• Products - Select other products from your store (either individually or by category) to display as options, instead of creating the options manually. Learn more.

Static content: 

You can also add static information to appear above, between or below your product options. For example, if you have lots of options then you can structure them into several sections by adding a heading above each set of options.

• Visual Editor - This adds a WYSIWYG visual editor, where you can use the add headings and format your content, add images, and do anything else that you can usually do when adding content to a WordPress text or paragraph field.
• HTML - This adds a code editor where you can add HTML code.

Choices

Depending on which option type you selected above, you can add one or more choices which customers can select. For example, if you're creating a set of checkboxes for "Pizza Toppings" then you should create a "choice" for each topping (extra cheese, olives, etc.).

• Label - The label will always be displayed alongside the choice, e.g. "Extra cheese".
• Add media - This only appears for the "Image Buttons" option type. Use it to add the image which customers can click on to select a choice.
• Price type - If you like, then selecting each choice can change the price of the product:
  • No cost - Selecting the choice will not affect the total product cost.
  • Flat fee - A fixed amount is added to the total product cost, regardless of the quantity ordered. For example, if the flat fee is $2 and the customer orders 3 then the product cost will increase by $2. You can enter positive or negative prices - for example, entering -2 would reduce the total price of the product by $2.
  • Quantity-based fee - A fixed amount is added to the total product cost, which is multiplied by the quantity ordered. For example, if the fee is $2 and the customer orders 3 then the product cost will increase by $6. You can enter positive or negative prices - for example, entering -2 would reduce the total price of the product by $2 (or $4 of the customer orders a quantity of 2, and so on).
  • Percentage increase - This increases the product price by the specified percentage. For example, if the % increase is 20% and the product is $10 then the total price will be $12 - or $24 if the customer orders a quantity of 2. The calculation is made on the main product price and the cost of any other options selected is not considered.
  • Percentage decrease - This decreases the product price by the specified percentage. Again, the calculation is made on the main product price and the cost of any other options selected is not considered.
  • Character count - This only appears on Text Input and Paragraph fields, and allows you to charge a fixed amount for every letter entered. For example, if the character count is $0.50 and the customer enters "Happy Birthday" then the cost of the product will increase by $6.50 (i.e. 13 letters x $0.05).
• Selected - Use the toggle to pre-select a particular choice, so that it will be added to the cart unless the customer manually removes it. Only one choice can be selected for each product option (e.g. if you're using a dropdown or radio buttons to list a choice of pizza bases, then you can only pre-select one pizza base).

Description

If you like, then you can add some descriptive text which will appear below the choices. For example, you might add useful instructions for your customers such as "Select up to extra 3 pizza toppings".

Display

This only appears for the Image Buttons and Color Swatches option type. Choose whether you want to display the image/color swatch on its own with no label, or whether you want to display the option name too.

Required

Tick this box to force customers to select at least one choice before they can add the product to their cart.

Advanced settings

Enable the toggle to view the advanced settings.

Quantity limits

This is available for the checkbox, image button, and text label option types. Optionally enter the minimum and/or maximum number of choices which are required before customers can add the product to their cart.

Tips:

• The minimum and maximum do not automatically appear on the front end. If you wish to add this information as guidance for the customer (e.g. as a note saying: "Please select up to 3 extra pizza toppings.") then you should add this to the Description field (above).
• Minimum quantities are designed to be used to force customers to select more than 1 choice. Setting the minimum quantity to 1 will have no effect. If you want to force customers to select a particular option, then you should make the option required instead.
• These min/max quantity options only apply to your product options. If you want to set quantity rules for whole products, then you need our other plugin - WooCommerce Quantity Manager. This works nicely alongside WooCommerce Product Options.

Character limits

This is only available for the Text Input and Paragraph option types. Optionally enter the minimum and/or maximum number of characters which customers must enter before they can add the product to their cart. For example, if you're selling a bracelet with a custom engraving option then you should enter a maximum of '10' is there is only space for 10 letters.

Maximum file size (MB)

This is only available for the File Upload option type. Optionally enter the maximum size in megabytes for each file that users can upload. 

Further information: Where are uploaded files stored?

Maximum number of files

This is only available for the File Upload option type. By default, users can upload 1 file. Increase the number to allow them to add multiple files. 

Allowed file types

By default, the file types which are allowable on your overall WordPress site are listed here. Add and remove file extensions to allow users to upload specific types only, e.g. jpg or pdf.

Notes:

• File extensions are not case sensitive, so you can enter JPG or jpg.
• You can only enable file extensions which are supported by your overall WordPress install. WPBeginner have provided a useful article on how to change the allowed file types in WordPress.

Conditional logic

Use this to dynamically show/hide product options depending on which other product options the customer has selected. For example:

• If you're adding a 'Gift wrap' option to a product, then you might create a 'Ribbon color' option which only appears when 'Gift wrap' is selected.
• You can add conditional logic to the price formula field in order to use different price calculations depending on which other options are selected.

Add rules with the exact logic that you require, and use the + button to add multiple rules.

Image button and Product options

The following options will appear when you either add Image Button options, or when you're using the 'Products' option style and choose the 'Image Button' style.

Image width

By default, the images are 118 pixels square. The images will always be square, and you can change the size to anything you like by entering the required number of pixels.

Display

You can either display the images on their own, or you can display the name of each choice with the image. The options are:

• Display image buttons only
• Display label and image buttons

Note: If you have entered a price for a particular image choice, then this will always appear even if you have selected 'Display image buttons only'. This is because it's important for customers to know when selecting an option will affect the price, regardless of whether you are displaying any other text with the image.

Label position

You can choose a position and style for the text and price of each image option. The choices are:

• 
  Full overlay (selected by default) - The image is covered with a semi-transparent overlay, and the name (plus price if available) appears on the overlay. Customers can hover to hide the overlay and view the full image.
• Full overlay on hover - The image is displayed without any text or a price, and customers can hover over it to overlay the image with the option name (plus price if available).
• Partial overlay - The bottom half of the image is covered with a semi-transparent overlay, and the name (plus price if available) appears on the overlay. Customers can hover to hide the overlay and view the full image.
• Above image - The name (plus price if available) appears above the image.
• Below image - The name (plus price if available) appears below the image.

 

Note: We have intentionally made the image overlays quite dark to ensure that your site meets accessibility guidelines for minimum color contrast. There is no option to increase the transparency of the overlay because this would cause your site to fail accessibility tests. Customers can hover over an image to remove the overlay and see the full image. If you want the image to be visible more clearly without having to hover over it, then we recommend using one of the options without an overlay.

Update main image

Enable this if you would like the main image on the product page to update when a customer selects an image button. When this is enabled, the images from the buttons will also appear in the product gallery which most themes display as thumbnails under the main image.

Date options

Selection options

• Disable past dates - Greys out all dates in the past so that they cannot be selected.
• Disable future dates - Greys out all dates in the future so that they cannot be selected.
• Disable today - Prevents customers from selecting the current day.
• Enable time - Displays a time picker on the calendar, so that customers can choose a date and time.

Disable days

Use this option to select specific weekdays which will always be greyed out. For example, if you are closed every Sunday then you would click in the box and select Sunday.

Date format

Changes the format of the selected date. Learn more.

Date limits

Enter the earliest and latest possible date which will be available on the calendar. Learn more.

Disable dates

Mark specific dates as unavailable, for example if you are closed over a holiday period. Learn more.

Time limits

Enter the earliest and latest possible date which will be available on the calendar. Learn more.

Time increment

Control the length of time for each available time slot (e.g. 30 minutes). Learn more.

Price formula options

Formula

Enter the formula for the price calculation using the syntax which appears underneath the field. Learn more.

Price display suffix

Use this if you want to add some extra text to appear after the main product price which appears at the top of the single product page. For example, if you're selling fabric by the meter and want to display the main product price as "$25 per meter" then you would set the price display suffix as "per meter".

If you're also using the 'Price display suffix' setting in WooCommerce → Display → Tax then both suffixes will display. For example: "$25 per meter inc. VAT".

Ignore main product price

Enable this to stop the main product/variation price from being added to the total price of the product.

For example, if you're selling fabric by the meter then you might want to set the basic product price as $25 in order to display it as "$25 per meter" on the product page - but you don't want $25 to be added to the final price when the customer inputs their actual dimensions.

You can still use the [product_price] parameter to manually add the main price to the formula. However, enabling this option will stop the main product page from being added to the results of the price formula automatically. This gives you greater flexibility in how (if at all) the main product price relates to the calculated price.

'Products' options

The 'Products' option type lets you select other products from your store to display as options. When you select this, several additional options appear:

Product selection

Choose how you will select which products appear as options:

• Select specific products - Choose individual products or variations which appear as options.
• Select products dynamically - Select a category and have products from this category selected dynamically based on certain criteria. To control which products are selected, you can choose:
  • Limit - The maximum number of products from the category which can be displayed.
  • Sorting - Choose whether to select products by Title, Price (highest), Price (lowest), Rating (highest), Rating (lowest), Date (newest), Date (oldest), or Popularity.

Display choices as

Choose from a range of styles for how the products will be displayed:

• Products - Show the products in an ecommerce-style format with an image, name, price, and button.
• Checkboxes - List the products as multi-select checkboxes.
• Radio buttons - Display the products as radio buttons. Customers can only select one at a time.
• Dropdown select - Show the products as a dropdown list. Recommended for saving space on the page.
• Image buttons - Show the products as clickable images, either with the product name overlayed over the top, or just the price.

View and display your product options

And that's it! Once you have added all your product options, we recommend checking how they look on the front end of your website. Keep tweaking until you're completely happy.

By default, the product options will appear on the individual product pages. To maximize your sales, you can use our other plugins to display them in exciting locations elsewhere on your site - for example:

• In product tables, so that customers can select options from the product list view without having to visit individual product pages.
• In a quick view lightbox, directly on the Shop homepage.
• In a restaurant food order form.
• In a bulk variations grid.
• In an on-page popup cart.

Related Articles

• Installing WooCommerce Product Options