WooCommerce Conditional Fields: How to Add Them to Your Store

Looking to add WooCommerce conditional fields to your online store? This article is for you.

Conditional fields let you show or hide form fields in your store based on what a customer selects. This is important for giving them a smooth shopping experience, where they select options before completing a purchase. For example, the product and checkout pages.

If you’re trying to add conditional fields to your store, you’ve probably run into the problem that WooCommerce doesn’t support them by default. We’re here to help.

In this article, we’ll show you how to add WooCommerce conditional fields to both the product and checkout pages.

Here’s a breakdown of what we’ll cover:

• What are WooCommerce conditional fields?
• How is adding them to the product page and checkout page different?
• How to add conditional fields to WooCommerce product pages using the Advanced Product Fields for WooCommerce plugin.
• How to add conditional fields to the WooCommerce checkout.
• Common use cases for WooCommerce conditional fields in your store.

What are WooCommerce conditional fields?

Conditional fields are form fields that are shown or hidden depending on a customer’s selections. With conditional fields, instead of showing every possible field to every customer, you show only the ones relevant to what they select.

For example, a gift message box that only shows up when a customer clicks Add gift wrapping. Or a file upload field that only appears after they’ve chosen a product option that needs one.

If the condition isn’t met (in this case, if a customer doesn’t click ‘Add gift wrapping’), those fields stay hidden.

How conditional fields work

Conditional fields work by setting conditional rules (also called conditional logic) to determine what should happen before a field is displayed.

Basically, “if this happens, then show that”. For example:

• If the customer checks the Add gift wrapping checkbox, then show the Gift message text field.
• Or if the customer selects Custom logo, then show the Upload your logo file upload field.

WooCommerce won’t display conditional fields by default to every customer. Instead, it checks whether a condition has been met. If it has, the relevant field appears instantly. If not, it stays hidden.

Conditional fields can respond to several triggers, such as:

• The options a customer selects.
• The specific product they’re buying.
• Their user role.
• The shipping method they’ve selected.
• Their preferred payment method.
• Cart contents.
• Cart quantity.
• Cart subtotal and cart total.

You can use any of these to create conditional rules to be met before specific fields are displayed.

Why are conditional fields useful for your online store?

Conditional fields create a simpler shopping experience for your customers. They won’t be distracted or overwhelmed by options they don’t need. Without conditional fields, every option would always be visible. This makes your forms long and confusing.

Conditional fields make your forms look shorter and easier to fill out. Customers are also less likely to make mistakes because they work only with options relevant to their needs.

Although the concept is the same in WooCommerce, you can use conditional fields in different parts of your store.

Conditional fields on product pages vs checkout: what’s the difference?

Conditional fields are most commonly used in two areas of an online store: product pages and the checkout.

• Checkout conditional fields control the billing and shipping fields customers see during checkout. For example, you might display a Delivery instructions field only when a customer selects home delivery. Or show a VAT number field only for wholesale customers. These are typically created using a dedicated WooCommerce checkout field plugin. Later, we’ll highlight some of the best plugins to help you set this up.
• Product page conditional fields control which product options are displayed before a customer adds an item to their cart. Like the gift-wrapping and file-upload examples we talked about earlier.

To create these dynamic product options, you’ll need a WooCommerce product options plugin such as Advanced Product Fields for WooCommerce.

How to add conditional fields to WooCommerce product pages using Advanced Product Fields

Advanced Product Fields for WooCommerce lets you add different fields to display extra product options for your customers on the product page. Then control when these fields are displayed using conditional logic.

Whether you’re selling personalized gifts, print-on-demand products, or configurable items, you can use this plugin to create dynamic product forms. These forms will be able to adapt to customers’ selections.

With Advanced Product Fields for WooCommerce, you’ll only display the fields customers need to complete their purchase on the product page, and not every possible option.

Here’s why you should use it to add conditional fields to your WooCommerce product page.

You’ll have numerous field types to choose from

It supports a wide range of field types (up to 18), including:

• Dropdowns and multiselect.
• A date picker.
• HTML Headings.
• Checkboxes and radio buttons.
• Color and image swatches.
• File uploads and more. Here’s the full list of the field types supported in APF.

Having these options means that you can use the most suitable field type for your product. For example, if you sell mugs that customers can personalize with images, you can use the file uploads field type.

