{"id":4751,"date":"2022-04-27T11:01:09","date_gmt":"2022-04-27T11:01:09","guid":{"rendered":"https:\/\/webnus.net\/wooshop-builder-help\/?p=4751"},"modified":"2024-04-22T09:44:10","modified_gmt":"2024-04-22T09:44:10","slug":"woocommerce-products-loop-page","status":"publish","type":"post","link":"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-products-loop-page\/","title":{"rendered":"WooCommerce Products Loop Page"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_78 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-products-loop-page\/#Create_WooCommerce_Products_Loop_Page_with_Elementor\" >Create WooCommerce Products Loop Page with Elementor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-products-loop-page\/#Customizing_WooCommerce_Products_Loop_with_Elementor\" >Customizing WooCommerce Products Loop with Elementor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-products-loop-page\/#Using_Loop_Templates_on_pages\" >Using Loop Templates on pages<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>In this article, you will learn how to create a <a href=\"http:\/\/woocommerce.com\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce<\/a> Products Loop Page with Elementor.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">One of the great features of ShopPress is the possibility of creating a loop for each of the product widgets, such as Sale Products, Recent Products, Featured Products, Related Products, etc. Using this feature, you can design a special template for each of these widgets and place them anywhere on your website.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_WooCommerce_Products_Loop_Page_with_Elementor\"><\/span>Create WooCommerce Products Loop Page with Elementor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To customize your WooCommerce Products Loop Page, follow these steps:<br>First, go to ShopPress and select Woo Templates. From there, choose Product Loop and click the Config button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1808\" height=\"1000\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01.png\" alt=\"WooCommerce Products Loop Page\" class=\"wp-image-6469\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01.png 1808w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01-300x166.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01-1024x566.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01-768x425.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/01\/product-loop-01-1536x850.png 1536w\" sizes=\"(max-width: 1808px) 100vw, 1808px\" \/><\/a><\/figure>\n\n\n\n<p>This will take you to a new page with a list of product loops. Click the Add New button to create the loop template. Then by clicking on the edit icon, you will be redirected to an Elementor page to modify your loop template.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d68eb1c3fcd&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1842\" height=\"870\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-01.png\" alt=\"WooCommerce Products Loop Page\" class=\"wp-image-6607\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-01.png 1842w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-01-300x142.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-01-1024x484.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-01-768x363.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-01-1536x725.png 1536w\" sizes=\"(max-width: 1842px) 100vw, 1842px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Here, you can customize all the widgets to your liking and use them on your product pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Customizing_WooCommerce_Products_Loop_with_Elementor\"><\/span>Customizing WooCommerce Products Loop with Elementor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>First, we click the Edit button to enter the Elementor edit page. We have used (dragged) different widgets such as Loop Product Thumbnails, Loop Product Title, Loop Product Price, and Loop Rating to build the Recent Products loop. The Widget styles can be found under the style tab.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d68eb1c472b&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"2880\" height=\"1621\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04.png\" alt=\"WooCommerce Products Loop Page\" class=\"wp-image-6608\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04.png 2880w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04-300x169.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04-1024x576.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04-768x432.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04-1536x865.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-04-2048x1153.png 2048w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p>Note: All the contents on this page are placeholders and will be replaced by your actual products on the front end.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Loop_Templates_on_pages\"><\/span>Using Loop Templates on pages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, we want to use this product loop on a specific page. Open the page where you want to use the Product Loop Template and edit it using Elementor. Then, drag the Product Collection widget into the Elementor area.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d68eb1c4f91&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-02-1024x577.png\" alt=\"WooCommerce Products Loop Page\" class=\"wp-image-6610\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-02-1024x577.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-02-300x169.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-02-768x433.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-02-1536x866.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-02-2048x1155.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Then, Choose between the available product collections that you want to showcase on your pages such as Recent Products, Best Selling Products, Featured Products, Sales Products, and Top Rated Products.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d68eb1c56e3&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1624\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03.png\" alt=\"WooCommerce Products Loop Page\" class=\"wp-image-6609\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03.png 2880w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03-300x169.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03-1024x577.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03-768x433.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03-1536x866.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/woo-loop-03-2048x1155.png 2048w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Now, from the Template setting, you can choose the template you have designed beforehand in the ShopPress Woo Template section.<\/p>\n\n\n\n<p>That&#8217;s it. You can easily create and use your custom product template on your WooCommerce pages.<\/p>\n\n\n\n<p>Note: You can use your created templates on any pages you want. From the homepage or any internal pages to the Shop and Archive page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to create a WooCommerce Products Loop Page with Elementor. One of the great features of ShopPress is the possibility of creating a loop for each of the product widgets, such as Sale Products, Recent Products, Featured Products, Related Products, etc. Using this feature, you can design a special [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[79],"class_list":["post-4751","post","type-post","status-publish","format-standard","hentry","category-woo-templates","tag-woocommerce-products-loop"],"_links":{"self":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/comments?post=4751"}],"version-history":[{"count":19,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4751\/revisions"}],"predecessor-version":[{"id":6611,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4751\/revisions\/6611"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/media?parent=4751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/categories?post=4751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/tags?post=4751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}