WooCommerce Tutorial

12.2How to display customers who also bought the product

Sometimes, you might want to display customers who bought the product, when that product’s page is visited on the front-end. You can easily do this with Toolset and this page explains how.

This guide is the twelveth step part two of our WooCommerce tutorial: How to build an e-commerce website in 12 steps.

Buy Toolset

How it works

  1. Create a Layout that displays single products. Learn how to do this on the page about creating templates for single products.
  2. Create a View that displays WooCommerce Orders:
    • Check if the displayed single product is associated with the Orders displayed using that View.
    • If the product belongs to that order, retrieve values of the Order’s custom fields like customer’s first and last name and display it in your View.
    • Insert this View into the single product layout created in the first step.

Creating a View to display WooCommerce Orders

Start by checking the Orders post type in the Views Content Selection.

Selecting "Orders" as a post type to query
Selecting “Orders” as a post type to query

Since you want to display customers who bought the products, you need to query only completed orders. WooCommerce Orders have a custom set of “post statuses”, which are different from the default WordPress ones.

Here is the list of all WooCommerce order statuses with their respective slugs:

  • Pending payment (wc-pending)
  • Processing (wc-processing)
  • On hold (wc-on-hold)
  • Completed (wc-completed)
  • Cancelled (wc-cancelled)
  • Refunded (wc-refunded)
  • Failed (wc-failed)

In the Query Filter section, click to Add a filter, select to filter by Post status and then click the Add query filter button. Check wc-completed in the list of statuses and click Save.

Post status filter for completed Orders
Filter to display only completed orders

Displaying customers associated with WooCommerce orders

Now, you need to design the output of this View. Remember that we want to display the name of the customer who bought a product.

To make them accessible by Views go to the Toolset -> Settings page, click the Front-end content tab and look at the Hidden custom fields section. There, click the Select custom fields button and check all the fields starting with _billing.

 

WooCommerce Orders fields selected to be visible in Views
WooCommerce Orders fields selected to be visible in Views

Now that WooCommerce Orders fields are visible in Views, you can proceed to design the output.

In the Loop Output Editor, click the Loop Wizard button. In the first step of the wizard, select to display the loop as an Unordered list and then click Next.

Displaying the loop as an unordered list using the Loop Wizard
Displaying the loop as an unordered list using the Loop Wizard

In the next step of the wizard, click Add a field button and select _billing_first_name and _billing_last_name fields found under the Post field section. When done, click the Finish button.

Using the wizard to display customer's first and last name
Using the wizard to display customer’s first and last name

The wizard updates the contents of the Loop Output Editor but we need to add two customizations.

First, add the heading tag before the list of customers.

Heading for our list of customers who bought the product
Heading for our list of customers who bought the product

The last thing to do is to check if the single product (loaded by the single product Layout) belongs to the WooCommerce order being looped. To do this, follow the steps in the table below.

In the editor, select the contents enclosed in the li tag, right after the wpv-loop and click the conditional output button in the editor.

Adding a conditional output check for the current item in the loop
Adding a conditional output check for the current item in the loop

In the dialog box that appears, select Custom Functions as the data type and wpv_woo_product_belongs_to_this_order as the field. Enter 1 in the Value field and click the Insert shortcode button.

Checking if product belongs to the current order
Checking if product belongs to the current order

The Loop Output Editor is updated with the conditional shortcode and our final contents are displayed in the following image.

The final contents of the loop output
The final contents of the loop output

Now, if the currently displayed product belongs to the order, Woocommerce Order custom fields will be retrieved and display the customer associated with that order.

Inserting the View as View cell in Single Products Layout

Now that you are done creating the View, it is time to insert it into the template layout used for displaying single Products.

Edit the layout for Products and insert the View cell in the desired place. In the Create new View cell dialog, click the Use an existing View option, select the View you created following the steps in the previous section and click Create.

Inserting the View we created into the template layout for Products
Inserting the View we created into the template layout for Products

After this, you can simply close the cell editing dialog box and return to the layout. The View was inserted.

The View inserted into the template layout for Products
The View inserted into the template layout for Products

That’s it! On the front-end, at the bottom of the single product page, you can now see the customers who also bought the product being displayed.

Product page with a list of customers who bought the product
Product page with a list of customers who bought the product

Build the perfect website today

Toolset allows you to add some of the most important features for your website in less time than ever. That’s because with Toolset you do not need to write PHP – saving you hours of needless coding.

You no longer need to manage dozens of complex plugins for your website. You can use the full Toolset package to build, run and maintain it all.

Whether you are a WordPress newbie or an experienced web developer, we have the plan for you based on your needs and budget.