Blog Categories  Tips & Tricks Contact

HOME
WOOCOMMERCE CUSTOM VALIDATION IN WOOCOMMERCE CHECKOUT FORM
FOLLOW US
Stay updated via social channels

Custom Validation in WooCommerce

Checkout Form
WOOCOMMERCE
WORDPRESS

AMAN MEHRA
JUNE 22, 2021
LEAVE A COMMENT
Get New Post By Email

Tweet on Twitter
Share on Facebook
Name

Your email address

SUBSCRIBE

RECENT POSTS

How to Change Place Order Button

Text in WooCommerce?

How to Implement Multiple

Constructors For Class in Python?

Custom Validation in
Yes! custom validation for WooCommerce checkout form as you read in the WooCommerce Checkout Form
title.
How to Re-Order WordPress Posts
By Custom Field?
We can make our own validation rules for each checkout field. If you are familiar
How to Add Title Attribute in
with woocommerce’s action/hook then you can make easily custom validation
WordPress Menu?
rules.

You have to just add the action hook function and apply the custom condition
CATEGORIES
with custom validation rules using the preg_match(), is_numeric(), filter_var(),
and more. You can use and make as per your requirements. How To

Laravel
So, let’s start the tutorial about how you can apply custom validation rules on
PHP
woocommerce checkout form.
Python

ReactJS
Table of Contents
1
WooCommerce Checkout Form Custom Validation WooCommerce

1.1
Custom Validation on First Name and Last Name WordPress
1.2
Custom Validation on Phone Number Field
1.3
Custom Validation Rules on Website URL Field
2
Remove/Unset the Default Validation Rules From the Field MOST VIEWED POSTS

WooCommerce Remove Update

Cart Button and Make it
WooCommerce Checkout Form Custom Automatically Update.

Validation How to Redirect to Checkout After

Add to Cart?
Here, we will apply custom validation on the some of checkout form’s fields with
How to Change Price of Specific
the example.
Product and Quantity in Cart?

Custom Validation on First Name and Last Name Upload Multiple Featured Images
in a Post OR Page

In this example, I’ll show you can validate for the First Name and Last Name
How can I Prevent SQL Injection in
only contains letters. PHP?

We will use the woocommerce_after_checkout_validation hook to hit

