Extend Woocommerce Registration form fields

As like WordPress, Woocommerce Registration form fields are the same – User email & Password. Additionally, WC sometime just use the Email field only. This article describes how you can add additional registration form fields to the WC’s registration form.

In this post, we will add two more fields there – First name & Last name, and will generate username from first name, last name value rather than email prefix (what wc use at present).

Table of Contents

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

Add Extra Registration Fields

Woocommerce has a callback/hook woocommerce_register_form_start to display custom html before their registration form. We are using the hook woocommerce_register_form_start to display our first & last name field.

Below code will add 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 = $_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 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 form field values whether someone tries to register. We are making sure all of these fields are required and can not be left empty. Thus, we are generating errors using proper hook woocommerce_process_registration_errors which comes with a argument $validation_error. Argument $validation_error is a WP_Error object. We just need to add error to this object if there’s any invalid value used on our newly created fields.

<?php
function w4dev_registration_errors( $validation_error, $username, $password, $email ) {
    if ( ! isset( $_POST['first_name'] ) || empty( $_POST['first_name'] ) ) {
        $validation_error->add('error', 'Please enter your First name');
    } elseif ( ! isset( $_POST['last_name'] ) || empty( $_POST['last_name'] ) ) {
        $validation_error->add( '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 has been placed on the registration form, and we are properly validating the inputs,
the next thing we need is to save those fields information. 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 if username field is inactive
     */
    if ( 'no' !== get_option( 'woocommerce_registration_generate_username' ) || ! empty( $username ) ) {
        $username = sanitize_user( wc_clean( $_POST['first_name'] ) );
        if ( username_exists( $username ) ){
            $username .= sanitize_user( wc_clean( $_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's into database, 
     * we just need to include it here
    **/
    $data['first_name'] = wc_clean( $_POST['first_name'] );
    $data['last_name'] = wc_clean( $_POST['last_name'] );

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

Conclusion

Now put all of the codes together and place it on your themes functions.php file. Either you could place it also on an active plugin.