This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

[Webinar] Register Now to Learn Component Based Web Development With Builderius. Click here to register

How to Add Custom Registration Form Fields in WooCommerce

Updated on March 21, 2022

6 Min Read
woocommerce registration form fields

Those who use Woocommerce know that the default registration form is very simple and does not allow you to insert additional fields. And it is common that sometimes you need to add additional fields during user registration.

A custom form makes your website more professional, request additional user information during the registration process, and much more. In this article, I will explain how to add custom fields in the Woocommerce registration form without using plugins.

Enable Customer Registration Option

First, ensure that the WooCommerce registration forms are enabled on the account login page. For this, go to WooCommerce → Settings → Accounts and check to 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.

Add Custom Code in Functions.php File

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.

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' );

If you refresh the page, you’ll see the fields added to the WooCommerce registration form.

WooCommerce Registration Page Fields

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

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.

Validate Registration Form Fields

Now we also need 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 like the code of this function, you’ll make sense that it is simply checking $_POST array for form values and including an error message if a value is not present or invalid data.

Along these lines, you can likewise include various validation rules and add validation rules to different fields. You can see one of our custom validation rules being applied.

WooCommerce My Account Page Login Register

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' );

And we are done here! The recently added fields have been added, validated, and inserted for future use.

On the billing address page in your account, you need to click on edit to go there. You can see the values from the registration form already being populated.

Edit My Account Page WooCommerce

Edit WooCommerce Account Page

If you wish to use an alternative method for registering WocCommerce form fields, you can use WooCommerce hooks to edit WooCommerce my account page. The following code snippet illustrates the process.

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.

update WooCommerce form field

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.

Add Required WooCommerce Form Field

As you can see, this 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:

WooCommerce form registration

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

Summary

This tutorial allows the users to add extra WooCommerce form fields in the registration page, which is the My Account page of WooCommerce. So, now you can add more fields besides the first name, last name, and contact fields. You may also make them mandatory fields. I hope you found the article helpful. Let me know in the comments if you’ve any questions, and I’ll get back to you!

Q. How do I show a registration form in WooCommerce?

A. To do this, go to WooCommerce → Settings → Accounts → Registration Options. Here, you need to enable the option “Enable registration on the “My Account” page.”

Q. How do I display custom fields in WooCommerce?

A. For this, you need to install the WooCommerce product table plugin, then go to WooCommerce → Settings → Products → Product Tables and choose the settings for your product tables. Open the ‘Edit Product’ screen for the product where you want to add a table of custom fields. Add a product table shortcode to the Short Description field.

Q. How do I add product data to WooCommerce?

A. The Product Data meta box is where the most important data is added for your products. To do this, go to WooCommerce → Products → Add New. Scroll down to the Product Data section. Here you can add your product detail.

Q. How to add CAPTCHA to the WooCommerce registration form?

A. Go to WooCommerce Dashboard → Plugins → Add New, then search Captcha Recaptcha for WooCommerce after that, install the plugin now activate it.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

SAVINGS
Time Left In Offer
  • 0

    Days

  • 0

    Hours

  • 0

    Minutes

  • 0

    Seconds

40% OFF

On All Plans

GET THE DEAL NOW