{"id":4258,"date":"2021-10-19T11:27:59","date_gmt":"2021-10-19T11:27:59","guid":{"rendered":"https:\/\/webnus.net\/wooshop-builder-help\/?p=4258"},"modified":"2024-04-27T17:20:41","modified_gmt":"2024-04-27T17:20:41","slug":"woocommerce-archive-page","status":"publish","type":"post","link":"https:\/\/webnus.net\/shoppress\/helpdesk\/woocommerce-archive-page\/","title":{"rendered":"WooCommerce Archive 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-archive-page\/#How_to_Create_a_WooCommerce_Archive_Page\" >How to Create a WooCommerce Archive Page<\/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-archive-page\/#Custom_Archive_Page\" >Custom Archive 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-archive-page\/#Archive_Template_Widgets\" >Archive Template 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-archive-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-archive-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-archive-page\/#Archive_page_styling\" >Archive page styling<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>In this article, you will learn How to create a <strong>WooCommerce Archive Page<\/strong> with Elementor<\/p>\n\n\n\n<p>The WooCommerce Archive page has a predefined structure that displays the site Archive pages. However, many users prefer to design their own templates. The ShopPress plugin allows you to easily customize your Archive&#8217;s page with existing widgets just by dragging and dropping widgets on the Elementor editing page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Create_a_WooCommerce_Archive_Page\"><\/span>How to Create a WooCommerce Archive Page <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To enable the archive edit page, follow these steps: First, go to the WordPress dashboard menu and select <strong>ShopPress &gt; Woo Templates<\/strong>. Then, enable the Archive component. Once you do that, you\u2019ll see the config button is activated, which you can click on to enter the Archive component settings. With these settings, you can customize your Archive page according to your preferences.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"901\" height=\"497\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-8.png\" alt=\"\" class=\"wp-image-6631\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-8.png 901w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-8-300x165.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-8-768x424.png 768w\" sizes=\"(max-width: 901px) 100vw, 901px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Custom_Archive_Page\"><\/span>Custom Archive Page<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can design a custom look for your Archive page using this option. ShopPress offers a list of valuable tools that you can use to give your Archive page a new look and feel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"913\" height=\"373\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-13.png\" alt=\"\" class=\"wp-image-6641\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-13.png 913w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-13-300x123.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-13-768x314.png 768w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<p>To do this, click the \u201cAdd New\u201d button, enter the name of the desired template in the field that appears, and then simply click the \u201cAdd New\u201d button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2.png\"><img decoding=\"async\" width=\"1560\" height=\"930\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2.png\" alt=\"WooCommerce Archive Page\" class=\"wp-image-6000\" style=\"width:550px;height:undefinedpx\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2.png 1560w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2-300x179.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2-1024x610.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2-768x458.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2023\/09\/shoppressComponents_Archive_2-1536x916.png 1536w\" sizes=\"(max-width: 1560px) 100vw, 1560px\" \/><\/a><\/figure><\/div>\n\n\n<p>After adding the template, click the toggle button to make the template ready for editing. To save the settings, save the page once and then click the &#8220;Edit&#8221; button to be redirected to the Elementor page builder and the process of customizing your Archive page will begin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"907\" height=\"464\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-12.png\" alt=\"\" class=\"wp-image-6640\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-12.png 907w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-12-300x153.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-12-768x393.png 768w\" sizes=\"(max-width: 907px) 100vw, 907px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Archive_Template_Widgets\"><\/span>Archive Template Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, let\u2019s explain the tools available to customize the Archive page. You can easily create your Archive 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>It displays a list of all the shop&#8217;s products for you.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1868\" height=\"952\" src=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-9.png\" alt=\"\" class=\"wp-image-6632\" srcset=\"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-9.png 1868w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-9-300x153.png 300w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-9-1024x522.png 1024w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-9-768x391.png 768w, https:\/\/webnus.net\/shoppress\/helpdesk\/wp-content\/uploads\/2024\/04\/image-9-1536x783.png 1536w\" sizes=\"(max-width: 1868px) 100vw, 1868px\" \/><\/figure>\n\n\n\n<p><strong>Template<\/strong>: You can select the template you created using the\u00a0<a href=\"https:\/\/webnus.net\/shoppress\/helpdesk\/how-to-create-woocommerce-products-loop-with-elementor\/\">Loop Builder feature<\/a>\u00a0in 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<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 archive 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=\"Archive_page_styling\"><\/span>Archive 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 Archive 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 Archive Page with Elementor The WooCommerce Archive page has a predefined structure that displays the site Archive pages. However, many users prefer to design their own templates. The ShopPress plugin allows you to easily customize your Archive&#8217;s page with existing widgets just by dragging [&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":[59],"class_list":["post-4258","post","type-post","status-publish","format-standard","hentry","category-woo-templates","tag-woocommerce-archive-page"],"_links":{"self":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4258","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=4258"}],"version-history":[{"count":30,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4258\/revisions"}],"predecessor-version":[{"id":6714,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/posts\/4258\/revisions\/6714"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/media?parent=4258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/categories?post=4258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/shoppress\/helpdesk\/wp-json\/wp\/v2\/tags?post=4258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}