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?
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_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 Profile Builder
Do you have any questions about editing the WooCommerce My Account page? Let us know in the comments box below.