Breakpoints & Breaktime

April 29, 2023
Woocommerce / WordPress

How to Add Custom Fields to WooCommerce Registration and My Account Pages

by Jigang Guo

In most eCommerce websites, collecting more user information during registration can help enhance the customer experience and improve marketing or operational effectiveness. WooCommerce, being a highly customizable plugin, allows you to modify its templates — enabling developers to add custom fields to both the user registration form and the “My Account” section.

This article explains how to add new fields (like first name, last name, title, or date of birth) to the registration and account edit pages in WooCommerce, along with saving this information securely.

Step 1: Customize the Registration Form Template

To begin, copy the WooCommerce registration form template form-login.php from the plugin folder to your active theme:

/wp-content/themes/your-theme/woocommerce/myaccount/form-login.php

Add the following HTML code to include the First Name and Last Name fields:

<p class="form-row form-row-wide">
    <label for="reg_first_name"><?php _e( 'First Name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" required name="first_name" id="reg_first_name" value="<?php if ( ! empty( $_POST['first_name'] ) ) echo esc_attr( $_POST['first_name'] ); ?>" />
</p>

<p class="form-row form-row-wide">
    <label for="reg_last_name"><?php _e( 'Last Name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" required name="last_name" id="reg_last_name" value="<?php if ( ! empty( $_POST['last_name'] ) ) echo esc_attr( $_POST['last_name'] ); ?>" />
</p>

Step 2: Save Custom Data During Registration

To store the data entered during registration, hook into the user_register action in your functions.php file:

add_action( 'user_register', 'pft_registration_save', 10, 1 );
function pft_registration_save( $user_id ) {
    if ( isset( $_POST['first_name'] ) )
        update_user_meta( $user_id, 'first_name', sanitize_text_field( $_POST['first_name'] ) );

    if ( isset( $_POST['last_name'] ) )
        update_user_meta( $user_id, 'last_name', sanitize_text_field( $_POST['last_name'] ) );

    if ( isset( $_POST['title'] ) )
        update_user_meta( $user_id, 'title', sanitize_text_field( $_POST['title'] ) );

    if ( isset( $_POST['dob'] ) )
        update_user_meta( $user_id, 'dob', sanitize_text_field( $_POST['dob'] ) );
}

This function ensures that any custom field data is securely saved in the WordPress user meta table.

Step 3: Show and Edit Custom Fields in the My Account Page

To allow users to view and update their details, copy the form-edit-account.php template to your theme and edit it accordingly:

/wp-content/themes/your-theme/woocommerce/myaccount/form-edit-account.php

Then add the fields like this:

<p class="form-row form-row-first">
    <label for="account_first_name"><?php _e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>

<p class="form-row form-row-last">
    <label for="account_last_name"><?php _e( 'Last name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="input-text" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
</p>

Final Thoughts: UX Considerations

While technically feasible, adding too many fields to the registration form can hurt conversion rates. Users are often reluctant to share personal information, especially if they don’t yet trust your website.

Before asking for more data, ask yourself:

  • Is this information absolutely necessary for making a purchase?
  • Could this data be collected later instead of during registration?
  • Will collecting this data add value to the user experience?

You may also like