WooCommerce Sync

pb_addon_woocommerce_sync

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.

Profile Builder Pro - Account Page - Download Add-on

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:

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

Profile Builder Pro - 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:

  • 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 by using the following field types:

  • Input
  • Textarea
  • Checkbox
  • Select
  • Radio
  • Heading
  • Datepicker
  • Phone
  • Number
  • Upload
  • Avatar
  • Mailchimp Subscribe
  • 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.

Profile Builder Pro - WooCommerce Sync - Display Field on Checkout

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

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.

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

Profile Builder Pro - 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 - User Listing - Create WooCommerce 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.

Note – 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{{{extra_search_all_fields}}}
{{{faceted_menus}}}
<table class="wppb-table">
	<thead>
		<tr>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_country}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_first_name}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_last_name}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_company}}}</th>
	  <th scope="col" class="wppb-sorting">{{{sort_billing_address_1}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_address_2}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_city}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_state}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_postcode}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_email}}}</th>
          <th scope="col" class="wppb-sorting">{{{sort_billing_phone}}}</th>
		<th scope="col">More</th>
		</tr>
	</thead>	
	<tbody>
		{{#users}}
		<tr>
		  <td data-label="Billing Country" class="wppb-billing-country">{{meta_billing_country}}</td>
          <td data-label="Billing First Name" class="wppb-billing-first-name">{{meta_billing_first_name}}</td>
          <td data-label="Billing Last Name" class="wppb-billing-last-name">{{meta_billing_last_name}}</td>
          <td data-label="Billing Company" class="wppb-billing-company">{{meta_billing_company}}</td>
          <td data-label="Billing Address 1" class="wppb-billing-address-1">{{meta_billing_address_1}}</td>
          <td data-label="Billing Address 2" class="wppb-billing-address-2">{{meta_billing_address_2}}</td>
          <td data-label="Billing City" class="wppb-billing-city">{{meta_billing_city}}</td>
          <td data-label="Billing State" class="wppb-billing-state">{{meta_billing_state}}</td>
          <td data-label="Billing Postcode" class="wppb-billing-postcode">{{meta_billing_postcode}}</td>
          <td data-label="Billing Email" class="wppb-billing-email">{{meta_billing_email}}</td>
          <td data-label="Billing Phone" class="wppb-billing-phone">{{meta_billing_phone}}</td>
		  <td data-label="More" class="wppb-moreinfo">{{{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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
{{{extra_go_back_link}}}
<ul class="wppb-profile">
  <li>
    <h3>Billing Address:</h3>
  </li>
  <li>
    <label>Country</label>
    <span>{{meta_billing_country}}</span>
  </li>
  <li>
    <label>First Name:</label>
    <span>{{meta_billing_first_name}}</span>
  </li>
  <li>
    <label>Last Name:</label>
    <span>{{meta_billing_last_name}}</span>
  </li>
  <li>
    <label>Company Name:</label>
    <span>{{meta_billing_company}}</span>
  </li>
  <li>
    <label>Address 1:</label>
    <span>{{meta_billing_address_1}}</span>
  </li>
  <li>
    <label>Address 2:</label>
	<span>{{meta_billing_address_2}}</span>
  </li>
    <li>
      <label>Town / City:</label>
	<span>{{meta_billing_city}}</span>
  </li>
    <li>
      <label>State / County:</label>
	<span>{{meta_billing_state}}</span>
  </li>
    <li>
      <label>Post Code / Zip:</label>
	<span>{{meta_billing_postcode}}</span>
  </li>
    <li>
    <label>Email:</label>
	<span>{{meta_billing_email}}</span>
  </li>
    <li>
    <label>Phone:</label>
	<span>{{meta_billing_phone}}</span>
  </li>
  <li>
    <h3>Shipping Address:</h3>
  </li>
  <li>
  	<label>Country:</label>
	<span>{{meta_shipping_country}}</span>
  </li>
  <li>
  	<label>First Name:</label>
	<span>{{meta_shipping_first_name}}</span>
  </li>
  <li>
  	<label>Last Name:</label>
	<span>{{meta_shipping_last_name}}</span>
  </li>
  <li>
  	<label>Address 1:</label>
	<span>{{meta_shipping_address_1}}</span>
  </li>
  <li>
  	<label>Address 2:</label>
	<span>{{meta_shipping_address_2}}</span>
  </li>
  <li>
    <label>Town / City:</label>
	<span>{{meta_shipping_city}}</span>
  </li>
  <li>
    <label>State / County:</label>
	<span>{{meta_shipping_state}}</span>
  </li>
  <li>
    <label>Postcode / Zip:</label>
	<span>{{meta_shipping_postcode}}</span>
  </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

Note – 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 Hobbyist or Pro license.

Get WooCommerce Sync – Profile Builder Add-on