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:

Username or email address: This field accepts user input for their registered username or email address. It is usually an <input> element with the name attribute set to username or email.
Password: This field is used to collect the user’s password. It is also an <input> element with the name attribute set to password. The input type is typically password to hide the entered characters.

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:

Username: This field allows users to choose a unique username for their account. It is often an <input> element with the name attribute set to username.
Email address: Users provide their email address in this field, which is crucial for account-related communication. It is typically an <input> element with the name attribute set to email.
Password: This field prompts users to set a secure password for their account. Like the login form password field, it is an <input> element with the name attribute set to password. The input type is usually password for security.
Additional fields: Depending on your WooCommerce setup and any customizations you have made, there may be additional fields such as First Name, Last Name, or other user-specific information.

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:

woocommerce_login_form_start: This hook is placed at the beginning of the login form.
woocommerce_login_form: This hook is placed inside the login form, just before the submit button.

<?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:

woocommerce_register_form_start: This hook is placed at the beginning of the login form.
woocommerce_register_form: This hook is placed inside the login form, just before the submit button.

<?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' );