WooCommerce Sync

WooCommerce Sync Add-on 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 Basic or Pro license only.

After purchasing a premium version of Profile Builder, you can check the following guide on how to install Profile Builder.

Add WooCommerce Customer Billing & Shipping Fields in Profile Builder forms

WooCommerce Sync addon allows you to add Customer Billing and Shipping address fields in:

• Profile Builder – Registration Forms
• Profile Builder – Edit Profile Forms

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:

• billing_country
• billing_first_name
• billing_last_name
• billing_company
• billing_address_1
• billing_address_2
• billing_city
• billing_state
• billing_postcode
• billing_email
• billing_phone

WooCommerce Customer Shipping Address Fields uses the following Meta Names:

• shipping_country
• shipping_first_name
• shipping_last_name
• shipping_company
• shipping_address_1
• shipping_address_2
• shipping_city
• shipping_state
• shipping_postcode

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. All fields are supported except certain default fields that are already taken into account by WooCommerce (email and username in particular).

Changes to the WooCommerce Billing and Shipping fields from Profile Builder’s Manage Fields interface do not get applied on the Checkout page.

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.

Conditional User Fields on Checkout

WooSync allows you to use the conditional setup for user fields in Profile Builder to create advanced user profiles on the checkout page.

Repeater Fields on Checkout

WooSync allows you to add repeater fields available in Profile Builder Pro, directly on the checkout page.

Enable guest checkout option is checked

In order to let users register on the WooCommerce Checkout page you will need to check the Enable registration on the “Checkout” page option found in WooCommerce -> Settings -> Accounts -> Accounts Pages -> Enable Registration.

Inside WooCommerce -> Settings -> Checkout -> Checkout Options -> Checkout Process we have an option called “Enable guest checkout”. If it is checked it will allow customers to checkout without creating an account.

How it looks like in Frontend on the Checkout page:

Enable guest checkout option is not checked

In order to let users register on the WooCommerce Checkout page you will need to check the ‘Enable registration on the “Checkout” page’ option found in WooCommerce -> Settings -> Accounts -> Accounts Pages -> Enable Registration.

Inside WooCommerce -> Settings -> Checkout -> Checkout Options -> Checkout Process we have an option called “Enable guest checkout”. If it is not checked it will not allow customers to checkout without creating an account.

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.

Display WooCommerce Fields inside the User Listing

In order to integrate Profile Builder Pro with WooCommerce you will need to have the following plugins installed and activated on your site:

• Profile Builder Pro – version 2.5.5 or higher
• WooCommerce Sync – version 1.4.5 or higher
• WooCommerce

First you will need to go to Profile Builder -> Manage Fields to create the WooCommerce Customer Billing Address and WooCommerce Customer Shipping Address fields.

The next step is to setup the User Listing so go to Profile Builder -> User Listing -> Add New. In our case we named our User Listing – “Customers”. We also checked, in the “Roles to Display” option, the Customer role.

By doing so only users with the “Customer” role will be displayed in the User Listing. This role is created by the WooCommerce plugin.

We also set the Default Sorting Criteria to “Billing Country” – Order Ascending. This option will list and sort the users ascending based on Country.

In the Faceted Menus section we can add filters to further sort our User Listing based on WooCommerce fields. We added a filter based on Billing Town / City and another one based on Billing State / County.

In the Search Settings tab we can set in which fields should the Search Field look into. For example we can allow to search based on Billing Postcode / Zip and Billing Phone.

In order to generate the Search field in Front End, in the User Listing, you will need to use the {{{extra_search_all_fields}}} tag, found in the Extra Functions tab, inside the All-Userlisting Template.

In the All-Userlisting Template we can add all the WooCommerce fields by using the appropriate User Fields Tags.

1
2
3

{{{extra_search_all_fields}}}
{{{faceted_menus}}}
{{#users}}

Registered Clients:{{{user_count}}} {{{pagination}}} {{/users}}

In the Single-Userlisting Template we can add all the WooCommerce fields by using the appropriate User Fields Tags.

1

{{{extra_go_back_link}}}

• • • • Billing Address:

         

     

     

• • • • Country {{meta_billing_country}}

     

     

• • • • First Name: {{meta_billing_first_name}}

     

     

• • • • Last Name: {{meta_billing_last_name}}

     

     

• • • • Company Name: {{meta_billing_company}}

     

     

• • • • Address 1: {{meta_billing_address_1}}

     

     

• • • • Address 2: {{meta_billing_address_2}}

     

     

• • • • Town / City: {{meta_billing_city}}

     

     

• • • • State / County: {{meta_billing_state}}

     

     

• • • • Post Code / Zip: {{meta_billing_postcode}}

     

     

• • • • Email: {{meta_billing_email}}

     

     

• • • • Phone: {{meta_billing_phone}}

     

     

• • • • Shipping Address:

         

     

     

• • • • Country: {{meta_shipping_country}}

     

     

• • • • First Name: {{meta_shipping_first_name}}

     

     

• • • • Last Name: {{meta_shipping_last_name}}

     

     

• • • • Address 1: {{meta_shipping_address_1}}

     

     

• • • • Address 2: {{meta_shipping_address_2}}

     

     

• • • • Town / City: {{meta_shipping_city}}

     

     

• • • • State / County: {{meta_shipping_state}}

     

     

• • • • Postcode / Zip: {{meta_shipping_postcode}}

     

     

{{{extra_go_back_link}}}

To view the User Listing in Frontend we will need to use the generated shortcode inside a page. In our case the shortcode will look like this: [wppb-list-users name="customers"]

This is how the User Listing will look in Front End.

WooCommerce Sync is an Advanced add-on, available with a Profile Builder Basic or Pro license.

• Share:
• Facebook
• Twitter
• Google

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.

Unlock PRO Features

Or download FREE version