But if you want to upsell with a product add-on, let’s say a camera accessory, you can use checkboxes.

You can set complex conditional rules for your fields 

With Advanced Product Fields for WooCommerce, you can choose to write a single or multiple conditional rules per field. This allows you to create anything from simple conditions to complex product configurators.

For multiple conditions per field, APF supports AND and OR logic in the following ways: 

• You can combine the rules so that the field only becomes visible when all conditions are met using AND. 
• Or allow the field to display when only one of the conditions is true using OR. 

As a result, you can build forms that respond to more complex customer choices.

Flexible pricing for different options

With Advanced Product Fields for WooCommerce, you can set different prices for different options in a field. When customers add or remove options, the total price changes.

This is especially important if you’re selling a product whose add-ons have different prices. You get to charge each option for what it’s worth. 

More features with add-ons

What’s great about this plugin is that you can extend what it offers with several add-ons, such as:

• Image upload features like cropping, rotating, flipping, and resizing.
• Live content previews for customers adding content to be printed on the product.
• Layered images if you’re creating a product configurator.

These add-ons improve how you showcase your product options and how customers interact with the conditional fields.

Advanced Product Fields for WooCommerce allows you to add extra fields to your product page and use conditional logic to control when they are displayed. Let’s look at how to set this up.

How to set up conditional logic in Advanced Product Fields for WooCommerce

The easiest way to understand setting up and applying conditional logic is to see it in action. Before we can jump into the steps you’ll need to follow to create WooCommerce conditional fields with Advanced Product Fields for WooCommerce, take a look at the Advanced Travel Package demo we’ve prepared.

It shows how different product option fields appear as customers build their travel package. After that, we can see how to create something similar step by step.

Step 1: Create your first field

After purchasing and installing Advanced Product Fields for WooCommerce, the first thing you’ll need to do is create your first field.

To do this, take the following steps:

1. Click Edit on the product you would like to add conditional fields to. Then scroll down to the Product data section and click on the Custom fields tab. 
2. Click on the Add your first field button, and you’ll see the settings for the first field.

3. In this section, you’ll be able to:

• Choose the type of field. Image swatches in our example.
• Add a field label. Something like ‘1. Your destination type’.
• Choose whether the field is required. By clicking a toggle switch.

4. Next, you’ll add options for that field that customers will choose. For example, Beach, Mountains, City, or Wilderness.

Once you’re done, you can proceed to creating the field that should appear after conditions are met.

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

In the next step, we’ll create the fields that should appear only after customers select a specific option. For example, if a customer selects the Beaches option as their preferred destination, we only want to show activities you can do on the beach. The same should apply to all the other options we’ve highlighted above.

Here’s what you’ll do to create the field to be displayed conditionally:

1. Click the Add Field button to create a new field.
2. Enter the Field type and Label (for example, ‘Activities at the beach’), Instructions details like before, and toggle the Required button.
3. Since we’re creating options for the Beach field, we’ll select Checkboxes as the field type and add options such as walking, surfing, and watersports just below the Required button.

After this is done, you’re now ready to define conditional logic.

Step 3: Set the conditional logic rule

You set conditional logic for the field you want to display after conditions are met. In this case, the second field we created (Activities at the beach). 

1. In the second field’s edit page, click on the Advanced tab and then Add new rule group.

2. Under Conditional logic. You’ll see three dropdowns, which you’ll use to define your rule under Show this field if.
3. Define your rule by selecting your preferred options in the dropdowns. In our demo, we only have one rule where we show this field only when the selected destination type is “Beach”. So the rule looks like this:

• Show this field if Your destination type value is equal to Beach.

In this example, our conditional field’s visibility only depends on one other field. But what if you want it to depend on multiple previous fields?

In other words, this field’s visibility only depends on one other field.

Step 4: Add AND logic for multiple conditions

You can use AND logic to add more rules and combine them such that all of them have to be satisfied before the field is visible. Let’s look at an example to see how this works.

In our Advanced Travel Package example, we ask customers a third question: where is their preferred beach accommodation?

This question should only appear if two conditions are met:

• The customer selected “Beach” as the destination type.
• The customer has answered the first two questions.

So we need two rules for this rule group:

