• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

How to add conditional logic to WooCommerce checkout fields?

Updated: December 30, 2022 / Checkout, Plugin Tutorials

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!

Have you ever wanted to hide some fields based on some conditions, like country, city, or shipping details?

Let's see how to set conditional checkout fields in WooCommerce with a plugin!

Table of contents

  1. WooCommerce Checkout Fields Editor
  2. Conditional Checkout Fields - Features
  3. Phone field checkout conditional logic
  4. Product/ Category conditional fields
  5. WooCommerce Conditional Logic for VAT number
  6. Flexible Invoices for WooCommerce
  7. Conditional Shipping Method in the checkout

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 in the plugin is the support for conditional logic.

But don't just take our word for it, over 80,000 WooCommerce stores worldwide use the plugin daily.

woocommerce conditional logic plugin ratings
Flexible Checkout Fields in the repository

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:

woocommerce checkout field editor conditional
Flexible Checkout Fields interface

💡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:

WooCommerce checkout field editor for conditionals

WooCommerce conditionals made easy. Flexible Checkout Fields is your choice to set WooCommerce conditional logic.

Add to cart or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2022-11-22
Works with WooCommerce 6.7 - 7.1.x
 💡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:

flexible checkout fields checkbox field
Add new field in Flexible Checkout Fields to establish WooCommerce conditional logic

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 on the configuration screen:

Flexible Checkout Fields add a checkbox to establish conditional logic
Adding WooCommerce conditionals - add a checkbox first

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

'Conditional logic' tab in field's settings
Setting WooCommerce conditionals

You'll find WooCommerce checkout conditional fields settings here:

woocommerce checkout field editor conditional
Field's conditional logic settings

Mark the Enable conditional logic based on FCF fields checkbox:

conditional checkout fields for woocommerce
Field's conditional logic settings in Flexible Checkout Fields

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

Save settings and you're ready to go.

Look:

WooCommerce checkout conditional fields
Setting conditional logic in WooCommerce checkout: final result

🎉 It works as we wanted!

Product/Category checkout conditional logic

💡There is a 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 the Marketing Manager instead of the Accounting or Office Manager.

👉🏽So we need such fields:

woocommerce conditional logic settings
Custom project fields at checkout

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

woocommerce checkout field editor conditional
Custom project: phone number field

How to configure these fields this way?

First, you need to add these fields:

setting woocommerce conditionals
New fields for custom t-shirt project

(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:

woocommerce conditional checkout fields guide
Configuring WooCommerce conditional logic for HTML field

👉🏽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 another phone number to discuss the project' option.

👉🏽Look:

conditional checkout fields woocommerce
Conditional logic for Your Phone Number field

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

setting the validation
Phone number validation

Learn more about WooCommerce checkout validation →

VAT number conditional checkout field

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

👉🏽By default, WooCommerce shows the Company name field right after the First name and Last name fields. 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 simply create an I want an invoice checkbox and a VAT Number field.

woocommerce checkout field editor conditional with flexible checkout fields
Conditional checkout fields for WooCommerce settings

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

conditional logic tab in woocommerce default field settings
Set new rules to establish conditional logic

Remember to set these fields as Required.

Look at the final effect:

woocommerce conditionals in woocommerce checkout
I want an invoice checkbox with conditional logic

💡Bonus: There is another solution.

Flexible Invoices for WooCommerce

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

error messages in checkout
VAT Number Validation in WooCommerce Checkout

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 the 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 a customer selects a certain shipping method on the checkout page. To do that, just check Enable conditional logic based on shipping methods and add a new rule. 

woocommerce conditional checkout fields for shipping methods
Configure shipping zone and method with conditional logic

In the Rule section, you'll see a select field. In the first one, select the country for which you do not want to show shipping methods. 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 the selected shipping zone. Here I have used the shipping method I have configured with the Flexible Shipping plugin.

Want to know more? You can read our complete guide about how to hide or show checkout fields based on the 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.

Visit the Flexible Checkout Fields product page to see all features of the plugin.

WooCommerce checkout field editor for conditionals

WooCommerce conditionals made easy. Flexible Checkout Fields is your choice to set WooCommerce conditional logic.

Add to cart or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2022-11-22
Works with WooCommerce 6.7 - 7.1.x
💡Here is a YouTube playlist with all video tutorials concerning Flexible Checkout Fields.

You can also try the plugin in your free demo!

Related to WooCommerce conditionals

  • All about WooCommerce cart hooks

    wc cart hooks
    Shipping and billing section in WC checkout. Would you like to add a custom shipping field in WooCommerce? Find out how to do it.

  • WooCommerce Checkout Hooks

    woocommerce
    A visual guide. We hope that this visual hook guide helps every WooCommerce developer to navigate through hooks.

 

Tweet

4 minutes read15790 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Checkout › How to add conditional logic to WooCommerce checkout fields?

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk