Table of Contents
Are you looking for a simple way to edit the WooCommerce My Account page? Perhaps you want to add extra user fields or let customers manage their data from the front end.
Fortunately, you can add custom user fields to the WooCommerce checkout page using the Profile Builder plugin and its WooCommerce Sync add-on. This will help enhance your ecommerce site’s usability, giving clients more control over their accounts.
In this post, we’ll show you how to use the plugin to manage customer fields. We’ll also walk you through the process of adding custom fields to the My Account page. Let’s get started!
What You’ll Need Before You Get Started
Before we show you how to add custom fields to the WooCommerce My Account page, there are some tools you’ll need to set up. First off, you’ll need a plugin to add this functionality to your site.
Profile Builder is a complete WordPress user registration and profile plugin that lets you create custom profile fields and registration pages, as well as front-end user profile pages:
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 Profile BuilderWith the WooCommerce Sync add-on, you can utilize 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. It’s especially useful for WooCommerce membership sites and stores.
How to Manage WooCommerce Customer Fields
By default, WooCommerce creates address fields (like Customer Billing and Shipping Address) for the user profile. But what if you want to let users manage all aspects of their accounts in one place?
When a customer registers or updates their profile via the Profile Builder forms, they’ll be able to fill in or edit the user fields created with the plugin. But when you sync the plugin with WooCommerce, they’ll also be able to update the shipping and billing fields from the same place.
So, here’s how to do this.
1. Install the Profile Builder plugin and the WooCommerce Sync Add-on
The first thing you’ll need to do is install and activate the Profile Builder plugin. So, you’ll want to head over to the Cozmoslabs website and purchase the plugin.
Then, you can download the plugin file from your Account page:
Next, upload the plugin to WordPress by going to Plugins → Add New → Upload Plugin:
Once the plugin is installed and activated, navigate to Profile Builder → Add-Ons and find the WooCommerce Sync option on the list. Click on the Activate button to enable it:
Now, you should see a new WooCommerce Sync option beneath Profile Builder in your WordPress sidebar.
2. Add WooCommerce Customer Billing and Shipping Address to User Profile
Once the plugin and add-on have been activated, the WooCommerce Customer Billing Address and WooCommerce Customer Shipping Address fields will be automatically added to the Manage Form Fields list in Profile Builder.
You can access these fields by navigating to Profile Builder → Form Fields:
Here, you can (re)arrange the fields, or edit their headings (titles). In case you remove them, you can always re-add them from the Field drop-down.
On top of this, you’ll be able to select which individual billing and shipping fields to display on the front end, and choose which ones will be required. Also, you can simply drag and drop to reorder the individual fields for both billing and shipping addresses.
When first added, the default names, order, and ‘required’ values of these fields are taken from WooCommerce:
The new WooCommerce fields will appear on the Edit Profile and Register pages managed with Profile Builder:
This means that new users who are registering through Profile Builder will also be able to fill in the required WooCommerce customer fields.
Additionally, the Edit Profile page will now allow users to update the WooCommerce shipping and billing information:
So, when a new user registers, you can let them add or modify the WooCommerce customer fields as well. 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 registration form. This enables you to keep track of users by their user roles.
Plus, you can add other profile fields (like a user avatar upload field instead of Gravatar) to fully customize the WooCommerce My Account page.
How to Add Custom Fields to WooCommerce Checkout Page
The Profile Builder WooCommerce Sync add-on also lets you add custom user fields to the WooCommerce checkout page. This way, you can collect more user information as well as register new users directly at checkout.
All the custom field types can 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, visit the Form Fields page. Then, click on an existing field or add a new item:
Make sure to select Yes for the Display on WooCommerce Checkout option and click on Save Changes.
Conditional Fields on WooCommerce Checkout
Since you can add all custom fields normally available in Profile Builder, you can also define conditional field rules that will work on the WooCommerce checkout page. All you have to do is display the fields with conditional rules on the checkout page.
Check out this detailed tutorial on how to add conditional logic fields to the WooCommerce checkout page.
Repeater Fields on WooCommerce Checkout
Since all the custom fields are available on the WooCommerce checkout page, you can add Repeater Fields to the form like any other user field.
This gives you more flexibility when collecting 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 gather additional data from new customers and existing ones directly on the checkout page.
How to Add Profile Builder Register Form to the WooCommerce My Account Page
If you have WooCommerce registration enabled on the My Account page, you’ll likely get a basic form:
If you want to add custom fields to the registration form, you can easily integrate any Profile Builder registration form with the My Account page in WooCommerce.
To do this, navigate to WooCommerce Sync under Profile Builder in the WordPress sidebar. Then, select which Profile Builder registration form you want to display on the My Account page:
You can add your selected form to any page on your site. All you have to do is add a Register block in the Block Editor:
Alternatively, you can use the following shortcode: [wppb-register]
Now, you can easily collect extra user information from customers by having a detailed Profile Builder register form available on the My Account page:
It’s a good idea to view the page on the front end to make sure it displays correctly.
How to Add Profile Builder Edit Profile Form to My Account Page
You can also enable users to access the Edit Profile form created with Profile Builder directly from the WooCommerce My Account page. This way, they can keep the same edit account functionality they had with the native WooCommerce account section.
To get started, navigate to the WooCommerce Sync tab and use the Edit Profile Form dropdown to select an option:
If you’re using the Multiple Edit-Profile forms add-on from Profile Builder PRO, you can choose which form you want to display under WooCommerce Sync settings. After selecting an edit profile form, navigate to My Account and click on the edit your account details link to be taken to the Edit Profile form created with Profile Builder.
You can apply a new theme to your forms if you don’t want to use the default style. To do this, go to Profile Builder and click on Settings.
Here, navigate to the Design & User Experience section and select a style that suits your preferences:
Just remember to save your changes when you’re ready.
Conclusion
The WooCommerce Sync add-on offered by Profile Builder enables users to manage all of their details from their account page. Plus, as the website owner, you can use this integration to create custom fields in the registration form and therefore collect more information about users.
It’s super easy to integrate Profile Builder with WooCommerce. Once you’ve enabled the WooCommerce Sync add-on, you can edit the My Account page in WooCommerce, adding as many new fields as needed without messing around with PHP, HTML, or CSS code snippets.
Do you have any questions about editing the WooCommerce My Account page? Let us know in the comments box below.
Related Articles
Profile Builder Update: No More Profile Builder Hobbyist?
If you’re already a Profile Builder user, you might have noticed some changes around here in the past few weeks. And that’s especially if you’ve purchased the Hobbyist version of Profile Builder. And you’d be right! Some changes did take place within the plugin, and thus, that’s what we’ll talk about in this blog post, […]
Continue Reading
How to Build Online Communities Using Profile Builder & BuddyPress
Building a WordPress community website can be a great idea not only because you can control the experience of the user, manage SEO and inbound traffic, but also because I think a community is more about nurturing a constant, active presence and happy experience. If we speak about the integration between our Profile Builder & […]
Continue Reading
How To Extend bbPress User Profiles with Profile Builder
Letting users customize their profiles is a great way to encourage them to spend more time on your forum website and interact with each other. However, this is not a feature either WordPress or bbPress offers by default. WordPress supports user registration, but provides very little functionality in terms of profile customization. Fortunately, there are […]
Continue Reading41 thoughts on “How to Edit WooCommerce My Account Page (Add Fields + More)”
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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?