1. Create the first rule by following the steps covered in step 3. In this case, the first condition will be whether the customer selects “Beach” as their destination.
2. Click the AND button to the right of the dropdowns and add a new rule to show the field if they’ve selected at least one beach activity.

So the field will only be shown when the destination is “BEACH,” and at least one beach activity is selected.

Step 5: Add OR logic for alternative conditions

You could also have multiple conditions, but you want to show the field if either condition is true, not all of them. Here, you use the OR logic to implement this. Let’s see how you can set it up.

In our Advanced Travel Package example, we want to show customers a message letting them know that they’re enjoying a discounted day rate for staying 7 days or more.

To create this, take the following steps:

1. Create a content field of type Text & HTML, then add your title text here. Something like ‘Nice! You’re enjoying a discounted day rate by staying longer’.
2. Add multiple rules, like in the previous step. 

Keep in mind that how you define them will determine whether all conditions must be satisfied or just one. You can do this by using the same option in the middle dropdown.

For example, show this field if:

• The duration value is equal to 7 days.
• Duration value is equal to 10 days.
• The duration value is equal to custom.

If the customer selects 7 days or more, they’ll see the message. Once you’re done with everything, click Update to apply your changes.

Applying conditional logic to individual field choices

Conditional logic doesn’t have to apply to the entire field. You can have it apply to individual field choices. Let’s say you sell custom T-shirts.

You can have a T-shirt decoration field where, if a customer selects the embroidery option, they see thread color options. And if they select a screen printing option in the same field, they see ink color options.

Advanced Product Fields for WooCommerce allows you to set this up by duplicating a field and assigning different conditions to each version. You can see what this looks like and more explanations in the APF conditional logic docs. 

How to add conditional fields to WooCommerce checkout

Checkout conditional fields require a separate plugin from product page fields. If you want to add conditional fields to the checkout, you’ll need a dedicated WooCommerce checkout field plugin such as the following.

WooCommerce Checkout Field Editor (by Themehigh)

WooCommerce Checkout Field Editor is built for editing the default WooCommerce checkout form fields. You can add, edit, hide, or delete fields, validate their input, rearrange them, and set conditions for specific fields to be displayed.

For conditional fields, this plugin supports dynamically displaying checkout fields depending on:

• Cart contents, total, and subtotal.
• User roles.
• Product, product variations, and product category.
• Shipping and payment method.
• Customer country and many other rules.

It provides you with several field types to present your options, including standard fields such as textareas, radio buttons, checkboxes, etc. You can also use field types that are usually on this page, such as customer email, telephone, and date pickers.

After creating your fields, Checkout Manager lets you group related fields into neatly organized sections. Then, choose where they’re displayed, from before and after shipping to after the submit button.

Checkout Field Editor is a good option because it gives you several field types and conditions to work with. Plus, you get to organize your checkout fields to make checking out smooth for your customers.

Checkout Field Manager for WooCommerce

Checkout Field Manager for WooCommerce lets you manage custom fields on the checkout page. This includes fields related to billing, shipping, or any other additional field sections.

You can reorder, remove, or change the default WooCommerce checkout fields, and add new ones. Checkout Field Manager comes with several standard field types as well as unique ones, including multiselect, color pickers, country, state, etc.

After adding your fields, you can control when they are shown or hidden with conditional logic. Conditional logic here depends on the values of other files, called parent fields. As a result, your logic will depend on the fields on this page.

For instance:

• Billing.
• Shipping.
• Payment method.
• Any other custom field you add.

Its system detects the parent field type and lets you define conditional logic based on the available options. That aside, Checkout Field Manager comes with useful premium features, such as filtering fields by cart total and adding charges based on field values.

So that’s how you can add conditional fields to the product page and checkout, seeing as WooCommerce doesn’t support this by default.

Add conditional fields to your WooCommerce store

Conditional fields improve your customers’ shopping experience by only showing them the options relevant to their selection. They’re extremely useful on product and checkout pages, where customers select several options to complete their purchase.

WooCommerce doesn’t support conditional fields by default. You’ll need separate plugins to add them to the product page and the checkout.

The Advanced Product Fields for WooCommerce plugin handles conditional fields on product pages. It allows you to add various field types to this page and control when they’re displayed with conditional logic.

Get Advanced Product Fields for WooCommerce and start using conditional fields to improve your customers’ shopping experience on your WooCommerce product page.