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.
Start by checking the Orders post type in the Views Content Selection.
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:
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.
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.
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.
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.
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.
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.
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.
The Loop Output Editor is updated with the conditional shortcode and our final contents are displayed in the following image.
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.
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.
After this, you can simply close the cell editing dialog box and return to the layout. The View was inserted.
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.
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.