Add Phone Beside the Email @ WooCommerce Registration Form

In a recent Business Bloomer Club Slack thread, a member asked whether it’s possible to add a phone input field next to the email field on the WooCommerce registration form—without modifying the WooCommerce template files.

This is a very common request, especially for store owners who want to collect phone numbers during user registration for order follow-ups, marketing, or support purposes.

So, here’s a detailed and working approach that uses hooks, custom HTML fields, validation, and jQuery—without touching template files at all.

In this post, we’ll break down the full method step by step, explain why it works, and help you implement a similar solution for your WooCommerce store. You’ll also learn about limitations and possible improvements, including using a mini-plugin for cleaner implementation.

Let’s take a look at how this solution works.

Add the Phone and Custom Email Fields with a Hook

To display both the email and phone fields on the same line, the solution involves overriding the default WooCommerce email field with a custom one, and adding a phone field next to it.

Here’s the PHP snippet used:

add_action( 'woocommerce_register_form_start', 'add_phone_field_to_registration_after_email', 11 );

function add_phone_field_to_registration_after_email() {
    ?>
    <p class="woocommerce-form-row form-row form-row-first">
        <label for="reg_email_custom"><?php esc_html_e('Email address', 'woocommerce'); ?> <span class="required">*</span></label>
        <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email_custom" autocomplete="email" value="<?php if (!empty($_POST['email'])) echo esc_attr(wp_unslash($_POST['email'])); ?>" />
    </p>
    <p class="woocommerce-form-row form-row form-row-last">
        <label for="reg_phone_number"><?php esc_html_e('Phone number', 'woocommerce'); ?> <span class="required">*</span></label>
        <input type="tel" class="woocommerce-Input woocommerce-Input--text input-text" name="phone_number" id="reg_phone_number" value="<?php if (!empty($_POST['phone_number'])) echo esc_attr(wp_unslash($_POST['phone_number'])); ?>" />
    </p>
    <?php
}

This snippet places both fields side by side using WooCommerce’s built-in CSS classes: form-row-first and form-row-last.

Validate the Phone Number on Registration

To ensure the user can’t submit the form without entering a phone number, another hook handles validation:

add_action( 'woocommerce_register_post', 'validate_phone_field', 10, 3 );

function validate_phone_field($username, $email, $validation_errors) {
	if ( is_account_page() && !is_user_logged_in() ) {
		if ( empty($_POST['phone_number']) ) {
			$validation_errors->add('phone_number_error', __('Phone number is required.', 'woocommerce'));
		}
	}
    return $validation_errors;
}

This hook checks the form POST data and adds a validation error if the phone number is missing.

Save the Phone Number to the Customer Meta

Once validated, the phone number must be saved to the user’s profile so that it appears in the backend and can be reused (e.g. for orders, marketing, etc.):

add_action( 'woocommerce_created_customer', 'save_phone_field' );

function save_phone_field($customer_id) {
    if (!empty($_POST['phone_number'])) {
        update_user_meta($customer_id, 'billing_phone', sanitize_text_field($_POST['phone_number']));
    }
}

This stores the value as billing_phone, the same field WooCommerce uses for the customer’s phone number.

Hide Default Email Field and Sync With JavaScript

WooCommerce renders the default email field using its core template. Since we can’t remove it without editing the template, the workaround is to hide it with jQuery and copy the value from the custom email field in real time:

if ($('body').hasClass('woocommerce-account') && $('.woocommerce-form-register').length > 0) {
	$('#reg_email').parent().hide();

	// On page load, copy value from custom email field to the original Woo email field
	$('#reg_email').val($('#reg_email_custom').val());

	// Mirror changes in real-time
	$('#reg_email_custom').on('input change', function() {
		$('#reg_email').val($(this).val());
	});
}

This ensures WooCommerce receives the correct email, while still allowing custom placement of fields without altering templates.

Possible Improvements and Considerations

While this approach works well and meets the requirements of avoiding template changes, here are a few things to keep in mind:

• CSS styling: Depending on your theme, you may need to adjust spacing between the two fields.
• JavaScript dependence: If JS fails to load, the email value might not sync properly.
• Plugin alternative: If you prefer a plugin solution, the WooCommerce Add Customer Fields to My Account Registration Form mini-plugin can help. It doesn’t currently support field reordering, but an add-on is in the works.

Conclusion

Thanks to WordPress and WooCommerce hooks, it’s entirely possible to customize the registration form—adding a phone field next to the email field—without touching any template files. The approach discussed in the Business Bloomer Club Slack thread is smart, lightweight, and flexible. It does require a bit of PHP and jQuery, but the result is a user-friendly registration form that collects more relevant data from your customers.

If you’re building custom WooCommerce user flows, this solution is a great starting point—and if you’re looking to save time, mini-plugins can provide an even easier route.