How to Add Extra Fields to Registration Form
By default WooCommerce registration form is kind of minimal and contains only Email address field. Well, depending on the shop settings there also could be privacy policy text or a password field.
In this tutorial I will show how you how to add a phone number field with validation and mask.

Add Phone Number Field
FYI the registration form template is templates/form-login.php
, but we are not going to use it because there are two action hooks which allows us to add our custom field:
woocommerce_register_form_start
– at the beginning of the formwoocommerce_register_form
– before the “Register” button
By the way there is also woocommerce_register_form_end
which allows to add something after the button but we do not need it in this tutorial, do we?
We will also need to save the filed into the database, woocommerce_created_customer
action hook will help us with that.
The example below is very similar to what we did in tutorial about fields in WooCommerce Edit Account page.
// add field
add_action( 'woocommerce_register_form', 'misha_add_register_form_field' );
function misha_add_register_form_field(){
woocommerce_form_field(
'phone_number',
array(
'type' => 'tel',
'required' => true, // just adds an "*"
'label' => 'Phone number'
),
( isset( $_POST[ 'phone_number' ] ) ? $_POST[ 'phone_number' ] : '' )
);
}
// save to database
add_action( 'woocommerce_created_customer', 'misha_save_register_fields' );
function misha_save_register_fields( $customer_id ){
if ( isset( $_POST[ 'phone_number' ] ) ) {
update_user_meta( $customer_id, 'phone_number', wc_clean( $_POST[ 'phone_number' ] ) );
}
}
- You can insert this code to your current theme
functions.php
file. But consider using Child theme or a custom plugin for that. - Of course it is possible to display the field using HTML but why is WooCommerce has a special function for that – woocommerce_form_field(), that allows us to add fields of any type, not only input text fields. And we do not have to think about the field CSS styles.
- There is no need to escaping output here, because woocommerce_form_field() handles it itself using
esc_attr()
function. wc_clean()
is kind of WooCommerce version ofsanitize_text_field()
, you can use any of them.
There we go.

Phone Field Mask
In order to add a phone mask I recommend you a cool jQuery script which is intlTelInput.js It is really good because it supports any country code in compare to the other mask plugins. And nice flags are also going to be displayed near the phone number.
<?php
add_action( 'wp_enqueue_scripts', 'misha_add_phone_mask' );
function misha_add_phone_mask(){
wp_enqueue_style( 'intltelinput', 'intlTelInput.min.css' );
wp_enqueue_script( 'intltelinput', 'intlTelInput-jquery.min.js', 'jquery' );
}
add_action( 'wp_footer', 'misha_init_phone_mask' );
function misha_init_phone_mask() {
?>
<script>
jQuery( function( $ ) {
$( '#phone_number' ).intlTelInput( {
preferredCountries : [ 'no', 'ge' ],
nationalMode: false,
utilsScript: "utils.js" // just for formatting/placeholders etc
} );
} );
</script>
<?php
}
Field Validation
Now let’s figure it out the field validation:
add_action( 'woocommerce_register_post', 'misha_validate_fields', 10, 3 );
function misha_validate_fields( $username, $email, $errors ) {
if( empty( $_POST[ 'phone_number' ] ) ) {
$errors->add( 'phone_number_error', 'We really want to know!' );
}
}
It is not only possible to check if the field is not empty but also to add some custom validations like “Field is too short” or “Must contain only numbers”.

I recommend you to continue to my another tutorial where we add an extra field to WooCommerce Edit Account page.

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Good stuff Misha!
How can this form be styled (2 columns layout, fields in horizontal format)?
Thank you!
You can try to change woocommerce_form_fields() arguments for the registration page with the help of
woocommerce_form_field_args
filter hook. You have to add classesform-row-first
andform-row-last
, example.Impressive content Misha!
What if we need to save an entry on the registration form to an existing WC field? For example, to capture a billing country from a “Country” dropdown (in example to restrict to only EU billing countries)?
Great tutorial! Thanks! Helped me a lot!
Very good and clear thanks!