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 form
• woocommerce_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 of sanitize_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.

# WooCommerce, My Account

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

Follow me on Twitter