How to Add Custom Registration Form Fields in WooCommerce

Are you looking to create a more personalized and seamless user experience for your customers on your WooCommerce-powered online store?

One of the most effective ways to do this is by adding custom fields to your WooCommerce registration form.

For those who use Woocommerce, the default registration form is quite basic and doesn’t offer the option to add extra fields. This can be problematic as there may be instances where you need to collect additional information from users during the registration process.

Adding a custom form to your website can enhance its professionalism and allow you to collect important user information during the registration process, among other benefits.

In this article, I will explain how to add custom fields in the Woocommerce registration form using three different methods.

Why Add Custom Fields to Your WooCommerce Registration Form?

Adding custom fields to your WooCommerce registration form can significantly improve your online store’s performance and customer experience.

Here are a few reasons why you should add custom fields to your WooCommerce Registration form:

• Collect additional information from your customers to know them better and facilitate them accordingly.
• Enhance the user experience by offering them more personalized services.
• It can help you simplify the checkout process.
• Can help you gather the information that assists your customer support team in addressing queries or issues more efficiently.

How to Add Custom Registration Form Fields in WooCommerce (3 Methods)

In this tutorial, we’ll explore three methods to add custom registration form fields in WooCommerce. Follow the steps below to manually add custom registration form fields to your WooCommerce store.

Method 1: Add Custom Registration Form Fields Using Code

Step 1: Enable the Customer Registration Option

The first step is to enable the WooCommerce registration forms on the account login page.

For this,

• Go to WooCommerce → Settings → Accounts
• Check to Enable Customer Registration on the “My Account” page.

• After enabling this option, you should be able to see the WooCommerce registration form at the front end.

Step 2: Add Custom Code in Functions.php File

As you can see, the default WooCommerce registration form is quite simple and lacks many necessary fields.

However, we can add more fields as per our liking. For example, to include extra fields like first name, last name, phone number, and so on, add the following lines of code toward the end of your functions.php file, which is located in your theme folder.

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>

       <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>

       <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'] ); ?>" />

       </p>

       <div class="clear"></div>

       <?php

 }

 add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

After adding the code, if you refresh the page, you’ll see the fields added to the WooCommerce registration form.

To relate these registration form fields with the billing address, you must include the prefix “billing_” before the field name.

Now that we know how to add custom fields to our registration form, let’s now look at a list of some WooCommerce form fields.

List of WooCommerce Form Fields

The following is a list of all the valid WooCommerce form fields that can be added to the registration form and can be associated with a billing address.

• billing_first_name
• billing_last_name
• billing_company
• billing_address_1
• billing_address_2
• billing_city
• billing_postcode
• billing_country
• billing_state
• billing_email
• billing_phone

From launching to customizing your WooCommerce stores, Cloudways is at your service.

Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.

Try 3 Days Free!

Step 3: Validate Registration Form Fields

• After creating the custom fields, the next step is to validate these newly added form fields.
• To validate these structure fields, include the accompanying lines of code toward the end of your functions.php file, which is located in the theme folder.

/**

* register fields Validating.

*/

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {

      if ( isset( $_POST['billing_first_name'] ) && empty( $_POST['billing_first_name'] ) ) {

             $validation_errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );

      }

      if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {

             $validation_errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: Last name is required!.', 'woocommerce' ) );

      }
         return $validation_errors;
}

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

If you pay attention to the code above, you’ll understand that it simply validates the values submitted through the form by checking the $_POST array and generates an error message if a value is not present or if the data is invalid.

Additionally, it’s possible to include various validation rules and apply them to different fields. In the screenshot below, you can see an example of one of our custom validation rules being applied.

Step 4: Save the Values into the Database

• Next, we need to save these values to the database. To insert values in the database, add the following function in your theme’s functions.php file.

/**

* Below code save extra fields.

*/

function wooc_save_extra_register_fields( $customer_id ) {

    if ( isset( $_POST['billing_phone'] ) ) {

                 // Phone input filed which is used in WooCommerce

                 update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );

          }

      if ( isset( $_POST['billing_first_name'] ) ) {

             //First name field which is by default

             update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

             // First name field which is used in WooCommerce

             update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

      }

      if ( isset( $_POST['billing_last_name'] ) ) {

             // Last name field which is by default

             update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

             // Last name field which is used in WooCommerce

             update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

      }

}

