How to Edit WooCommerce My Account Page (Add Fields + More)

Adrian Spiac
Last Updated: 12/03/23

Profile Builder WooCommerce Sync Add-onLooking 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.

Download Profile Builder from Cozmoslabs account page

Then, install both plugins to your WordPress site from Plugins → Add New → Upload Plugin.

Upload new 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.

Activate the WooCommerce Sync add-on

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.

Manage WooCommerce Customer Fields on account page

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).

Add custom fields to WooCommerce my account page

The WooCommerce fields will now appear on both Registration, as well as Edit profile pages managed with Profile Builder.

Front-end Register WooCommerce Customer Fields

Users registering through Profile Builder will be able to fill in the required WooCommerce Customer fields

Customize WooCommerce My account page

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.

Custom Fields added with Profile Builder to the WooCommerce Checkout page

Custom Fields added with Profile Builder to the WooCommerce Checkout page

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:

Display on WooCommerce checkout checkbox

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.

Choose which fields to display on the Checkout page

Choose which fields to display on the WooCommerce Checkout page

Add Profile Builder Register Form to the WooCommerce My Account Page

WooCommerce default login and register forms

The default WooCommerce login and basic register forms.

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.

Choose register form to display on My account 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:

How to customize the WooCommerce My Account page for registration

Adding a detailed Profile Builder Register form under My Account page. This way users can fill in more information at registration.

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.

Choose Edit Profile form to display on My account page

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.

My account page redirects to Edit profile

Clicking the link to edit your account details will take you to the Edit Profile form created with Profile Builder. Users can also log out if needed.

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.

41 thoughts on “How to Edit WooCommerce My Account Page (Add Fields + More)

    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

    Reply

    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.

    Reply

    I have used support form,thanks for your support

    Reply

    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?

    Reply

    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.

    Reply

    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.

    Reply

    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.

    Reply

    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.

    Reply

    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?

    Reply

    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?

    Reply

    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?

    Reply

    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.

    Reply

    I would like to test the sync WooCommerce before buying to see if it will really meet my needs , it would be possible?

    Reply

    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.

    Reply

    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!

    Reply

    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.

    Reply

    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.

    Reply

    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.

    Reply

    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.

    Reply

    hi .. can you tell me how can i add custom menu in my account like edit my profile edit my account detail??

    Reply

    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?

    Reply

    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.

    Reply

    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?

    Reply

    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.

    Reply

    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.

    Reply

    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.

    Reply

    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

    Reply

    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!

    Reply

    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.

    Reply

    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

    Reply

    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?

    Reply

    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.

    Reply

    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?

    Reply

    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?

    Reply

    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.

    Reply

    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' );

    Reply

    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?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.