How to add conditional logic to WooCommerce checkout fields?

In this guide, you'll learn how to configure conditional logic for checkout fields in your WooCommerce store. I'll guide you step by step through the configuration. In the end, you'll be able to configure WooCommerce checkout conditional fields by yourself!

WooCommerce Checkout Fields Editor

To proceed with this guide you'll need a plugin because WooCommerce does not have conditional logic built in. We created Flexible Checkout Fields. One of the most powerful features that we developed is the support for conditional logic.

But don't just take our word for it, over 70,000 WooCommerce stores worldwide use it on a daily basis.

We often add new features or fix bugs in this plugin. People really appreciate it!

This plugin also utilizes the WordPress look & feel and is very easy to use due to the clean interface.

Have a look before we start:

You can edit the standard WooCommerce fields, add new custom fields and use conditional logic for them.

What's more, you can download Flexible Checkout Fields for free! Watch this video to see what this plugin offers you in the free version:

Check out how this plugin works for you. However, bear in mind, that the conditional logic is available only in the Flexible Checkout Fields PRO version. 

Woocommerce conditional checkout fields features

Now I will show you how to configure conditional logic for a phone field.

You will need the PRO version as the free one doesn't support WooCommerce conditional checkout fields.

You can configure conditional logic in three ways, for:

• fields,
• products or categories,
• selected shipping method.

I will show you all of them.

We will use the WooCommerce checkout conditional fields feature with a checkbox field. We'll configure that a phone field shows up when a customer marks a Show phone? checkbox.

Phone field checkout conditional logic

First, you need to create a new custom field.

Select Checkbox as a field type. Set Show phone? as a label:

Meta name will be the name of the field in your database. You don't need to change the default one.

Click Add Field. Then, as you can see, the field shows up in the configuration screen:

Go to the Phone field and click the Conditional logic tab.

You'll find WooCommerce checkout conditional fields settings in here:

Mark the Enable conditional logic based on FCF fields checkbox:

Add new rule. Select the custom field in the rule (Show phone?).

Save settings and you're ready to go.

Look:

It works as we wanted!

Product/Category checkout conditional logic

There is the second way you can configure your fields.

You can use product/category conditional logic as well.

Let's say you sell T-Shirts with custom projects. You want your customers to be able to describe their projects to you. Also, you need a phone number to discuss the project with them.

There is a default Phone field in checkout but maybe your customers would like to provide another phone number. This way they can guide you directly to Marketing Manager instead of Accounting or Office Manager.

So we need such fields:

When a customer selects the second option, another phone field pops up:

How to configure these fields this way?

First, you need to add these fields:

(The 'T-Shirt Custom Project' is simple HTML text. I used the <strong> HTML tag to bold it).

Then, you need to configure conditional logic:

As you see, I configured the plugin to show the field when a cart contains a T-Shirt - Custom Project product. You need to configure conditional logic the same way for the next two fields.

However, for the last field (Your phone number), you need to use fields conditional logic instead. That's because the plugin should display this field when a customer selects a specific option in the radio field. I mean the 'I want to provide other phone number to discuss the project' option.

Look:

Also, you can use phone number validation for this field:

Learn more about WooCommerce checkout validation →

VAT number conditional checkout field

You can use conditional logic for VAT number field as well.

By default, WooCommerce shows the Company name field right after First name and Last name. The field is optional. However, it's better to hide it unless a customer wants an invoice.

You can simply move the field to the bottom. Next, you can create a simply I want an invoice checkbox and a VAT Number field.

Then you need to configure conditional logic for Company name and VAT Number fields.

Remember to set this fields as Required.

Look at the final effect:

There is another solution.

Flexible Invoices for WooCommerce plugin

We created the Flexible Invoices plugin. Not only it adds a VAT number field but also validates the VAT number your customers provide.

You'll find more information in our article: 3 tried-and-tested ways to add a VAT Number field in WooCommerce

PS Do you want to change fields' look? Check out our CSS styling guide.

Shipping Method conditional checkout field for woocommerce

With this feature you'll be able to show or hide checkout fields when customer select certain shipping method in the checkout page. To do that, just check Enable Shipping Methods Logic and add new rule. 

In the New Rule section, you'll see two select fields. In the first one, Select Shipping Zone, you can choose the shipping zone that includes your shipping method. And then, in the second field, Select Shipping Method, choose your shipping methods that are included in selected shipping zone.

Want to know more? You can read our complete guide about how to hide or show checkout fields based on shipping method in WooCommerce.

Summary

In this quick guide, you have learned how to configure WooCommerce checkout conditional fields. If you have any questions, just use the comments section below.

Also, you should definitely check out our WooCommerce Checkout Settings Guide!