{"id":4342,"date":"2021-10-19T12:14:36","date_gmt":"2021-10-19T12:14:36","guid":{"rendered":"https:\/\/webnus.net\/wooshop-builder-help\/?p=4342"},"modified":"2024-04-27T17:23:12","modified_gmt":"2024-04-27T17:23:12","slug":"woocommerce-shop-page","status":"publish","type":"post","link":"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-shop-page\/","title":{"rendered":"WooCommerce Shop 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-shop-page\/#How_to_Create_WooCommerce_Shop_Page_with_Elementor\" >How to Create WooCommerce Shop 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-shop-page\/#Creating_Templates_for_the_Shop_Page\" >Creating Templates for the Shop Page<\/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-shop-page\/#Shop_Template_Widgets\" >Shop Template&nbsp;Widgets<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-shop-page\/#Shop_Products\" >Shop Products<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-shop-page\/#Product_Filters\" >Product Filters<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-shop-page\/#Shop_page_styling\" >Shop page styling<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>In this article, you will learn how to Create a WooCommerce Shop Page with Elementor.<\/p>\n\n\n\n<p><span class=\"c8\">A shop page, as defined by WooCommerce, is a \u201cplaceholder for a post-type<\/span> archive for products.\u201d The presentation of your products on this page holds significant importance in determining the success of your business, and its impact on potential customers cannot be overstated.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Create_WooCommerce_Shop_Page_with_Elementor\"><\/span>How to Create WooCommerce Shop Page with Elementor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To enable the Shop Page edit page, you need to follow these steps: first, go to the WordPress dashboard menu and select ShopPress &gt; Woo Templates. Then, enable the Shop component. Once you do that, you&#8217;ll see the Config button, which you can click on to enter the Shop template settings. With these settings, you&#8217;ll be able to customize your shop page according to your preferences.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d68e6d27b75&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-full wp-lightbox-container\"><img fetchpriority=\"high\" decoding=\"async\" width=\"908\" height=\"658\" 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\/image.png\" alt=\"WooCommerce Shop Page\" class=\"wp-image-6616\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image.png 908w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-300x217.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-768x557.png 768w\" sizes=\"(max-width: 908px) 100vw, 908px\" \/><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<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_Templates_for_the_Shop_Page\"><\/span>Creating Templates for the Shop Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this section, you can create numerous templates to assign to your product, generally or specifically. To create a new template for your shop page, click on the &#8220;Add New&#8221; button. Once done, you can proceed to the Elementor shop page edit page by clicking on the edit icon. This will allow you to customize the page with a wide range of widgets that we have thoughtfully prepared for this specific purpose.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"913\" height=\"451\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-2.png\" alt=\"\" class=\"wp-image-6618\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-2.png 913w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-2-300x148.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-2-768x379.png 768w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Shop_Template_Widgets\"><\/span>Shop Template&nbsp;Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, let\u2019s explain the tools available to customize the Shop page. You can easily create your Shop page with just a few clicks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Shop_Products\"><\/span>Shop Products<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Using the Shop Products widget, you can display your products on this page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product.png\"><img decoding=\"async\" width=\"2879\" height=\"1629\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product.png\" alt=\"WooCommerce Shop Page\" class=\"wp-image-5840\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product.png 2879w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product-300x170.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product-1024x579.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product-768x435.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product-1536x869.png 1536w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2021\/10\/09-shop-product-2048x1159.png 2048w\" sizes=\"(max-width: 2879px) 100vw, 2879px\" \/><\/a><\/figure><\/div>\n\n\n<p><strong>Template<\/strong>: You can select the template you created using the&nbsp;<a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/how-to-create-woocommerce-products-loop-with-elementor\/\">Loop Builder feature<\/a>&nbsp;in the Template section. Otherwise, the products will be displayed in the default WooCommerce style.<br><strong>Infinite Scroll and Load More<\/strong>: You can choose between displaying products with an Infinite Scroll or a Load More Button.<br><strong>Button Icon or Text<\/strong>: This feature enables customization of the load more button&#8217;s style, such as icon, text, or icon text.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"374\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-4.png\" alt=\"\" class=\"wp-image-6620\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-4.png 289w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-4-232x300.png 232w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/figure><\/div>\n\n\n<figure class=\"wp-block-embed aligncenter is-type-wp-embed is-provider-shoppress-helpdesk wp-block-embed-shoppress-helpdesk\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"DwsNsiUdkJ\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-products-loop-page\/\">WooCommerce Products Loop Page<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;WooCommerce Products Loop Page&#8221; &#8212; ShopPress HelpDesk\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-products-loop-page\/embed\/#?secret=2uads3J8LN#?secret=DwsNsiUdkJ\" data-secret=\"DwsNsiUdkJ\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Product_Filters\"><\/span>Product Filters<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This element consists of two widgets: Display and Filters.<br><strong>Display<\/strong>: Display as Drawer allows the filter to display as a dropdown after clicking on the filter icon. Also, You have some choices such as Open drawer button style, Button label, Button icon, Drawer position, and Drawer title options. These options allow you to personalize the drawer to match your style and make it function exactly the way you want.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"605\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-15.png\" alt=\"\" class=\"wp-image-6690\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-15.png 287w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-15-142x300.png 142w\" sizes=\"(max-width: 287px) 100vw, 287px\" \/><\/figure><\/div>\n\n\n<p><strong>Filters<\/strong>: This particular widget provides an elegant filtering solution for your shop page. To implement it, simply drag and drop the Product Filters widget into the desired section of your page, and subsequently add the filtering option as illustrated in the screenshot below. This method is both simple and effective in enhancing the overall functionality of your page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"754\" height=\"904\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-6.png\" alt=\"\" class=\"wp-image-6624\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-6.png 754w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-6-250x300.png 250w\" sizes=\"(max-width: 754px) 100vw, 754px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Shop_page_styling\"><\/span>Shop page styling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>After all, by navigating to the Style tab of each widget, you will have the superpower of the <a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/styler\/\">Styler<\/a> tool to customize your shop page based on your theme Schema.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"691\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-7.png\" alt=\"\" class=\"wp-image-6625\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-7.png 946w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-7-300x219.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-7-768x561.png 768w\" sizes=\"(max-width: 946px) 100vw, 946px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to Create a WooCommerce Shop Page with Elementor. A shop page, as defined by WooCommerce, is a \u201cplaceholder for a post-type archive for products.\u201d The presentation of your products on this page holds significant importance in determining the success of your business, and its impact on potential customers [&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":[58],"class_list":["post-4342","post","type-post","status-publish","format-standard","hentry","category-woo-templates","tag-edit-woocommerce-shop"],"_links":{"self":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4342","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=4342"}],"version-history":[{"count":26,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4342\/revisions"}],"predecessor-version":[{"id":6716,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4342\/revisions\/6716"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/media?parent=4342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/categories?post=4342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/tags?post=4342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}