WooCommerce – Conditional fields on checkout

Is it necessary to ask the same information to all customers of an online store? No.

It is a bad strategy to ask for too many fields to fill in to finalize the purchase and it is almost never really justified.

normal checkout billing details

Wouldn’t it be better if certain fields are only displayed when the conditions are met?

WooCommerce by default doesn’t give this option and the only thing that allows you is to customize whether or not you want to show some fields or make them optional. But not all of them, and only globally, without conditions.

How to make checkout fields conditional in WooCommerce

I do it with a plugin, which allows me all the flexibility I need when defining conditions for displaying or not fields at checkout.

I’ve been using Yith WooCommerce Checkout Manager for years.

yith checkout fields

This plugin is not only great to configure which fields will be displayed, how they will be displayed and in what order, but also the possibility of adding conditions to the fields, both the existing ones by default and those you create.

Let’s see a practical example with these steps:

  1. We create a field in which the customer indicates whether he is a company or not.
  2. If he indicates that he is a company we will show him an additional field to indicate his VAT.

Creation of a new field to serve as a conditional field

First, we create the new field, from which we will apply the conditions. In this case, it will be of type “radio”, also known as single selection.

new field with yith checkout manager

The different possible values to be selected are separated by a vertical bar (|), and will be displayed on the checkout page:

example of new field

Sort the fields

The next step would be to place this field, which by default is added at the end, in the place we want, for which we simply have to drag and drop the field where we want and save the changes.

rearrange yith checkout manager fields

Add conditions to the fields

Don’t worry because this is just as easy as the above.

Once we have decided which field will serve as a conditional, it only remains to decide which fields will be displayed according to what the user chooses in that single selection field we created.

new condition field

From here it is simply to place the fields in the order we want them to be displayed and add the condition to be fulfilled.

So until you have all the fields you want to display depending on the value chosen. Save the changes and test that the conditions work.

Warning: Even if you enter the values of the conditional field in uppercase, they are stored internally in lowercase. Take this into account when indicating the value to be fulfilled. For example, if one of the values was “Yes” and you put “Yes” as value in the condition it will not work, you must put as value “yes”.

Other types of conditions you can apply

We have seen only one example of conditional, but there are many more possibilities.

Another very practical condition that you can apply is to only show the physical address fields of the customer if any of the products in the cart is a physical product, showing only the basics (name and email) if all products are virtual.

In this case, assign the same category to all virtual products, and apply this condition, that if the products are in that category, the address field action is “hide”.

example of condition field applied to a category

The options to configure conditions, and that you can apply to your conditions, are the following:

  • Field: Here you choose the field that will be the condition. In addition to all billing and shipping fields, you can also select “Products in cart”, and then apply conditions based on products.
  • Condition: Here you choose the condition of the field to display. You can choose between:
    • Is set – Has some value, whatever it is (perfect for single or text fields).
    • Is empty – There is no selected or has no value, the opposite of the previous one.
    • Value is – You have to indicate the value among the possible ones
    • Value is not – Negative selection, just the opposite of above
    • All products selected in the cart – The condition affects all products in the cart
    • At least one of the products in the cart
    • All categories selected in the cart – The condition affects all product categories in the cart
    • At least one of the selected categories in the cart – The condition affects all categories of products in the cart
  • Value: Enter here the value of the field that will trigger the conditional behavior. If the condition depends on products or categories you should enter the IDs here separated by commas.
  • Action: Choose whether to show or hide the current field if the condition is met.
  • Required: Check this if when the field is displayed it must be filled in.
  • More conditions( + x ): You can set more than one condition for the same field. Simply click on the + sign to add more conditions, or on the x sign to remove one.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top