add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

That concludes the process of adding, validating, and inserting the custom fields for future use. When you access the billing address page in your account and click on “Edit”, you’ll see that the values from the registration form are already populated in the corresponding fields.

Method 2: Add Custom Registration Form Fields using WooCommerce Hooks

Aside from method 1, you can also add the custom registration form fields in your online store through Webhooks.

Here’s how you can do that:

Step 1: Edit WooCommerce Account Page

• If you wish to use WooCommerce hooks to edit the WooCommerce my account page, follow the code snippet below.

function woocommerce_edit_my_account_page() {

    return apply_filters( 'woocommerce_forms_field', array(

        'woocommerce_my_account_page' => array(

            'type'        => 'text',

            'label'       => __( 'Socail Media Profile Link', ' cloudways' ),

            'placeholder' => __( 'Profile Link', 'cloudways' ),

            'required'    => false,

        ),

    ) );

}

function edit_my_account_page_woocommerce() {

    $fields = woocommerce_edit_my_account_page();

    foreach ( $fields as $key => $field_args ) {

        woocommerce_form_field( $key, $field_args );

    }

}

add_action( 'woocommerce_register_form', 'edit_my_account_page_woocommerce', 15 );

• Here’s what the outcome of the snippet would look like:

The above snippet starts with the woocommerce_edit_my_account_page() that is used in the later part of the snippet. This function returns a multidimensional array containing information about the fields (type, label, placeholder, required, or not) you add to the form.

To ensure that the values of the fields can be updated further on, the array is further processed through the woocommerce_form_field() function.

I used the edit_my_account_page_woocommerce() function in the next half of the snippet. As you can see, the $fields variable contains the array generated by the woocommerce_edit_my_account_page() function. This is looped through using the foreach() loop.

Web Hosting Savings Calculator

Save up to $7k+ annually by finding the ideal host based on your requirements & get a detailed comparison of top providers with one click.

CALCULATE SAVINGS

Step 2: Add Required WooCommerce Form Field

As you can see, the above-mentioned snippet is very flexible, and you can add any field type that you wish by providing the appropriate field structure value in the $fields array.

Here are a few examples:

Textarea

'woocommerce_my_account_page' => array(
         'type'        => 'textarea',
         'label'       => __( 'Socail Media Profile Link', 'cloudways' ),
         'placeholder' => __( 'Profile Link', 'cloudways' ),
         'required'    => false,
     ),

checkbox

'woocommerce_my_account_page_checkbox'   => array(

           'type'  => 'checkbox',

           'label' => __( 'Checkbox', 'cloudways' ),

       ),

Option list

