Like WordPress, the WooCommerce registration form comes with minimal fields – user email & password. Sometimes WC uses just the email field only. This article describes how you can add additional fields to the WooCommerce registration form.

In this post, we will add two more fields there – First name & Last name, and will generate the username from the first name and last name values rather than the email prefix (what WC uses by default).

Table of Contents

• Add Extra Registration Fields
• Validate Additional fields input
• Saving Field Information

Add Extra Registration Fields

WooCommerce has a hook woocommerce_register_form_start to display custom HTML before its registration form fields. We are using this hook to display our first & last name fields.

The code below will add the First/Last name fields right at the top of the registration box.

<?php
function w4dev_woocommerce_register_form() {
    $fields = array(
        'first_name' 	=> 'First name',
        'last_name' 	=> 'Last name'
    );
    foreach ( $fields as $k => $v ) {
        $val = '';
        if ( ! empty( $_POST[ $k ] ) ) {
            $val = wp_unslash( $_POST[ $k ] );
        }
        ?>
        <p class="form-row form-row-wide">
            <label for="<?php echo $k; ?>"><?php echo $v; ?> <span class="required">*</span></label>
            <input type="text" class="input-text" name="<?php echo $k; ?>" id="<?php echo $k; ?>" value="<?php echo esc_attr( $val ); ?>" />
        </p>
        <?php
    }
}
add_action( 'woocommerce_register_form_start', 'w4dev_woocommerce_register_form' );
?>

Validate Additional fields input

The next part is to validate the field values when someone tries to register. We are making sure both of these fields are required and can not be left empty. For that, we are generating errors using the proper hook woocommerce_process_registration_errors, which comes with an argument $validation_error. The $validation_error argument is a WP_Error object. We just need to add an error to this object if any invalid value is submitted on our newly created fields.

<?php
function w4dev_woocommerce_registration_errors( $validation_error, $username, $password, $email ) {
    if ( empty( $_POST['first_name'] ) ) {
        $validation_error->add( 'first_name_error', __( 'Please enter your First name' ) );
    }
    if ( empty( $_POST['last_name'] ) ) {
        $validation_error->add( 'last_name_error', __( 'Please enter your Last name' ) );
    }
    return $validation_error;
}
add_filter( 'woocommerce_process_registration_errors', 'w4dev_woocommerce_registration_errors', 10, 4 );
?>

Saving Field Information

Once the fields have been placed on the registration form and the inputs are properly validated,
the next thing we need is to save those field values. For that we will be using the following code –

function w4dev_woocommerce_new_customer_data( $data ) {
    /**
     * generate username from first/last name field input,
     * only when WooCommerce is set to auto generate usernames
     */
    if ( 'yes' === get_option( 'woocommerce_registration_generate_username' ) ) {
        $username = sanitize_user( wc_clean( wp_unslash( $_POST['first_name'] ) ) );
        if ( username_exists( $username ) ){
            $username .= sanitize_user( wc_clean( wp_unslash( $_POST['last_name'] ) ) );
        }

        // Ensure username is unique
        $append     = 1;
        $o_username = $username;

        while ( username_exists( $username ) ) {
            $username = $o_username . $append;
            $append ++;
        }
        $data['user_login'] = $username;
    }

    /**
     * wordpress will automatically insert this information into the database,
     * we just need to include it here
    **/
    $data['first_name'] = wc_clean( wp_unslash( $_POST['first_name'] ) );
    $data['last_name'] = wc_clean( wp_unslash( $_POST['last_name'] ) );

    return $data;
}
add_filter( 'woocommerce_new_customer_data', 'w4dev_woocommerce_new_customer_data' );

Conclusion

Now put all of the code together and place it in your theme’s functions.php file, or in an active plugin.