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.
Let’s go through the steps of creating a View to display your WooCommerce orders.
Since WooCommerce Orders are a custom post type, you start by selecting Orders in the Content Selection section.
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:
When listing Orders using a View, it is important to select the relevant post status for them:
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:
The following image displays how our list of Orders looks like.
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 the WooCommerce Orders fields are visible in Views, you can proceed to design the output using the following steps:
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.
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.
Start by creating a new View, call it “List of Ordered Products”, for example, and follow the steps in the table below.
|What to do||Screenshot|
|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:
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).
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:
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.
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:
That’s it! Your list of WooCommerce Orders now also features an image of ordered Products.
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.