Looking for a simple way to edit the WooCommerce My account page, to add extra user fields, and let customers manage their data from the front-end?
How about adding custom user fields to the WooCommerce checkout page?
In this post, you’ll learn how to easily edit the WooCommerce account page using the Profile Builder plugin and its WooCommerce Sync add-on to enhance your eCommerce site’s usability.
Profile Builder is a complete WordPress user registration and profile plugin. It lets you create custom profile fields and registration pages, as well as front-end user profile pages. With the WooCommerce Sync add-on, you can bring that same flexibility to customize the WooCommerce My Account page. You can do all of this without using add_action or add_filter custom code snippets.
Below, we’ll show you exactly how to edit the WooCommerce My Account page! This method will work with all WooCommerce templates and themes, including the default Storefront theme. This is especially useful for WooCommerce membership sites and stores.
Manage WooCommerce Customer Fields
By default, WooCommerce adds address fields, like Customer Billing and Shipping Address to the user profile. But what if you want to capture more user information, as well as let users manage all their profile fields in one place?
When a user/customer registers or updates his profile via Profile Builder front-end forms, using this add-on he will now not only be able to fill in or edit the user fields created with Profile Builder but also display and update the shipping and billing fields (i.e. edit address fields) from WooCommerce.
Installing the Profile Builder plugin and theWooCommerce Sync Add-on
After purchase, you can download the Profile Builder plugin from your Account page on cozmoslabs.com.
Then, install both plugins to your WordPress site from Plugins → Add New → Upload Plugin.
Once the plugin is installed and activated navigate to Profile Builder → Add-ons and find the WooCommerce Sync add-on on the list. Click the Activate button next to it to enable it.
Adding WooCommerce Customer Billing and Shipping Address to User Profile
Once activated, the WooCommerce Sync Add-on will automatically add WooCommerce Customer Billing Address and WooCommerce Customer Shipping Address fields to the Manage Form Fields list from Profile Builder. They will output all the individual fields required for WooCommerce Shipping and Billing Address in the front-end.
You will be able to (re)arrange them, edit their heading (title) and in case you remove them, you can always add them later from the Fields drop-down.
On top of this, you’ll be able to select which individual Billing and Shipping fields to display in the front-end, as well as choose which will be required.
Also, you can simply drag & drop to reorder the individual fields for both Billing and Shipping Address. (When first added, the default names, order, and ‘required’ values are taken from WooCommerce).
The WooCommerce fields will now appear on both Registration, as well as Edit profile pages managed with Profile Builder.
The Edit Profile page will now allow your users to update WooCommerce Shipping and Billing informationSo from now on, when a new user registers using the registration form, you can give them access to add or modify the WooCommerce customer fields as well, all in one place. This way, you don’t have to add new users manually.
If needed, you can also assign custom user roles to users who register through a specific user registration form. This way, you can keep track of users by their user roles. And you can also add other profile fields, like a user avatar upload field instead of Gravatar, to fully customize the WooCommerce My Account page.
Adding Custom Fields to WooCommerce Checkout Page
The Profile Builder – WooCommerce Sync add-on also allows you to add custom user fields to the WooCommerce Checkout page. The custom fields added on the WooCommerce Checkout page are saved as user meta.
This way you can collect more custom user information as well as register new users directly on checkout.
All the custom field types are supported to be added to the WooCommerce Checkout page using Profile Builder (Basic or PRO). Some default fields, like the email and username, cannot be added because they are managed by WooCommerce.
To add a custom field to the WooCommerce checkout page, in the Form Fields menu item, when adding a new field or editing an existing one, you’ll simply need to select Yes for the Display on WooCommerce Checkout option:
Conditional Fields on WooCommerce Checkout
Since you can add all the custom fields normally available in Profile Builder, you can also define conditional field rules and they will work on the WooCommerce checkout page as well. All you have to do is make sure to display the fields with conditional rules on the checkout page, otherwise they won’t apply.
You can check out this detailed tutorial on how to add conditional logic fields to WooCommerce checkout page.
Repeater Fields on WooCommerce Checkout
Since all the custom fields are available on the WooCommerce checkout, this means you can also define and add Repeater Fields on WooCommerce Checkout like any other user field. This gives you more flexibility when gathering extra information about your users.
Note: These fields are visible for unregistered/logged-out users as well as for logged-in users on the WooCommerce checkout page. This way you can collect extra information from both new customers and existing ones directly on the Checkout page.
Add Profile Builder Register Form to the WooCommerce My Account Page
If you have WooCommerce registration enabled on the My Account page, WooCommerce will normally display a login and basic registration form under My Account dashboard page.
If you want to add more custom fields to the basic WooCommerce register form you can easily integrate any Profile Builder Register form under My Account page in WooCommerce.
All you need to do is navigate to the WooCommerce Sync menu item under Profile Builder. From there you can select which Profile Builder Register form to display on the My Account page. Then, simply use the [wppb-register] shortcode (or use the Register block in the Gutenberg editor) to add it to your website on a new page or existing page.
This way you can easily collect extra user information from your customers and have the detailed Profile Builder Register form available under My Account page. Here’s a screenshot of what it will look like on the front-end:
Add Profile Builder Edit Profile Form to My Account Page
Another aspect we looked into for a complete integration was to allow people to access the Edit Profile form created with Profile Builder, directly from the WooCommerce My Account page. This lets users keep the same edit account functionality they had with the native WooCommerce account section.
After activating the WooCommerce Sync add-on, under the WooCommerce Sync menu item from Profile Builder you’ll be able to set which Edit Profile form to display under the My Account page created by WooCommerce.
If you’re using the Multiple Edit-Profile forms add-on from Profile Builder PRO, and have set up more than one Edit Profile form, you can choose which one to display under WooSync settings.
After selecting an edit-profile form, once you navigate to My Account and click on edit your account details link you will be taken to the Edit Profile form created with Profile Builder.
This sums up all the WooCommerce Sync add-on features which will help you manage WooCommerce customer fields, by fully integrating Profile Builder with WooCommerce.
With this add-on, you can edit the ‘My Account’ page in WooCommerce adding as many new fields as needed and letting your shoppers manage all of those fields from their front-end account page. You can do all of this without messing around with PHP, HTML, or CSS code snippets.
To customize the WooCommerce My Account page today, click below to get Profile Builder Pro which includes the WooCommerce Sync add-on.
Profile Builder Pro
Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.
Get the pluginDo you have any questions about editing the WooCommerce My Account page? Let us know in the comments box below.
Subscribe to get early access
to new plugins, discounts and brief updates about what's new with Cozmoslabs!
hi,
1. i’ve installed this plugin but the systems says :
“WooCommerce needs to be installed and activated for Profile Builder – WooCommerce Sync Add-on to work! ”
what is it mean ? because i’ve activated woocommerce and PB
2. How i edit checkout page with form that i’ve edited ?
thanks
Hi Nurman,
Thank you for getting in touch.
1. The add-on checks to see if you have both WooCommerce and Profile Builder plugins installed and activated and throws a notice otherwise. Are you sure both WooCommerce and Profile Builder Pro are installed and activated?
2. Not sure I follow, can you maybe explain in more detail what you’re trying to achieve?
Please get in touch via this support form and we can continue the discussion there.
I have used support form,thanks for your support
What about redirects to the woocommerce login page? Woocommerce does not have any kind of captcha built in. Can that be prevented with this plugin so that calls to the woocommerce login or account page be redirected to Profile Builder?
WooCommerce has some built in filters which allow you to modify these links. This way you can direct users to the Login page created with Profile Builder.
We can help you with these small tweaks via support.
I am planning to buy the beautiful plugins add-on Woocomerce Sync. Just wondering is that able to add some more fields in addition to Default Billing and Shipping Address?
Cheers.
Thank you for your interest in this add-on. Yes, using Profile Builder and WooSync add-on, you can add more custom fields to the user profile (e.g Edit Profile form) as well as to the “Create an account” section from the WooCommerce Checkout page.
* I’ve updated the tutorial with screenshot and step by step instructions on how to add custom fields to WooComerce checkout page.
Hello,
Are you able to remove the Default Billing and shipping sections? We’d like to use Woocommerce and profile builder to create a platform for interns to create profiles and employees to access those profiles. So we don’t want to sell anything.
Hello,
From our forms, yes, you can choose if they appear or not. But we can’t remove them from the WooCommerce Checkout page.
Not sure why you would need WooCommerce in the scenario you describe, you can re-create the Billing Fields using custom fields from Profile Builder.
If you have further questions, please open a ticket on our website: https://www.cozmoslabs.com/support/open-ticket/
Regards.
I would list the products purchased by the customer. It’s possible?
Hi César,
My Account page already displays the orders of each customer / products purchased.
Using the add-on you can integrate the Profile Builder Register and Edit-profile forms under My Account page, to have everything in one place.
Is there any other place where you would like to list the purchased products?
Will this add the information to the WordPress User Profile? I am trying to find a plugin where I can add extra fields in the woocommerce registration form such as “Are you registering as a wholesale customer? Yes Or No?”. And a field for their Tax ID. I have to manually set my customers to the user role wholesale customer in my admin. I have a plugin in that lets me add extra fields to my registration form but it does not save the data into the customers wp user profile. I cannot access the data they submit. Will your plugin give me access to their data?
Hi Lisa,
Yes, all the custom fields added to the WooCommerce Checkout registration form via Profile Builder – WooSync add-on will be added to the WordPress user profile (as user meta).
The custom user fields are saved in the wp_usermeta table.
I would like to test the sync WooCommerce before buying to see if it will really meet my needs , it would be possible?
Hello Juliana,
Thank you for your interest in our plugin!
You can test a demo install of Profile Builder here http://demo.cozmoslabs.com/profilebuilder/
Then visit Plugins interface and activate both WooCommerce and the WooCommerce Sync Addon for Profile Builder.
Hello! I would love to use this for my site, so that my customers are able to create their own personalised accounts – one of the things that I need to do though is to add checkboxes with multiple options for them to select to create a very personalised account (which will assist me).
Can this product help with this? Also, will I be able to see what they have selected?
Thanks!
Hi Carly,
Yes, checkboxes are among the supported field types which can be added to the WooCommerce Checkout page using Profile Builder.
You can also add checkboxes to the Edit Profile form created with Profile Builder, allowing your customers to create personalized accounts.
How do I hide/remove some of the fields added in the Woocommerce Billing and Shipping options from the registrations?
For example the file “Email address” is required 2 times on the registration form. Once for the original registration, and a second time in the billing section.
Hi Stan,
That can be modified using hooks and filters and a little bit of code. Please contact us via support for help with that: http://www.cozmoslabs.com/support/
As for the email address being twice, those are actually two different fields. WooCommerce actually can have an email address for the user account, one for the billing address and one for the shipping address, each stored in a different field in the database.
Hi Stan,
Now you can select which individual fields you want to display from each Billing and Shipping Address field group, directly from the Profile Builder UI.
Simply go to Manage Fields and when adding the Billing or Shipping Field groups you will be able to select which individual fields to display in the front-end, as well as choose which will be required.
I’ve updated the article with a screenshot highlighting this functionality.
hi .. can you tell me how can i add custom menu in my account like edit my profile edit my account detail??
Hi, if I add extra fields to the billing or shipping adress in woocommerce. Will that information then be collected in the user section in the wordpress dashboard?
Or where will I be able to see the information from the extra fields?
Hi Tommy,
Yes, if you add the WooCommerce Customer Billing and Shipping Address in PB Manage Fields, you can view them in the Users section in the wp dashboard (under Edit User).
You can do this also from the front-end, using the PB Edit Profile page, as an admin, you can view and edit any user profile.
Hi there,
I believe your screenshots answered my question, but just to be clear. I need the sign up page to allow my new users to choose which type of account they are. Retail, Chapter and Wholesale, it appears I can do that, can you confirm?
What version of PB would be needed?
Hi Jay,
I think you simply need a select field on the Register form, to allow users to select the account type.
The Select extra field is available in the Hobbyist version.
Hi, someone has asked this previously but it’s the only comment you’ve not answered so I’m asking again.
With the Woocommerce sync add on, is the custom field data saved as user meta? I.e. if I add date of birth to the woocommerce checkout registration form, will it save it with the user information or the order meta? I need it to save with the user as the current method I have it saves it to the order meta.
Please can you confirm asap so we can buy this plugin if it does what we need it to do.
Hi,
Yes, using the WooSync add-on, the extra fields added on the WooCommerce Checkout page are saved as user meta, NOT order meta.
I’ll make sure to reply to the other comment as well, thanks for pointing this out.
I’m looking at the demo and don’t see the default wpuser social fields – is there a way to integrate these rather than duplicating them?
Google+
Twitter username (without @)
Facebook profile URL
Hi Fry,
Those are not WordPress default fields. They are from another plugin most likely an SEO plugin?
https://codex.wordpress.org/Users_Your_Profile_Screen
That’s why we’re not setting them up by default.
Hi!
If the checkout for guests is enabled in woocommerce, the form in which you insert the additional fields, which I activate with your option ‘display on woocommerce checkout’, is set to hidden by woocommerce itself. So these fields are only visible for logged in user. Just verified this on your demo: http://demo.cozmoslabs.com/profilebuilder/demo33b4bd2d/product/test/ (add to cart and go to checkout, there should be an additional birthday field).
Any Idea?
Thanx!
Hello,
The fields we add are account fields so it makes sense for them to be placed inside the user account area of the checkout.
If you enable checkout for guests you can’t capture any data with our plugin because we tie the data from the custom fields with the user account that is created / already exists and not with the order that is placed.
Regards.
Hi Georgian!
Thanx. I understand – in a sad way this makes sense ;o)
I thought I could add i.e. a required checkbox to the checkout (an additional ‘confirm that you’ve read this…’)
Would be cool, If I could use for that your tool (broken english because of the rhyme ;o)
Best,
Jaa
Hello,
If you disable guest checkout you can do this :).
Regards.
Great write up. I am using Woocommerce Print Invoices and Packing Slips… will this plugin send the Custom Shipping Info to the Packing Slip? For example, I include Country Club Name and Gate Code in my customer’s shipping address. Will these new fields now automatically show up on the Packing List?
Probably not. You will have to add them to the Packing List via code if the Packing Slips addon doesn’t allow support for extra fields.
If you want you can contact us via our support and we’ll have a look next week to see how this might work work with the plugins you mentioned.
I have concern here. I have 2 role
Customer and retailer
My tax number is visible to retailer only. But, when i do Display on WooCommerce Checkout. Then it become visible to everyone on checkout page.
Can we make it rolebase like you did on edit or new account pag?
Hello Karan,
Please open a ticket on our website describing this issue: https://www.cozmoslabs.com/support/open-ticket/
Regards.
Hello, I have a small problem. I installed woocommerce adddon and now on the registration page there were many fields BILLING ADDRESS and SHIPPING ADDRESS, then I deleted the addon but the fields were left. How can I remove them?
Hello Alex,
Can you go to PB -> Manage Fields and check to see if the WooCommerce Billing and Shipping fields are included with your form ?
If that doesn’t help please open a ticket on our website describing this issue: https://www.cozmoslabs.com/support/open-ticket/
Regards.
I am trying to add it manually using a code that is in this complete guide https://wpitech.com/add-woocommerce-registration-form-fields/. Is there any alternative to do this? It would be really helpful if you could help me to add fields in the registration form.
function Woo_register_fields() {?>
*
<input type="text" class="input-text" name="registration_name" value="” />
<?php
}
add_action( 'woocommerce_register_form_start', 'Wooregister_fields' );
Hello! My theme works with a personalized “MY Profile” page and I would like to edit it, is it possible to do this through the plugin?