- 1 Install the WooCommerce Sync Add-on
- 2 Add WooCommerce Customer Billing & Shipping Fields in Profile Builder forms
- 3 WooCommerce Fields Meta Names
- 4 Adding Default and Extra Fields Types in the WooCommerce Checkout page
- 5 Extend My Account page in WooCommerce
WooCommerce Sync is a Profile Builder add-on, that makes it easy for you to manage the Customer Shipping and Billing fields from WooCommerce with Profile Builder.
It also allows you to use Profile Builder Register and Edit-profile forms on the My Account page from WooCommerce, as well as to add custom fields created with Profile Builder on the WooCommerce checkout page.
Install the WooCommerce Sync Add-on
WooCommerce Sync is an Advanced add-on, available with a Profile Builder Hobbyist or Pro license only.
After purchasing the add-on, the .zip file will be available for download under your account page by clicking the “Add-ons Download” button.
Once downloaded, you can install the add-on as a normal WordPress plugin, by uploading the .zip file in your WordPress Admin -> Plugins -> Add New -> Upload Plugin.
Alternatively, you can install the WooCommerce Sync add-on by extracting the folder found inside the archive and uploading the entire folder via FTP to your /wp-content/plugins folder found inside your WordPress install.
Note – For WooCommerce Sync add-on to work as expected, you’ll also need to have the following plugins installed and activated on your site:
Add WooCommerce Customer Billing & Shipping Fields in Profile Builder forms
WooCommerce Sync addon allows you to add Customer Billing and Shipping address fields in:
You will be able to sort the fields, edit their heading and remove or re-add them to the Manage Fields interface.
From the Manage Fields UI you can rename and reorder each individual Billing and Shipping field. You can also choose which individual fields to display in the front-end as well as which should be marked as 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.
This gives you a lot of flexibility in terms of displaying the individual Billing and Shipping fields inside the Registration form:
Or inside the Edit Profile form:
So from now on, when a new user registers, you can give him access to add or modify the WooCommerce customer fields as well, all in one place.
WooCommerce Fields Meta Names
WooCommerce Customer Billing Address Fields uses the following Meta Names:
WooCommerce Customer Shipping Address Fields uses the following Meta Names:
Adding Default and Extra Fields Types in the WooCommerce Checkout page
The “Create an account” WooCommerce section comes by default with the same fields as the Billing Details.
We can use Profile Builder’s Default and Extra Fields Types to add extra information to the “Create an Account” WooCommerce section by using the following field types:
- Default – First Name
- Default – Last Name
- Default – Nickname
- Default – Biographical Info
Note: Extra Fields Types are available in the Pro and Hobbyist versions only.
To add a Default or an Extra Field Type in the WooCommerce checkout page, you have to go to Manage Fields -> Add New / Edit Field -> Display on WooCommerce Checkout: Yes.
How it looks like in Frontend on the Checkout page:
Extend My Account page in WooCommerce
This is how the default WooCommerce My Account page looks like. In order to display the default WooCommerce Registration form we need to “Enable registration on the My Account page” from WooCommerce -> Settings -> Accounts -> Enable Registration.
In case you want to add more custom fields to the default WooCommerce Registration 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 tab under Profile Builder. From there you can select which Profile Builder Registration form to display on the My Account page.
Add a Profile Builder Registration form on My Account page
The WooCommerce Sync add-on makes it easy to add a custom Registration Form on the My Account page in WooCommerce.
First make sure you have WooCommerce Registration enabled on the My Account page by visiting WordPress Admin -> WooCommerce -> Settings -> Account -> Enable Registration on My Account page.
Next step is to choose which Profile Builder Registration Form to display on the My Account page. We can choose the default Profile Builder Registration Form or a Custom Registration Form created with the Multiple Registration Forms module available in the Pro version.
This is done under WordPress Admin -> Profile Buider -> WooCommerce Sync.
This will allow you to collect extra information about WooCommerce customers on both the Checkout and My Account page.
Add a Profile Builder edit profile form on My Account page
Similar to adding a Registration Form, we can replace the default WooCommerce Edit Profile form with a custom Edit Profile form created with Profile Builder.
We can choose the default Profile Builder Edit Profile Form or a Custom Edit Profile Form created with the Multiple Edit Profile Forms module available in the Pro version.
You can replace the Edit Profile form in WordPress Admin -> Profile Buider -> WooCommerce Sync.
To view the Profile Builder Edit Profile form in Frontend you will need to login and access the My Account page.
Clicking on the “edit your password and account details” or “Account Details” links will take the user to the Edit Profile form created with Profile Builder.
WooCommerce Sync is an Advanced add-on, available only with a Profile Builder Hobbyist or Pro license.