How to add conditional logic to your product add-ons
When you use the WooCommerce Product Options plugin to create your product add-ons, it's easy to add conditional logic. Each product add-on comes with an option to show or hide it based on the user's other selections. That way, you can create dependencies between your options or add-ons.
Examples of conditional logic
Showing and hiding options
For example, in the below screenshot, clicking 'Use pre-built template' conditionally displays the 'Your name' and 'Job title' product options, which are not required when 'Upload my own design' is selected:
Conditional logic for price formulas
The price formula field type lets you create custom price calculations based on the information provided by the customer. You can use conditional logic to use different price formulas depending on which other options the customer selects.
For example, imagine that you're selling made-to-measure curtains where the price per metre differs depending on the fabric type. You can add multiple price formulas to the same product and use conditional logic to show/hide each one so that a different formula is used depending on which fabric type the customer selects from a 'Fabric Type' dropdown.
Conditional logic for the 'Products' option type
Imagine that you're selling a smartphone and are using the 'Products' option type to display a choice of phone cases which are also available as products elsewhere in your store. One of the phone cases has a 'Custom engraving' option and you want to offer this when customers order it from the smartphone product page.
You can do this as follows:
- Create a 'Products' option to display all the phone cases on the smartphone product page.
- Create an 'Engaving' option and use conditional logic to only display it when a particular phone case is selected.
Warning: When you add the 'Products' option, there is a choice of display styles such as checkboxes, image buttons, etc. If you're using conditional logic then you must not select the 'Products' display option. That's because this gives each item its own add to cart button, and the conditional logic can only be triggered when the customer selects the item. As a result, you must use a display option which the customer can actually select instead of adding straight to the cart.
How to add conditional logic to product add-ons
- Edit the option group that contains the options that you want to add conditional logic to.
- Click to add or edit an option, and add each add-on as a separate 'Choice'.
- Click on the 'Advanced' toggle to display the conditional logic section.
- Select the logic that you require.
For example, the following screenshots show how we added a gift wrap option to a product. The product page loads with only one add-on visible: "Gift Wrapping." When the customer clicks the "Yes please" checkbox, the other gift wrap product add-ons appear underneath using conditional logic.
-
- 1. Set up the conditional logic
-
- 2. The product add-ons will be shown or hidden based on the user's selections
Further reading: The complete guide to creating WooCommerce conditional variations.