WooCommerce conditional product add-ons and options

You’re adding extra options to your products but you only want to show them when certain conditions are met. For instance, customers can enter text to be engraved on your products – but only if they’ve selected a checkbox first. Or – some options are available only for certain product variations. This article will show you how to use the WooCommerce Product Add-Ons Ultimate plugin to create conditional product add-ons.

Everything you need to know about WooCommerce conditional product options and add-ons

Through this article, we’ll look at what WooCommerce extra product options are and how you might use them in WooCommerce.

Use the menu on the left to navigate the article.

We’ll look at how you can apply conditional logic to enhance your product options, with several examples of how this might apply in real life. The examples will include:

• An online jewellery store that offers optional engraving
• A store selling personalised gifts
• A furniture store selling highly customisable products

I’ll walk through examples of simple and complex conditions, including fields that are dependent on multiple conditions being met, with clear instructions on how to set them up.

With the Product Add-Ons Ultimate plugin, you can apply your conditions to fields or to groups.

We’ll also look at applying conditional logic to WooCommerce product variations so that the customer will only see certain fields if they choose specific variations.

Conditional extra product options in WooCommerce

Product options are extra fields, like checkboxes, text fields, dropdowns, etc, that are added to WooCommerce products, usually through an add-ons plugin like WooCommerce Product Add-Ons Ultimate plugin.

Product add-ons are essential if you want to allow your customers to personalise or customise your products. Extra fields:

• Allow you to collect extra information about your customers
• Let customers configure your products in different ways
• Enhance your customers’ experience on your site

WooCommerce Product Add-Ons Ultimate

In order to add extra options with conditional logic to your WooCommerce products, you’ll need an add-ons plugin. Add-Ons Ultimate has conditional logic built in to the Basic and Pro versions, allowing you to create products where you can apply WooCommerce product add-ons conditional logic.

Group conditions

Note that the examples in this article show you how to display or hide individual fields based on conditions. But you can extend this to apply your conditions to entire groups. This means that you can show or hide multiple fields with a single set of conditional rules.

What is conditional logic?

Let’s step back for a minute and think about what we mean exactly when we talk about conditional logic.

The term ‘conditional logic’ does sound a bit scary. But all it really means is:

If this thing happens, then that thing will happen too

So, for example, let’s imagine we’re running a jewellery business and we’d like to offer our customers the option to have an engraving on their purchased product.

We don’t want a great big text field cluttering up the page so we add a checkbox saying ‘Would you like engraving?’ When the customer selects the checkbox, then the text field appears:

That, in its simplest form, is what conditional logic means.

There are several examples below of how to create product options in WooCommerce using simple conditional logic like this and using more complex conditional logic.

Conditional logic triggers and outcomes

In all cases, the outcome of a piece of conditional logic is to change the visibility of a product option: either to show or hide it. In the example of the engraving above, the outcome of selecting the checkbox is to show the text field.

However, even if the outcome is always the same, the triggers can be different.

Conditions based on other fields’ values

The most common trigger is based on checking the value of one or more fields. The customer can trigger a piece of conditional logic when they change the value of a field. For example:

• Checking or unchecking a text box
• Entering certain defined text into a text input field
• Choosing a specific option from a group of radio buttons or from a dropdown field
• Selecting a specific combination of checkboxes from a group of checkboxes

Cost-based conditional logic

Another trigger is based on cost. So, for example, let’s say that your custom engraving is only available when the customer chooses a product over a certain cost.

We can set a trigger so that the extra field only displays when the cost of the product goes over a certain value. The cost can be altered by the customer if they choose certain options, or if they increase the quantity they’re purchasing.

Product variations conditional logic

A third conditional logic trigger is based on product variations. Using the jewellery example again, let’s imagine that you are using variable products. Engraving is only available on certain variations. In this case, the extra field will only be displayed when specific variations are selected.

Multiple triggers

Product Add-Ons Ultimate can handle all these triggers, even complex ones like showing/hiding a field only when certain options are selected in a checkbox group. It can also handle combining multiple triggers, like only showing a field for certain variations when the cost is greater than a certain value.

Evaluating conditions – how to check what’s true and what’s not

