{"id":2011757,"date":"2021-04-06T12:02:30","date_gmt":"2021-04-06T12:02:30","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=2011757"},"modified":"2021-04-08T12:17:08","modified_gmt":"2021-04-08T12:17:08","slug":"how-to-display-woocommerce-orders-on-the-front-end","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/how-to-display-woocommerce-orders-on-the-front-end\/","title":{"rendered":"How to Display WooCommerce Orders on the Front-end"},"content":{"rendered":"\n<p class=\"lead\">To display a list of any kind of content with Toolset, you need to <a href=\"https:\/\/toolset.com\/course-lesson\/creating-a-view\/\">create a View<\/a>. Here are the steps for creating a View to display WooCommerce orders.<\/p>\n\n\n\n<p>Before you start, make sure to install the following plugins:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>WooCommerce<\/li><li>Toolset Types<\/li><li>Toolset Blocks<\/li><li>Toolset WooCommerce Blocks<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Create the View<\/h2>\n\n\n\n<p>Create or edit a page, post or a template and insert the Toolset <strong>View<\/strong> block. In the wizard, give it a name and select the View&#8217;s design options. Finally, in the last step, select the <strong>Orders <\/strong>post type and click <strong>Next.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"f7603314e3045470174a117c4299da78\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/selecting-orders-post-type.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/selecting-orders-post-type-500x330.png\" alt=\"\" class=\"wp-image-2011835\"\/><\/a><div class=\"tb-image-caption\"><figcaption><em>Selecting <\/em><strong><em>Orders<\/em><\/strong><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">2. Select the post status for Orders you want to list<\/h2>\n\n\n\n<p>When displaying Orders on the front-end, you can select a post status of the Orders you wish to list.&nbsp;<\/p>\n\n\n\n<p>WooCommerce Orders have a custom set of \u201cpost statuses\u201d, which are different from the default<\/p>\n\n\n\n<p>WordPress ones.&nbsp;<\/p>\n\n\n\n<p>Here is the list of all WooCommerce order statuses with their respective slugs:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Pending payment (wc-pending)<\/li><li>Processing (wc-processing)<\/li><li>On hold (wc-on-hold)<\/li><li>Completed (wc-completed)<\/li><li>Cancelled (wc-cancelled)<\/li><li>Refunded (wc-refunded)<\/li><li>Failed (wc-failed)<\/li><\/ul>\n\n\n\n<p>When listing Orders using a <strong>View<\/strong>, you can select the relevant post status for them:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>In block navigation, select your <strong>View.<\/strong> In the right sidebar expand the <strong>Content Selection <\/strong>section. In the <strong>Query Filter <\/strong>section, click the <strong>Add a filter<\/strong> button.&nbsp;<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Select to filter by<strong> Post status<\/strong>. In the list of available post statuses, check the preferred ones and click <strong>Save<\/strong>. In our example, we selected <strong>wc-completed<\/strong> to list only the finalized sales.&nbsp;&nbsp;<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"7750ff76f78f63d76400b1688a65d943\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/post-status-completed.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/post-status-completed-500x461.png\" alt=\"\" class=\"wp-image-2011825\"\/><\/a><div class=\"tb-image-caption\"><figcaption><em>Post status filter for completed orders<\/em><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">3. Design the Front-end List of Orders&nbsp;<\/h2>\n\n\n\n<p>As a final step, you need to design how to display our list of Orders on the front-end. In our example, we display completed WooCommerce Orders and list the following information for each:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Post (order) ID<\/li><li>Post (order) title<\/li><li>First name of the customer<\/li><li>Last name of the customer&nbsp;<\/li><\/ul>\n\n\n\n<p>To display this information you need to use Toolset blocks. For example, you could use the <strong>Single Field<\/strong> block. Insert it and in the right sidebar under the <strong>Field Source<\/strong> section select <strong>Standard Field<\/strong>. Finally, under <strong>Post Field<\/strong> you can select the information you want to display for an order (i.e. <strong>Post Title<\/strong>).<\/p>\n\n\n\n<p>The following image displays how our list of Orders looks like.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"a1a375cd43a6fed15bc518befb42fc2e\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/order-on-the-front-end-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/order-on-the-front-end-1-500x209.png\" alt=\"\" class=\"wp-image-2011815\"\/><\/a><div class=\"tb-image-caption\"><figcaption><em>List of orders in the front-end<\/em><\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Enabling Specific WooCommerce Orders Fields for Views<\/h2>\n\n\n\n<p>By default, some custom fields of WooCommerce Orders like \u201cBilling first name\u201d, \u201cBilling last name\u201d, and \u201cBilling email for the customers\u201d are hidden. This means your <strong>View<\/strong> cannot display them until you make them accessible to it.<\/p>\n\n\n\n<p>To do this go to <strong>Toolset \u2192&nbsp; Settings<\/strong>, click the <strong>Front-end Content<\/strong> tab, and look at the <strong>Hidden custom fields<\/strong> section.&nbsp;<\/p>\n\n\n\n<p>There, click the <strong>Select custom fields<\/strong> button and check all the fields starting with <strong>_billing<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"49f6d59c8df2af59676a1407bc0ed661\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/hidden-custom-fields-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/04\/hidden-custom-fields-1-500x143.png\" alt=\"\" class=\"wp-image-2011791\"\/><\/a><div class=\"tb-image-caption\"><figcaption><em>WooCommerce Orders fields selected to be visible in View<\/em>s<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>That&#8217;s it, now that the WooCommerce Orders fields are visible in the <strong>View<\/strong> block, you can also add those extra fields to your list of orders. Again, simply use one of Toolset blocks and their dynamic sources option.<\/p>\n","protected":false},"author":84277,"featured_media":2014727,"template":"","related-lesson":[8445],"class_list":["post-2011757","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-e-commerce"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/2011757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/84277"}],"version-history":[{"count":7,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/2011757\/revisions"}],"predecessor-version":[{"id":2012089,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/2011757\/revisions\/2012089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/2014727"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=2011757"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=2011757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}