WooCommerce Tutorial

12.1How to display WooCommerce Orders on the front-end

The Toolset WooCommerce Views plugin allows you to easily display WooCommerce orders on your site’s front-end. This page explains how to do this and provides tips on customizing their display on the front-end.

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

Buy Toolset

Creating a View to display WooCommerce Orders

Let’s go through the steps of creating a View to display your WooCommerce orders.

1. Select the Orders post type

Since WooCommerce Orders are a custom post type, you start by selecting Orders in the Content Selection section.

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

2. Select the post status for Orders you want to list

To display Orders on the front-end, you must select a post status of the Orders you wish to list.

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)

When listing Orders using a View, it is important to select the relevant post status for them:

  1. In the Query Filter section, click the Add a filter button.
  2. Select to filter by Post status and click the Add query filter button.
  3. In the list of available post statuses, check the preferred ones and click Save. In our example, we selected wc-completed to list only the finalized sales.

Post status filter for completed Orders
Post status filter for completed Orders

3. Design the front-end list of Orders

As a final step, we need to design how our list of Orders are displayed on the front-end.

In our example, we display completed WooCommerce Orders and list the following information for each:

  • Post (order) ID
  • Post (order) title
  • First name of the customer
  • Last name of the customer

The following image displays how our list of Orders looks like.

List of orders on the front-end
List of orders on the front-end

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 the WooCommerce Orders fields are visible in Views, you can proceed to design the output using the following steps:

  1. Click the Loop Wizard button in the Loop Output Editor section.
  2. In the wizard, start by selecting how to display the Orders and click Next. In our example, we selected the Bootstrap grid option with three columns.
  3. Use the Add a field button to add all the preferred fields. Please note that the fields related to WooCommerce Orders are found under the Post field section in the dropdown menu.
  4. After adding all the fields, click on the Finish button.

 

How to display Ordered Products when listing Orders

When listing Orders on the front-end, it is possible to also list products that were ordered. A front-end example of this is displayed in the following image.

List of Orders that displays the related ordered Products
List of Orders that displays the related ordered Products

As mentioned earlier, our main View, which displays the Orders posts, cannot also query the Product posts. Instead, we need to create a separate View and nest it inside the output of the main one.

Let’s go over the steps to achieve this.

1. Creating a View that lists ordered products

Start by creating a new View, call it “List of Ordered Products”, for example, and follow the steps in the table below.

What to doScreenshot
Check Products in the Content Selection section. 
In the Query Filter section, click the Add a filter button and select a Post ID option in the dialog’s dropdown menu.

For the filter’s Include or exclude option select include.

For the filter’s How to filter option, select Posts with IDs set by the View shortcode attribute and add “ids” into the related field.

Click to Save the filter.

 

 

Now, this View will filter WooCommerce products and display only those that match the IDs provided by the ids argument.

You can now proceed to design the Loop Output section for the “List of Ordered Products” View and output any product-related information you need. In our case, we opted to display a Product’s image which links to the Product page:

  1. Click the Loop Wizard button and select the Unformatted option in the wizard’s first part.
  2. Add the WooCommerce Product Image field in the wizard’s second step.
  3. Mark the Use a Content Template to group the fields in this loop option and click to finish the wizard.

Wizard updates the Templates for this View with the wpv-woo-product-image shortcode. In our example, we wrapped this shortcode in a link tag that links to the post URL (Product’s page).

Simple output for our Ordered Products View
Simple output for our Ordered Products View

2. Adding the ordered products to the list of Orders

Now that you created a View that lists ordered products, you can add it to the list of Orders as described in the first section above.

Start by inserting our “List of Ordered Products” View into the main, “Display Orders” one, using the following steps:

  1. In the Loop Output section, click the Loop Wizard button.
  2. Click Next to go to the wizard’s second step.
  3. Click the Add a field button and in the dropdown menu, under the Post View section select Ordered Products.
  4. Click on the Finish button and the wizard update the View’s template.

Scroll to the Templates for this View editor and you will see that the shortcode for the “List of Ordered Products” View was added to the output.

"List of Ordered Products" View inserted into the output of the list of Orders
“List of Ordered Products” View inserted into the output of the list of Orders

However, you still need to tell this View which Products to display. If you remember, in the previous part, you added the “ids” argument to the “List of Ordered Products” Views filter. You can now add this argument to the View’s shortcode:

  1. At the end of the wpv-view shortcode, type ids=’ ‘.
  2. Position the mouse cursor between the quotes and click the Fields and Views button.
  3. In the dialog box that appears, under the WooCommerce section, click the Ordered Products button. The wpv-ordered-product-ids shortcode is inserted.

"List of Ordered Products" View shortcode with an "ids" argument
“List of Ordered Products” View shortcode with an “ids” argument

That’s it! Your list of WooCommerce Orders now also features an image of ordered Products.

 

 Page with a list of orders including the ordered products

Page with a list of orders including the ordered products

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.