As I mentioned above, the outcome of a condition is to change the visibility of a field. There can be more than one trigger and triggers can be defined in multiple ways. Let’s have a look at an example:

On the first line, we have two select fields. One is an action to define what the outcome of the logic will be – i.e. to ‘Show this field’. The second is an operator to define whether all your triggers need to be true or if any trigger needs to be true. In this case it’s set to ‘Any rule matches’.

The next two lines show two rules. Firstly, we’ll check the value of ‘Field 1’ to see if it’s set to ‘Option 1’. Then, we’ll check the value of ‘Field 2’ to see if it’s set to ‘Option 2’.

Only one of our rules needs to be true for this field to be displayed because our operator is ‘Any rule matches’.

Make sense? Let’s look at some real-life examples.

Adding a custom engraving option to your product

We’ve talked a lot about our example of the jewellery store offering optional engraving, so let’s actually look at how it works.

(By the way, there’s a tutorial on creating a WooCommerce engraving product here).

Very simply, we’re going to use WooCommerce product add-ons conditional logic to show a text field if a checkbox is enabled.

In the image above, you can see that the checkbox called ‘Add personalized message’ is checked and the text field called ‘Text to be engraved’ is displayed.

There’s a working demo product here so you can see first-hand how it functions.

Adding extra option fields

Before we can create our conditional logic rules, we need to create the extra fields for the product – namely the checkbox and the text field – using the Add-Ons Ultimate plugin. I’m not going to go into details about doing this – there’s a detailed guide to adding extra fields here.

The fields will look like this:

I’ve highlighted the condition at the bottom of the image. You can see that we add the condition to the second field – the one that will be displayed if the condition is met.

We’ve set the action to ‘Show this field’. This means that when the user first visits the product page, the field will be hidden. It will only be displayed when the condition is met.

For the condition rule, we’ve selected the checkbox field in the left hand select field and chosen ‘Is’ as the operator. If you wanted the field to display if the checkbox was deselected, you could choose ‘Is not’ here.

Because the field is a checkbox, the value of ‘Checked’ gets automatically added.

So very simply, the text field will display if the checkbox is checked.

Check it out here.

Personalised gifts using WooCommerce conditional variations

Okay, for our next example we’re going to imagine we’re selling personalised gifts. We’ve got a special romantic gift – a personalised poster where you can add your name and your partner’s name. You can also add a special date if you like.

(By the way, you can find out more about how to add a gift wrapping option to your products here).

WooCommerce product conditional variations

We’re using a variable product – one variation is for ‘Names only’, the other variation is for ‘Names and date’. The names fields will be displayed for both product variations but we’ll use conditional logic to display the date field for the ‘Names and date’ variation.

You can see the working product demo here. Note how the ‘Date’ field appears when you change the ‘Post type’ variation to ‘Names and date’.

How to set up WooCommerce product variations conditional logic

After creating our variable product, we need to add three add-on fields: ‘First Name’, ‘Second Name’ and ‘Date’. All three are just text fields.

To ensure that the ‘Date’ field only appears when the ‘Names and date’ variation is selected, click into the ‘Variations’ field and select the variation from the list:

That’s a really simple way to set conditional logic on WooCommerce variations.

Complex conditional logic – upload a file for printing

Let’s make a product with more complicated conditional logic. In this example, we’re running a store where customers can create personalised greetings cards.

Depending on what choices the customer makes, they might need to upload a file. But they’ll only see the file upload field under the following circumstances:

• They select the option to use their own image
• They choose to upload their image rather than emailing it

You can view the demo here.

You can also find out more about uploading files to a WooCommerce product page here.

Setting up the conditional logic

In total, the product has four add-on fields:

• Textarea for the message
• Checkbox for using an image
• Radio group to select how to provide the image
• File upload field

The logic works like this: if the customer checks the option to use their own image, the radio group will appear. If they select the option to upload the image, the file upload field will appear.

From the image above, you can see how the conditions have been set for the upload field.

In theory, you can add as many condition rules as you like.

Conditional options for WooCommerce – final thoughts

WooCommerce product add-ons conditional logic sounds like a scary topic – but hopefully you’ve seen how easy it is to set up, even for groups and variations.

All you need is the WooCommerce Product Add-Ons Ultimate plugin.