Menu Close

How to Add WooCommerce EXTRA Registration Form Fields

How to Add WooCommerce Registration Form Fields

To begin, make sure that the WooCommerce registration forms are enabled on the account login page. For this, go to WooCommerce > Settings > Accounts and check Enable customer registration on the “My account” page.

WooCommerce my account page

After enabling this option, you can see the WooCommerce registration form at the frontend.

As should be obvious it is a pretty modest WooCommerce form, however, we can add more fields to this structure by utilizing the following actions. Presently, to include extra fields like first name, last name and phone number, and so on, include the following lines of code toward the end of your functions.php, which is located in your theme folder.

//Add WooCommerce Registration Form Fields

function wooc_extra_register_fields() {?>
<p class=”form-row form-row-wide”>
<label for=”reg_billing_phone”><?php _e( ‘Phone’, ‘woocommerce’ ); ?></label>
<input type=”text” class=”input-text” name=”billing_phone” id=”reg_billing_phone” value=”<?php esc_attr_e( $_POST[‘billing_phone’] ); ?>” />
<p class=”form-row form-row-first”>
<label for=”reg_billing_first_name”><?php _e( ‘First name’, ‘woocommerce’ ); ?><span class=”required”>*</span></label>
<input type=”text” class=”input-text” name=”billing_first_name” id=”reg_billing_first_name” value=”<?php if ( ! empty( $_POST[‘billing_first_name’] ) ) esc_attr_e( $_POST[‘billing_first_name’] ); ?>” />
<p class=”form-row form-row-last”>
<label for=”reg_billing_last_name”><?php _e( ‘Last name’, ‘woocommerce’ ); ?><span class=”required”>*</span></label>
<input type=”text” class=”input-text” name=”billing_last_name” id=”reg_billing_last_name” value=”<?php if ( ! empty( $_POST[‘billing_last_name’] ) ) esc_attr_e( $_POST[‘billing_last_name’] ); ?>” />
<div class=”clear”></div>
add_action( ‘woocommerce_register_form_start’, ‘wooc_extra_register_fields’ );

Now if you refresh the page, you’ll see the fields being added to WooCommerce registration form.

OR Download Word Doc for FULL instructions and images