How to Add Custom Registration Form Fields in WooCommerce?

Hello Guys, by following our guide you can easily add custom registration form fields in WooCommerce. Unlock the potential to gather customer data and enhance user engagement.

WooCommerce, the popular e-commerce plugin for WordPress, provides a robust platform for businesses to set up online stores. While WooCommerce offers a range of features, you may sometimes need to collect additional information from customers during the registration process.

In this dev blog post, we will explore how to enhance your WooCommerce store by adding custom registration form fields.

For this you just need to follow 3 steps :

• Adding your HTML over the Registration form.
• Validate your form data filled by the user.
• Save that data into the database.

For Adding your HTML to the WooCommerce Registration Form. There are several hooks available in the form-login.php file in WooCommerce Plugin.

Also, check the list of all hooks on the WooCommerce login form page you can use according to your requirement.

• woocommerce_register_form_start
• woocommerce_register_form
• woocommerce_register_form_end
• woocommerce_after_customer_login_form

Here we are using the first hook to let you know this hook will add our HTML code at the top of the Registration form.

add_action(
			'woocommerce_register_form_start',
			function() {
				?>
					<label><?php esc_html_e( 'Phone', 'woo-cus-field' ); ?></label>
					<input type="text" name="phone" value="<?php esc_attr_e( $_POST['phone'] ); ?>" />
				<?php
			}
		);

Here we just Added a phone field in the registration form by which we can get the Phone data as well when the user will register his/her account after this code the screen will look like this, you can add CSS according to you.

Now we are to validate our fields if the field’s values are not proper you can show them an error message. for validating there are few actions and filters available.

Check these hooks and filters in the wc-user-functions.php file. In this file wc_create_new_customer named function triggers when any user registers itself.

Here you can use hooks for validating your input fields.

• woocommerce_register_post (Action Hook)
• woocommerce_registration_errors (Filter Hook)

Here in our code, we are using the filter Hook for validating our phone form field.

add_filter(
			'woocommerce_registration_errors',
			function( $validation_errors, $username, $email ) {
				if ( isset( $_POST['phone'] ) && empty( $_POST['phone'] ) ) {
					$validation_errors->add( 'phone_error', __( '<strong>Error</strong>: Phone is required!', 'woo-cus-field' ) );
				}
				return $validation_errors;
			},
			10,
			3
		);

Like the above code, you can validate your registration fields.

At Last, We just need to save our validated registration form field data for performing this we have an action hook in the same file wc-user-functions.php and function wc_create_new_customer.

you can simply save your custom field data as:

add_action(
			'woocommerce_created_customer',
			function( $customer_id, $new_customer_data, $password_generated ) {
				// Your Code Here.
				update_user_meta( $customer_id, 'user_phone', $new_customer_data['phone'] );
			},
			10,
			3
		);

Here in this code, we get 3 fields registered:

• $customer_id: this is the Registered Customer ID using this you can save your registration field data into the user meta table or something else you want to store.
• $new_customer_data: This variable contains the array of registered customer data.
• $password_generated: This variable contains the password value assigned to the customer.

That is all for this dev blog post, so for any technical assistance, please raise a ticket or reach us by mail at support@webkul.com

Kindly visit the WooCommerce Plugins page to see useful extensions, connectors, and mobile apps for your online store.