How to Add Custom Fields in WooCommerce Login and Register Forms

While the default login and register forms in WooCommerce serve their basic purpose, customizing these forms can greatly enhance the user experience and align them with the branding and unique requirements of your online store.

By adding custom fields to these forms, you can collect additional information from customers during registration or personalize the login process.

Customization enables you to tailor the forms to your specific needs, such as gathering preferences, capturing demographic data, or integrating with external systems.

Ultimately, this level of customization allows you to create a more personalized and seamless shopping experience for your customers, which can lead to increased customer satisfaction and improved conversions.

1. Understanding the WooCommerce login and register forms

A. Login form structure and fields

The login form in WooCommerce is responsible for allowing registered users to authenticate themselves and access their accounts. By default, the login form consists of two fields: Username or email address and Password. Users enter their credentials in these fields and click the Login button to submit the form.

To customize the login form, you need to understand its structure and the corresponding HTML elements. The form itself is wrapped within the <form> tags and typically has the class name login or woocommerce-form-login. Inside the form, you'll find the following key fields:

B. Register form structure and fields

The register form in WooCommerce allows new users to create an account and become registered customers. By default, the register form consists of several fields that collect essential information to set up a user account. These fields may include:

2. Adding custom fields to the WooCommerce login form

A. Add the fields

To add custom fields to the login form, we can use the following hooks:

<?php

function woocom_extra_login_fields() {

	?>
		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<label for="phone"><?php _e( 'Phone Number', 'text-domain' ); ?><span class="required">*</span></label>
			<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="phone" id="phone" autocomplete="phone">
		</p>
	<?php

}
add_action( 'woocommerce_login_form_start', 'woocom_extra_login_fields' );

B. Validate the fields

And for validation, we'll use the woocommerce_process_login_errors filter

function woocom_validate_extra_login_fields( $validation_error, $login, $password ) {

	$phone = $_POST['phone'] ?? '';

	if ( empty( $phone ) ) {

		remove_action( 'authenticate', 'wp_authenticate_username_password', 20, 3 );
		$validation_error = new WP_Error( 'denied', 'Phone Number is required!' );
	}

    return $validation_error;
}
add_filter( 'woocommerce_process_login_errors', 'woocom_validate_extra_login_fields', 10, 3 );

3. Adding custom fields to the WooCommerce register form

A. Add the fields

To add custom fields to the register form, we can use the following hooks:

<?php

function woocom_extra_register_fields() {
    
    ?>

		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<label for="first_name"><?php _e( 'First Name', 'text-domain' ); ?><span class="required">*</span></label>
			<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name='first_name' id='first_name'/>
		</p>

		<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
			<label for="last_name"><?php _e( 'Last Name', 'text-domain' ); ?><span class="required">*</span></label>
			<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name='last_name' id='last_name'/>
		</p>

    <?php
}
add_action( 'woocommerce_register_form_start', 'woocom_extra_register_fields' );

B. Validate the fields

And for validation, we’ll use the woocommerce_register_post action

function woocom_validate_extra_register_fields( $username, $email, $validation_errors ){

    if (isset($_POST['first_name']) && empty($_POST['first_name']) ) {
    	$validation_errors->add('first_name_error', __('First Name is required!', 'text-domain'));
    }

    if (isset($_POST['last_name']) && empty($_POST['last_name']) ) {
    	$validation_errors->add('last_name_error', __('Last Name is required!', 'text-domain'));
    }

    return $validation_errors;
}
add_action( 'woocommerce_register_post', 'woocom_validate_extra_register_fields', 10, 3 );

C. Save the fields

To ensure our custom register fields are saved to the user, we can utilize the woocommerce_created_customer action.

function woocom_save_extra_register_fields( $customer_id ) {

    if (isset($_POST['first_name'])) {
		update_user_meta($customer_id, 'billing_first_name', sanitize_text_field($_POST['first_name']));
    }
	
    if (isset($_POST['last_name'])) {
		update_user_meta($customer_id, 'billing_last_name', sanitize_text_field($_POST['last_name']));
    }

}
add_action( 'woocommerce_created_customer', 'woocom_save_extra_register_fields' );