How to implement conditional logic for your APF fields

When creating your forms with Advanced Product Fields for WooCommerce, you’ll quickly find the need to show or hide fields based on values of other fields. This article explains how to do just that!

Introducing our example

To illustrate how conditional logic works, we’ve created a “tailored travel package” builder as a demo product. It’s a simple product asking the customer questions about their prefered vacation destination and style:

Custom travel package builder with conditional logic

Implementing conditional logic

Step 1: your first field

The first thing you need to do is create a field with some options for your customer to choose from. For our travel demo product, we’ll start by asking the customer for their prefered vacation destination: beaches, mountains, cities, or wilderness.

Let’s dive in!

Edit the product you’d like to add options to and find the Custom Fields section and click the Add Your First Field button.

Add your first product input field in the WooCommerce backend.

Here are the settings for our first field:

APF Image swatches configuration in the backend
  • As Field Type, we chose Image Swatches.
  • We gave our field a Label, which is the title the customer will see above the options.
  • We marked the field as Required, which obligates the customer to make a choice before adding the product to their cart.
  • We’ve added some options. Customers can choose one of the following: Beach, Mountains, City, or Wilderness.

Step 2: create the field that should appear after conditions are met

Now, it’s time to create fields that should only appear when certain conditions are met.

In our example, we want to ask the customer about their prefered travel activities. When users selected “Beaches” as their prefered destination, we only want to show activities you can do on the beach, like walking or surfing. But if the user wants to go to the mountains, we want to suggest mountain-based activities such as hiking or climbing.

Click the Add Field button to create a 2nd field. Here’s what our settings look like:

APF checkboxes configuration in the backend
  • The Field Type is set to Checkboxes.
  • We added a Label and Instructions.
  • Again, we marked the field as Required.
  • And finally, we added some options related to beach activities.

Step 3: defining the conditional logic

Now that we’ve created 2 fields, we can define our conditional logic settings. Remember, we only want to show the 2nd field when the user selected “Beach” as their prefered destination.

Edit the field created in step 2 and scroll down until you find the Conditionals setting. click the Add New Rule Group button:

Adding conditional settings to an APF field

A rule group is a collection of rules that should be valid before the field shows up. This means all the rules of the group should be valid.

In our demo, we only have 1 rule (“Beach” should be selected), so that’s easy:

Adding conditional settings to an APF field

Multiple conditions (“AND logic”)

But what if you want to display a field that depends on multiple previous fields? Just click the And button to add more rules. Let’s see how this works with an example:

The 3rd question of our custom travel package asks customers what their prefered beach accommodation is. We want to show this question if 2 conditions are met:

  1. The user has selected “Beach” as their destination type.
  2. And we only want to show the 3rd question if question 1 and 2 were answered (for a better UX experience).

So, we need a group with 2 rules:

Adding multiple rules in a conditional rule group in APF

Now, the field only shows if the destination type is beach AND the user has selected at least 1 activity.

Multiple conditions with “OR logic”

What if you want to show a field when A is true or B is true? You can do that by clicking the Or add new rule group button and creating additional rule groups. Let’s see how this works with an example:

When customers stay 7 days or more, we want to inform them that they are enjoying a discounted day rate. We can do that by creating a content field of type Text & HTML and adding our little message there.

The conditionals setting for our Text & HTML field looks like this:

Adding multiple rule groups in a conditional rule group in APF

If the customer selected “7 days” OR “10 days” OR more (“custom”) as their duration, the field will show:

Showing text with conditional logic

Combining AND with OR logic is also possible and makes the Advanced Product Fields for WooCommerce form builder extra powerful!

Was this article helpful?

Related Articles