The registration form of any eCommerce store is an essential aspect used to collect data of customers. With the help of collected data, you can organize and group your registered customers according to your need and requirements. See now how to add WooCommerce custom fields on the user registration form in your WordPress website.
WooCommerce is one of the popular platforms in the e-commerce world. It consists of a variety of valuable and great features that are helpful for store owners, and in the same way, it offers you the option to set WooCommerce registration form. By default, it has two fields, Email and Password. However, sometimes you have to add your custom fields, which can also be done.
So, today in this tutorial, I will teach you how to add custom fields in WooCommerce Registration Form. We’ll also learn how to use WooCommerce custom user registration fields.
Add WooCommerce Custom Fields in the Registration Form
To achieve it, you need to follow these steps:
- Firstly, Enable WooCommerce Registration Form
- Secondly, Add Custom Field in WooCommerce Registration Form
- Add Custom Fields to the Frontend
- Add Validations to Custom Fields
- Finally, Save the Data of Custom Fields to the Database
Enable WooCommerce Registration Form
Open your WordPress admin panel and navigate to WooCommerce → Settings from the left side of the dashboard:
Now here, first click on Account & Privacy tab and then select the checkbox Allow customers to create an account on the “My Account” page:
Then click on Save Changes from the bottom of this page:
Finally, Go to the account page, and you will see the default WooCommerce registration form:
Add WooCommerce Custom Fields in the Registration Form
Navigate to Appearance → Editor from the left side of your dashboard:
On the right side, you will see the Theme Files section, here click on functions.php to open this file:
Now you will see the editor for your functions.php file:
From here, you will add the custom fields in WooCommerce Register Form.
Add Custom Fields to the Frontend
First, add your custom fields to the front end of your WooCommerce Registration Form. So, to do it, add this code at the end of functions.php:
function woocom_extra_register_fields() {?>
<p class=”form-row form-row-wide”>
<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-wide”>
<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>
<?php
}
add_action( ‘woocommerce_register_form_start’, ‘woocom_extra_register_fields’ );
In the above code, I have created the function woocom_extra_register_fields() in which I have added the fields (First Name and Last Name), which will show in the front end. You can add more fields according to your need.
I have also added the prefix “billing_” before the name of each custom field to relate it with the billing address. So, here is a list of all the valid fields which you can add to your WooCommerce registration form, and they can be up with the billing address:
- billing_first_name
- billing_last_name
- billing_address_1
- billing_address_2
- billing_phone
- billing_company
- billing_city
- billing_postcode
- billing_country
- billing_state
- billing_email
Now to verify that the fields are correctly up to your WooCommerce Registration Form, go to your store account page, and here you will see them:
Add Validations to Custom Fields
As your WooCommerce Registration Form fields are up, now to add validation to these fields. So, add this code after the end of the previous function:
function woocom_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’, __(‘First Name is required!’, ‘woocommerce’));
}
if (isset($_POST[‘billing_last_name’]) && empty($_POST[‘billing_last_name’]) ) {
$validation_errors->add(‘billing_last_name_error’, __(‘Last Name is required!’, ‘woocommerce’));
}
return $validation_errors;
}
add_action(‘woocommerce_register_post’, ‘woocom_validate_extra_register_fields’, 10, 3);
In the above code. I have created the function woocom_validate_extra_register_fields( $username, $email, $validation_errors ) in which I have set validation that if the created custom fields are empty, then show the message. I have set this message:
- First name field, First Name is required!
- Last name field, the Last Name is required!
Save the Data of Custom Fields to the Database
To save the data of these custom fields, you must add it to the database. For that, add this code after the end of the previous function:
function woocom_save_extra_register_fields($customer_id) {
if (isset($_POST[‘billing_first_name’])) {
update_user_meta($customer_id, ‘billing_first_name’, sanitize_text_field($_POST[‘billing_first_name’]));
}
if (isset($_POST[‘billing_last_name’])) {
update_user_meta($customer_id, ‘billing_last_name’, sanitize_text_field($_POST[‘billing_last_name’]));
}
}
add_action(‘woocommerce_created_customer’, ‘woocom_save_extra_register_fields’);
In the above code. I have created the function woocom_save_extra_register_fields($customer_id) which will save the data of the custom fields in the database.
All done, click on Update File from the bottom of the Editor:
It’s time to verify whether the data of the custom fields are getting saved in the database. Register the account and then go to your billing address to check it. Here you will see that the first name and last name are added automatically to the billing address:
It means that custom fields are successfully added to your WooCommerce Registration Form.
RegistrationMagic – Custom Registration Forms, User Registration and User Login Plugin
Running a WooCommerce store? WooCommerce user registration is another area where RegistrationMagic comes in handy. We know limited signup options in WooCommerce can slow you down.
RegistrationMagic can help you improve your WooCommerce user registration by allowing you to add custom fields to the checkout registration form. User Manager can display WooCommerce earnings, address and download information. You can also add WooCommerce billing and shipping fields to your default registry. As a result, a great way to custom user registration for Woocommerce.
How To Add Woo Register Form In WordPress Sidebar or Footer?
Conclusion
Now with the help of this guide, you can easily add custom fields to your WooCommerce registration form. Don’t forget to leave your feedback or if you have any queries, feel free to drop them!