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

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

Adrian Spiac
Last Updated: 04/03/24

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 Builder

With 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:

Download Profile Builder from Cozmoslabs account page

Next, upload the plugin to WordPress by going to 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 option on the list. Click on the Activate button to enable it:

Activate the WooCommerce Sync add-on

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:

Manage WooCommerce Customer Fields on account page

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:

Add custom fields to WooCommerce my account page

The new WooCommerce fields will appear on the Edit Profile and Register pages managed with Profile Builder:

Front-end Register WooCommerce Customer Fields

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:

Customize WooCommerce My account page

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:

Display on WooCommerce checkout checkbox

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:

Choose which fields to display on the Checkout page

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:

WooCommerce default login and register forms

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:

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

How to add registration block to WordPress page

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:

How to customize the WooCommerce My Account page for registration

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:

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, 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:

How to switch form styles

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.

From the blog

Related Articles

Profile Builder Update: No More Profile Builder Hobbyist?

Author: Flavia Mezzetti
Last Updated: April 26th, 2023

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
buddypress_pb_banner_01

How to Build Online Communities Using Profile Builder & BuddyPress

Author: Patricia Borlovan
Last Updated: August 15th, 2023

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
The bbPress and Profile Builder integration add-on.

How To Extend bbPress User Profiles with Profile Builder

Author: Patricia Borlovan
Last Updated: July 9th, 2024

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 Reading

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.