'woocommerce_my_account_page_select'     => array(

           'type'    => 'select',

           'label'   => __( 'Select Field', 'cloudways' ),

           'options' => array(

               '' => __( 'Select an options.', 'cloudways' ),

               1  => __( 'WooCommerce forms', 'cloudways' ),

               2  => __( 'WooCommerce  my account page', 'cloudways' ),

               3  => __( 'WooCommerce edit my account page', 'cloudways' ),

               4  => __( 'How to edit WooCommerce my account page', 'cloudways' ),

               5  => __( 'Edit my account page WooCommerce', 'cloudways' ),

           ),

Here’s how these options would look in the form:

You can save these values in the function wooc_save_extra_register_fields(), mentioned above.

Method 3: Add Custom Registration Form Fields Using Plugin

To create a registration form using a plugin in WooCommerce, you can use the popular “User Registration” plugin by WP Everest. It offers a simple drag-and-drop form builder that allows you to create a custom registration form for your WooCommerce site.

Here’s how to create a registration form using the “User Registration” plugin:

Step 1: Install and Activate the Plugin

• Go to your WordPress dashboard.
• Navigate to ‘Plugins‘ > ‘Add New‘.
• Search for “User Registration” in the search bar.

• Install and activate the plugin by WP Everest.

Step 2: Create a Registration Form with Customized Fields

• Go to the WordPress dashboard.
• Navigate to ‘User Registration‘ > ‘Add New‘.

• You can select any template or start from scratch. I’ll will select the Student Registration form template.

• Give it a name.

• Use the drag-and-drop form builder to add and arrange fields for your registration form. You can add basic fields such as email, username, and password, as well as custom fields, depending on your needs.

Step 3: Add the Registration Form to your Website

• You can add the registration form to a page or a post using a shortcode. To find the shortcode, go to ‘User Registration‘ > ‘All Forms‘ in your WordPress dashboard. You’ll see the shortcode listed next to your form (e.g., [user_registration_form id=”123″]).
• Create a new page or post, or edit an existing one.
• Add a ‘Shortcode’ block and paste the shortcode of your registration form.

• This shortcode will add a registration form to your accounts page.
•  Publish or update the page.

Congratulations. You have successfully added the registration form with customized fields.

Now your custom registration form should be visible on your website, and users can register using the form you’ve created.

Best Practices for Adding Custom Fields to WooCommerce Registration Form

When adding custom fields to your WooCommerce registration form, it’s important to follow best practices to ensure a positive user experience and maximize the benefits of the customization. Here are some key best practices to consider:

• Add custom fields that are relevant and necessary for your business and target audience.
• Limit the number of fields.
• Choose the right field type for the information you’re collecting.
• Arrange the fields on your registration form in a logical order, grouping related fields together.
• Add validation rules to your custom fields to ensure that the data entered by users is accurate and complete.
• Make sure that your custom registration form fields are responsive and display correctly on different devices and screen sizes.
• Regularly test your custom registration form fields to ensure they’re working correctly and providing a positive user experience.

Troubleshooting Common Issues with WooCommerce Registration Form Fields

Sometimes when you try to create a registration form for WooCommerce, you may encounter some issues. Here’s how you can fix some of the common issues arising from WooCommerce registration form fields.

Problem#1: Registration Form Not Displaying

Sometimes you set up the registration form, but it just doesn’t show up on your page.

Solution:

Here’s how you can fix it:

• Ensure that WooCommerce is installed and activated.
• Go to WooCommerce > Settings > Accounts & Privacy.
• Make sure the “Allow customers to create an account during checkout” and/or “Allow customers to create an account on the ‘My account’ page” options are enabled.

Problem#2: Fields Not Saving User Input

Sometimes you create a registration form, but the users cannot enter their details.

Solution:

Here’s how you can fix this issue:

• Check for plugin or theme conflicts by deactivating other plugins one by one and switching to a default theme, such as Twenty Twenty-One.

• If a conflict is found, contact the respective plugin or theme developer for support.

Problem#3: Custom Fields Not Appearing on the Registration Form

Sometimes the custom fields don’t appear on the registration form. There can be several reasons for it. One of those is that you didn’t add the field correctly in the file.

Solution:

Here’s the solution to it:

• Verify that the custom fields have been added correctly to the functions.php file of your active theme or a custom plugin.
• If the custom fields still don’t appear, check for plugin or theme conflicts.

Problem#4: Email or Username Already in Use

Sometimes when users enter the email or username, they get the error message stating that the email address or username is already in use. This message can sometimes appear with unique email addresses too.

Solution:

Here’s how you can prevent it:

• Ensure that the registration form checks for existing users with the same email or username and displays an appropriate error message.
• Consider using a plugin, like “User registration,” to allow users to register with their existing social media accounts.

Problem#5: Registration Form Styling Issues

Sometimes you don’t like how the registration form appears in the store.

Solution:

You can fix it by playing around with the CSS.

• Inspect the CSS styles applied to the registration form and adjust as needed.
• Use a child theme or custom CSS plugin to add or modify CSS styles safely.

Summary

In conclusion, I hope you found this article helpful in learning how to add custom registration form fields to your WooCommerce store. Adding woocommerce registration form fields can significantly improve user experience, collect valuable customer data, and streamline the checkout process.

By following our comprehensive guide, you can successfully implement custom fields using webhooks or code, or plugins, ensuring a tailored and efficient registration process for your customers.

Furthermore, with the added flexibility of custom fields, you can add more fields besides the first name, last name, and contact fields and make them mandatory if needed.

If you have any questions, please feel free to comment, and I’ll get back to you promptly.