How to set up conditional logic for product options in WooCommerce

If you let customers personalize their products by entering information into different fields, you might also need a way to display certain fields sometimes, depending on the customer’s selection. In other words, you might be looking for a way to add conditional logic to product options.

By adding conditional logic for products, you can display certain product options when a customer enters a specific value for a different field. In this tutorial, we’ll show you how you can set up conditional logic for product options in WooCommerce.

Let’s put everything in context before we begin.

Conditional logic and WooCommerce variations

Out of the box, WooCommerce lets you create variable products, which are products with additional options (called “variations”). However, it doesn’t have any options available for adding conditional logic to your product variations. This means that you can’t show or hide variations in WooCommerce. By default, all variations are shown.

To add conditional logic to WooCommerce product variations, you need a plugin like Advanced Product Fields for WooCommerce. This plugin lets you create various additional product options and add conditional logic to them. This way, you can show or hide product options in WooCommerce depending on various conditions.

Why set up conditional logic for product options?

If you sell customized or personalized products, there are plenty of scenarios where you might need to set up conditional logic for product options.

Put simply, you can set up conditional logic whenever you want to offer product options based on the user’s previous selection. Let’s step through a few examples:

• If you’re selling birthday cakes, you can only display a file upload field if a user selects “I want to personalize my cake”. The file upload allows customers to upload a photo they want to see imprinted on top of the cake.
• Display a date picker if customers tick the “Get your groceries delivered to your doorstep” checkbox.
• If you’re selling jewelry, show a text field to let customers enter a message if they select the option to engrave their purchase.

By setting up conditional logic for product options, you make it easier for customers to place their orders, enhancing the customer’s shopping experience on your online store. Adding conditional logic to product options also makes it easy to offer personalization options to customers. Plus, you can collect order information in an organized way.

You can set up conditional logic for all sorts of products. Here are a few examples:

• Subscription boxes for groceries, toiletries, or snacks.
• Personalized products such as custom T-shirts and hoodies, jewelry, or smartphone cases.
• Upselling products. For example, you can add an extra option such as, “Do you want to purchase extended warranty”?

By now, you should have a better idea of what conditional logic for product options is and why you might want to set it up. Next, let’s take a look at how you can add conditional logic to product options.

How to set up conditional logic for product options

Here, we’ll show you how to set up conditional logic for product options in WooCommerce. We’ll assume you already have a WooCommerce store set up with some products and product options that you’d like to add conditional logic to.

Step 1: Install the Advanced Product Fields for WooCommerce plugin

Get the Advanced Product Fields for WooCommerce plugin. It lets you add product options in various ways. There are 16 different input types to choose from, and you can add as many options as you’d like.

Once you’ve installed and activated the plugin on your WordPress website, head over to WooCommerce → Settings → Product fields from the dashboard to activate the plugin license key.

Step 2: Create a field

The first thing you need to do is create a field that you’ll add conditional logic to. So let’s say we want to add conditional logic to a hoodie product. You want to give customers the option to monogram it or have an image printed on it.

To set it up, you’ll need to create a product field group. Head over to WooCommerce → Product Fields from the admin panel and click on the Add New button. Give the product field group a title.

Following our example, let’s say you want to give customers the option to:

• Enter initials that will be monogrammed on to the hoodie, or
• Upload an image to print on to the hoodie.

Select list field to let customers choose a customization option

From the Fields metabox, click the Add your 1st Field button to add a select field. Here’s how:

1. Set the Type to Select list.
2. Enter a Label and Instructions.
3. Use the Options field to set options by clicking the Add option button.

Text field to let customers enter initials

Click the Add a Field button to add additional options. Here’s how you set up the second field:

1. Set the Type to Text.
2. Enter a Label and Instructions.
3. Toggle the Required option on.
4. Enter Placeholder text.
5. Set the Minimum length and Maximum length.

File upload field to let customers upload an image

Click the Add a Field button to create a file upload field. Here’s how you should set it up:

1. Set the Type to File upload.
2. Enter a Label and Instructions.
3. Toggle the Required option on.
4. Enter Accepted file types and Maximum file size (MB).

Click the Publish button to save your work so far.

Step 3: Create conditional rules

As mentioned earlier, conditional rules let you decide when to show a specific field. Using the Advanced Product Fields for WooCommerce plugin, you can create as many conditional rules as you’d like for the fields you create. These are called conditional rule groups.

Since we want to give users two options to customize the hoodie product, we’ll set up conditional logic to display the monogram options if the customer selects Monogrammed, and the file upload options if the customer selects Image.

Here’s what you need to do:

1. Open up the second field (the Initials text field) and scroll down to the Conditionals setting.
2. Click the Add new rule group button.
3. Enter the conditional rule to show this field if Customize the hoodie value is equal to Monogrammed.

Now this field will only appear if the user selected Monogrammed as their customization option.

Do the same thing for the file upload field:

1. Open up the third field and scroll down to the Conditionals setting.
2. Click the Add new rule group button.
3. Enter the conditional rule to show this field if the Customize the hoodie value is equal to Image.

Finally, use the Conditions meta box on the page to display the field group only on the product pages you’d like to offer these customization options on:

To do this, click the Add your first rule button and choose the products you’d like to add it to. You can add the product fields to one or more products.

Now click the Update or Publish button to finish your work.

Preview

When you preview the products to which you have added the additional product options and conditional logic rules, it will roughly look like this:

If the customer selects the Monogrammed option, then the field we have created to let customers enter their initials will appear on the screen:

Similarly, if the customer selects the Image option, then the field we have created to let customers upload an image to be printed on the hoodie will appear on the screen:

And, since we have adjusted the price for the additional product fields, the product total is automatically updated to reflect the total amount the customer will be charged.

Conclusion

By setting up conditional logic for product options in WooCommerce, you can keep your product pages neat and concise. This helps you deliver a good user experience to customers and makes it easier for the shop manager to keep track of personalized orders.

Once you’ve created a few fields, you can set up conditional logic by entering conditional rules. The Advanced Product Fields for WooCommerce plugin lets you add as many conditional rules as you’d like. This way, you can create complex customization options that look neat and organized on the front-end.

The plugin also lets you set up conditional logic for variable products. Check out our tutorial on How to Add Additional Options to a Variable Product in WooCommerce for step-by-step instructions.

Get the Advanced Product Fields for WooCommerce plugin to set up conditional logic for product options today!