A Cozmoslabs Product

WooCommerce Sync

pb_addon_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, Pro, or Agency license only.

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

After the installation of the Basic, Pro, or Agency version, in order to activate The WooCommerce Sync add-on, go to Dashboard → Profile Builder → Add-ons → WooCommerce Sync Add-on and click activate.

For the 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:

Profile Builder - WooCommerce Sync - Custom Billing Fields

You will be able to sort the fields, edit their heading, and remove or re-add them to the Manage Fields interface.

Profile Builder - WooCommerce Sync - Fields

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 Addresses. When first added, the default names, order, and ‘required’ values are taken from WooCommerce.

Profile Builder - WooCommerce Sync - Edit Billing Fields

This gives you a lot of flexibility in terms of displaying the individual Billing and Shipping fields inside the Registration form:

Profile Builder Pro - WooCommerce Sync - Register Form

Or inside the Edit Profile form:

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

Extra Fields Types are available in the Pro and Basic 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.

Profile Builder - WooCommerce Sync - Display Field on Checkout

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.

Profile Builder Pro - WooCommerce Sync - Enable Registration on the Checkout Page

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.

Profile Builder Pro - WooCommerce Sync - Enable Guest Checkout checked

How it looks like in Frontend on the Checkout page:

Profile Builder Pro - WooCommerce Sync - Checkout Form - Enable guest checkout

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.

Profile Builder Pro - WooCommerce Sync - Enable Registration on the Checkout Page

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.

Profile Builder Pro - WooCommerce Sync - Enable Guest Checkout not checked

How it looks like in Frontend on the Checkout page:

Profile Builder Pro - WooCommerce Sync - Checkout Form - Disable guest checkout

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.

Profile Builder Pro - WooCommerce Sync - My Account Page

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.

Profile Builder Pro - WooCommerce Sync - Enable Registration on the My Account Page

The 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 Builder → WooCommerce Sync.

Profile Builder - WooCommerce Sync - Choose Register Form

This will allow you to collect extra information about WooCommerce customers on both the Checkout and My Account page.

Profile Builder Pro - WooCommerce Sync - Register Form on 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 Builder -> WooCommerce Sync.

Profile Builder - WooCommerce Sync - Choose Register Form

To view the Profile Builder Edit Profile form in Frontend you will need to login and access the My Account page.

Profile Builder Pro - WooCommerce Sync - Logged in My Account

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.

Profile Builder Pro - WooCommerce Sync - My Account page with Edit Profile Form

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:

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

Profile Builder - WooCommerce Sync - Edit Billing 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.

Profile-Builder-User-Listing-WooCommerce-User-Listing

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.

Profile Builder - User Listing - WooCommerce Faceted Menus

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.

To search based on country inside the Search Field you will need to use the country code and not the country name. For example, if we want to search based on “Canada” we will need to use “CA” inside the search field.
Profile Builder - User Listing - WooCommerce Search Settings

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

Profile Builder - User Listing - WooCommerce All User Listing
{{{extra_search_all_fields}}}
{{{faceted_menus}}}

<table class="wppb-table">
	<thead>
		<tr>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_country}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_first_name}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_last_name}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_company}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_address_1}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_address_2}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_city}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_state}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_postcode}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_email}}}</th>
		  <th class="wppb-sorting" scope="col">{{{sort_billing_phone}}}</th>
	      <th scope="col">More</th>
		</tr>
	</thead>
	<tbody>
		{{#users}}
		<tr>
			<td class="wppb-billing-country" data-label="Billing Country">{{meta_billing_country}}</td>
			<td class="wppb-billing-first-name" data-label="Billing First Name">{{meta_billing_first_name}}</td>
			<td class="wppb-billing-last-name" data-label="Billing Last Name">{{meta_billing_last_name}}</td>
			<td class="wppb-billing-company" data-label="Billing Company">{{meta_billing_company}}</td>
			<td class="wppb-billing-address-1" data-label="Billing Address 1">{{meta_billing_address_1}}</td>
			<td class="wppb-billing-address-2" data-label="Billing Address 2">{{meta_billing_address_2}}</td>
			<td class="wppb-billing-city" data-label="Billing City">{{meta_billing_city}}</td>	
			<td class="wppb-billing-state" data-label="Billing State">{{meta_billing_state}}</td>
			<td class="wppb-billing-postcode" data-label="Billing Postcode">{{meta_billing_postcode}}</td>
			<td class="wppb-billing-email" data-label="Billing Email">{{meta_billing_email}}</td>
			<td class="wppb-billing-phone" data-label="Billing Phone">{{meta_billing_phone}}</td>
			<td class="wppb-moreinfo" data-label="More">{{{more_info}}}</td>
		</tr>
		{{/users}}
	</tbody>
</table>
Registered Clients:{{{user_count}}} {{{pagination}}}

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

Profile Builder - User Listing - WooCommerce Single User Listing Template




{{{extra_go_back_link}}}
<ul class="wppb-profile">
 
 
<li><h3>Billing Address:</h3></li>
<li><label>Country</label> {{meta_billing_country}}</li>	
<li><label>First Name:</label> {{meta_billing_first_name}}</li>
<li><label>Last Name:</label> {{meta_billing_last_name}}</li>
<li><label>Company Name:</label> {{meta_billing_company}}</li>
<li><label>Address 1:</label> {{meta_billing_address_1}}</li>
<li><label>Address 2:</label> {{meta_billing_address_2}}</li>
<li><label>Town / City:</label> {{meta_billing_city}}</li>
<li><label>State / County:</label> {{meta_billing_state}}</li>
<li><label>Post Code / Zip:</label> {{meta_billing_postcode}}</li>
<li><label>Email:</label> {{meta_billing_email}}</li>
<li><label>Phone:</label> {{meta_billing_phone}}</li>
 
<li><h3>Shipping Address:</h3></li>
<li><label>Country:</label> {{meta_shipping_country}}</li>
<li><label>First Name:</label> {{meta_shipping_first_name}}</li>
<li><label>Last Name:</label> {{meta_shipping_last_name}}</li>
<li><label>Address 1:</label> {{meta_shipping_address_1}}</li>
<li><label>Address 2:</label> {{meta_shipping_address_2}}</li>
<li><label>Town / City:</label> {{meta_shipping_city}}</li>
<li><label>State / County:</label> {{meta_shipping_state}}</li>
<li><label>Postcode / Zip:</label> {{meta_shipping_postcode}}</li>
</ul>
{{{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.

Profile Builder - User Listing - WooCommerce User Listing in Frontend
The {{{sort_billing_address_2}}} sort tag will not generate a Sort Title in the User Listing

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

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

The Ultimate Membership Bundle

Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.

Get 25% off with the bundle

Help & Support

We’re here to help you every step of the way.

Open a Support Ticket