I want to show you how to use WooCommerce checkout field validation with the Flexible Checkout Fields plugin for WooCommerce. In this quick guide, I’ll teach you how to add your own WooCommerce custom validation to your store that you can use independently from the built-in validation rules.
Flexible Checkout Fields
There are a few ways to use WooCommerce checkout field validation. WooCommerce has some built-in validation rules assigned to specific fields. In our Flexible Checkout Fields plugin we utilize these functions and what’s more we enable you to use them on any custom fields that you add.
Apart from that, we also created the ability for you to add custom validation methods and this article will give you a good example on how to start.
At first, you will need a Flexible Checkout Fields plugin. Over 20,000 stores worldwide use this plugin and it’s also one our our best-selling plugins.
Most noteworthy, this plugin is available to download for free at WordPress.org repository. People appreciate it, indeed!
Once you download the plugin, you can manage fields in your WooCommerce checkout. The plugin uses default WordPress styling so the plugin’s settings are very familiar to every WordPress/WooCommerce user.
You can change field’s labels, placeholders, classes, add new fields or hide the ones you don’t need. As a matter of fact, this plugin has many features that you may find useful in your store.
How to use WooCommerce Checkout Field Validation
Firstly, you need to use a
flexible_checkout_fields_custom_validation filter to add your own validation.You will find the full code in GitHub, below I will comment on it a bit to help you understand how it works.
First, you have to create a function to actually validate the field. In the above code it is the
example_function_is_integer function. The validating function gets 2 parameters:
$field_label– a label of a validated field
$value– validated value.
The function doesn’t return any value. If a field is not valid, the function adds a notice using a
wc_add_notice function with an
'error' type. You can adjust the message to your liking.
Then you have to create another function, which adds the new validation method to Flexible Checkout Fields. Use a unique key while adding an element to validation methods. The element you add to an array must be a table with two keys:
label– it will show in the select in the field’s settings,
callback– a validating function that you created before.
WooCommerce Checkout Field Validation – Integer example
I’ll show you how to validate if a field value is a valid integer. Let’s use the function that we created before and see how it works in action.
Add the code to your theme’s functions.php and you’ll be good to go:
A new option will show up in the Validation select box:
Use it and try it out in the checkout. You’ll see a new field:
I entered a 1234.567 value which is not an integer. Look at the error message:
Some numbers is the label of my field. As you see, our WooCommerce custom validation works fine.
Default instead of WooCommerce custom validation
Obviously, you don’t always need WooCommerce custom validation. You can use the default WooCommerce validation in your custom fields instead.
These validations work in the Email, Phone and Postcode fields by default. However, you can use them in your own fields, too.
Are you ready to add WooCommerce checkout field validation to your store?
Finally, you have learned how to use WooCommerce checkout validation hook. If you have any questions then use the comments section below.
Are you a developer? We have created a handy WooCommerce Checkout Hooks Visual Guide →