If you want to create an eCommerce website from WordPress, it is obvious that WooCommerce is a go-to plugin. Customers can visit the website and purchase conveniently. Also, it would be more convenient if you add a WooCommerce registration form to your website.
It is a good idea to make customers register on your site before they purchase. Obviously making user register on your site before the purchase has its own advantages.
Default WooCommerce Registration Form
The WooCommerce plugin allows you to add a registration form on the Website. But, this form only asks you to enter your email address for the registration. All the billing and shipping details of the customers are entered only after they want to purchase the products.
To add this form, you need to install the WooCommerce plugin and go to WooCommerce->Settings of your dashboard. Click on the Privacy and Accounts section and check the option to the Allow customers to create an account on the “My Account” page option.
How to Create an Extended Registration Form?
With the User Registration plugin, you can easily create an extended WooCommerce registration form. User Registration plugin allows you to create all types of registration forms effortlessly.
And, the premium WooCommerce Integration Add-on allows you to integrate custom WooCommerce Fields such as billing and shipping addresses. These custom Fields allows you to collect the important WooCommerce information first hand.
Moreover, you can also add the WooCommerce components like downloads, orders, billing address, shipping address, etc. to the User Registration “My Account” page. It gives your customers to view and manage their purchases and orders on your site.
If you’re a WooCommerce user, having a WooCommerce integrated registration plugin is a must. And, the User Registration plugin is one of the best user registration plugins available in the market. Other than custom WooCommerce Fields, there are various other features that the User Registration plugin has to offer.
Let’s get right into how to create an Extended WooCommerce Form with User Registration Plugin. Follow the step by step instructions.
1: Install the User Registration Plugin
First of all, you need to install the User Registration Plugin. For this, go to your WordPress dashboard and click on Plugins -> Add New. Then, search for User Registration plugin and click on the Install Now button. After it installs, don’t forget to activate the plugin.
2: Install the WooCommerce Integration Add-on
Now, you need to get the premium User Registration WooCommerce Add-on. Go to User Registration->Extensions. Here, you can see all the Add-ons offered by the User Registration plugin.
Click on the WooCommerce Integration extension, and you’ll be taken to the Add-on overview page on the WPEverest official site. Then, click on the View Pricing button there to visit the Plans and Pricing page for more details.
3: Creating WooCommerce Registration Form
Once the add-on is downloaded and installed on the site, we can move on to creating the custom WooCommerce registration form. But, make sure all the three plugins: WooCommerce, User Registration, and WooCommerce Integration are activated first.
Then, go to User Registration->Add New and you’ll be taken to the easy drag-and-drop form builder. Creating a registration form is super easy with this user-friendly interface. If you scroll down then, you can find the WooCommerce Form Fields for Billing and Shipping information are added to the form builder.
Just drag and drop the form fields that you require to the WooCommerce Registration Form. You can also add up to 3 form fields in a row if you want. After you finish creating the form, don’t forget to save it.
4: Displaying the WooCommerce Registration Form
Now, you can move on to displaying the registration form on your site. You can add the WooCommerce Registration form on any WordPress page or post.
You can either use the shortcode provided for each form or, use the User Registration Gutenberg block to easily add the form.
The first way to display the WooCommerce Registration Form is by using the form Shortcode. On the top-right of your form builder, you can find the shortcode for the form.
Just copy the shortcode and paste it to the page or the post you want to display the form.
Using the User Registration block
The second and the most convenient way to display the registration form is by using the User Registration block in Gutenberg editor. In the editor, search for the User Registration block, and click on it.
Then, select the WooCommerce Registration form that you created and it will be added to your page. All you need to do now is Publish the page.
My Account page Settings
After you’ve published the WooCommerce registration form, your customers can register a new account on your eCommerce website. And, these details can be viewed in the My Account page of your website.
WooCommerce has its own “My Account” page which shows all the default account details like shipping and billing information. But, there are no options for adding fields for custom user fields.
No worries! You can easily add the custom fields you require with the User Registration WooCommerce Add-on.
Go to User Registration->Settings and click on the WooCommerce tab. Then, select the WooCommerce registration form you created and Save Changes. Doing this will add User Registration form fields that are not available in the WooCommerce registration form to the Account details tab.
Now, all the User Registration form fields including the form fields that are not included in the WooCommerce Account Details are shown in the WooCommerce Account Page.
How to display User Registration “My Account” page?
To display the User Registration “My Account” page, you must copy this shortcode provided by the plugin to a WordPress page.[user_registration_my_account]
For detailed instructions, you can check the docs for How to show account profile. After you paste the shortcode to a page, you can publish it on your site.
After you insert the shortcode, you can publish the page. It will look something like this in the frontend.
User Registration WooCommerce Integration Settings
Let’s explore other amazing features that the WooCommerce Integration add-on offers.
Firstly, you can replace your WooCommerce Registration Form with the User Registration Form. For this, go to User Registration → Settings and click on the WooCommerce tab.
Now, select the registration form that you want to integrate. And, Check the option to replace default WooCommerce’s login and registration page option. Don’t forget to Save Changes.
Secondly, you can sync the user registration form fields on the checkout page. But, you must change settings on the WooCommerce settings too.
For this, go the WooCommerce->Settings and click on the Accounts & Privacy tab. Then, check on the Allow customers to create an account during checkout option and Save Changes.
Next, go to User Registration → Settings and click on the WooCommerce tab. Then, check the option to sync user registration form with Woocommerce checkout registration option.
Therefore, creating a WooCommerce Registration Form is essential for any e-commerce site. And, with the User Registration WooCommerce Add-on you can integrate WooCommerce fields to create an extended registration form.
Moreover, you can add extra information fields to the accounts page. Also, the plugin also supports two of the most popular extensions for WooCommerce i.e WooCommerce Subscription and WooCommerce Memberships.
Hopefully, this tutorial was helpful. Don’t forget to share and stay tuned for more articles like this.