the custom function for the validation and show the error message when these
TIPS & TRICKS
fields contain numbers.
BuddyPress Members Not
Showing Until Login
See the code block here.
Check the Memory Consumed By
Variables in Python
1 add_action( 'woocommerce_after_checkout_validation', 'yb
2 WooCommerce Redirect to
3 function ybc_validate_fname_lname( $fields, $errors ){ Checkout
4
How to Remove the WordPress
5 if ( !ctype_alpha($fields[ 'billing_first_name' ])
Login Error Shake Effect
6 $errors->add( 'validation', 'First Name and Last
7 } Get Unique Values From a
8 } JavaScript Array

The above example will check if the first name and last name do not contain the
number and I used the ctype_alpha() PHP function to check the fields
string only has letters. See the image below.

The ctype_alpha() is a PHP function and it checks all characters of the

string are alphabetic and it will return the true if the condition is correct
otherwise it will return false.

JavaScript Validation to Make Field Wrapper Red Color

Add the below code in your functions.php file. It will add the woocommerce-
invalid class to parent wrapper (.form-row class) of input field. This class will
change the highlighted color to red if fields are incorrect and showing the errors
for them.

1 add_action( 'wp_footer', 'ybc_javascript_validation' );

2 function ybc_javascript_validation(){
3
4 if( !is_checkout() ) return;
5
6 ?>
7 <script>
8 jQuery(function($){
9 $('body').on('blur change', '#billing_first_name
10 var formRow = $(this).parents('.form-row');
11 if( /\d/.test( $(this).val() ) ) {
12 formRow.addClass('woocommerce-invalid')
13 } else {
14 formRow.addClass('woocommerce-validated
15 }
16 });
17 $('body').on('blur change', '#billing_last_name
18 var formRow = $(this).parents('.form-row');
19 if( /\d/.test( $(this).val() ) ) {
20 formRow.addClass('woocommerce-invalid')
21 } else {
22 formRow.addClass('woocommerce-validated
23 }
24 });
25 });
26 </script>
27 <?php
28 }

This javascript code will run on the blur or on change of the specific field and
check if the field passes the validation or not. If it throws the error then it will
highlight that input field with red color, you can see the below image.

You can also make this validation rule with preg_match() or any other function
that is perfect with your requirements.

preg_match() example:

preg_match( '/\\d/', $fields[ 'billing_first_name' ] )

Custom Validation on Phone Number Field

We will validate the Phone Number if it is more than 10 digits or not. If it will be
more than 10 digits then it will show the error. You can make more validation
rules as per your requirements and also can change the limit of 10 digits to
anything.

1 add_action( 'woocommerce_after_checkout_validation', 'yb

2
3 function ybc_validate_phone( $fields, $errors ){
4
5 if(!preg_match('/^[0-9]{10}+$/', $fields[ 'billing_p
6 $errors->add( 'validation', 'Phone Number not more t
7 }
8
9 }

Custom Validation Rules on Website URL Field

If you have a custom field in the woocommerce checkout form like URL, then
you can also validate it with your custom validation rules.

We will use filter_var() PHP function to validate it.

Syntax: filter_var( $url, FILTER_VALIDATE_URL )

1 add_action( 'woocommerce_after_checkout_validation', 'yb

2
3 function ybc_validate_url( $fields, $errors ){
4
5 if ( filter_var( $fields[ 'billing_url' ], FILTER_VA
6 $errors->add( 'validation', 'Please provide vail
7 }
8
9 }

It will show the error message if you enter the incorrect website URL. See the
image below.

Remove/Unset the Default Validation Rules

From the Field

You can also remove the default checkout field validation rules.

To remove the default validation rule, you have to just hit the filter hook function
to unset the specific field’s validate parameter. We will use the
woocommerce_checkout_fields hook to achieve this.

Let’s see the example code.

1 add_filter( 'woocommerce_checkout_fields', 'ybc_remove_d

2
3 function ybc_remove_default_validation( $fields ){
4
5 unset( $fields['billing']['billing_postcode']['valid
6 unset( $fields['billing']['billing_email']['vali
7 return $fields;
8
9 }

In the above code, we have unset the validation rules for the billing fields
Postcode and Email.

More WooCommerce Articles

How to redirect to checkout after click on add to cart button

How to add custom text after or before cart button

How to Add WooCommerce Cart Icon in Menu with Item Count

How to Get WooCommerce Order Details

How to Remove WooCommerce Update Cart Button and Run Automatically

ACTION/HOOK CHECKOUT FORM CHECKOUT FORM VALIDATION CHECKOUT PAGE

CTYPE_ALPHA(). PREG_MATCH() FILTER_VAR() FORM VALIDATION URL VALIDATE
WOOCMMERCE CHECKOUT FORM WOOCOMMERCE WOOCOMMERCE ACTION
WOOCOMMERCE CHECKOUT WOOCOMMERCE CHECKOUT FORM FIELD
WOOCOMMERCE CHECKOUT FORM VALIDATION WOOCOMMERCE CUSTOM FIELD
WOOCOMMERCE CUSTOMIZATION WOOCOMMERCE HOOK
WOOCOMMERCE JQUERY VALIDATION WOOCOMMERCE_AFTER_CHECKOUT_VALIDATION
WORDPRESS WORDPRESS WOOCOMMERCE

Tweet on Twitter
Share on Facebook

YOU MAY ALSO LIKE

How to Change Place Order Button How to Re-Order WordPress Posts By

Text in WooCommerce? Custom Field?

How to Add Title Attribute in How to Add an Admin User in

WordPress Menu? WordPress Using Functions PHP
File?

How to Make a Custom Login Page in How to Create a Custom Widget in

WordPress? WordPress?

ABOUT THE AUTHOR: AMAN MEHRA

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+
years of experience. I love coding and help to people with this blog.

LEAVE A REPLY

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

Comment

Name * Email * Website

Save my name, email, and website in this browser for the next time I comment.

POST COMMENT

ABOUT QUICK LINKS RECENT POSTS GET IN TOUCH

Your Blog Coach is the best site Blog How to Change Place Order
Name
for finding the solution to any Button Text in WooCommerce?
WordPress
issue related to coding and learn
How to Implement Multiple Your email address
more cool stuff and tricks. WooCommerce
Constructors For Class in Python?
Contact
Custom Validation in SUBSCRIBE
WooCommerce Checkout Form

© 2020 Your Blog Coach Privacy Policy

Terms and Conditions
Sitemap