{"id":123565,"date":"2023-08-08T13:10:39","date_gmt":"2023-08-08T07:40:39","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=123565"},"modified":"2023-08-08T17:14:05","modified_gmt":"2023-08-08T11:44:05","slug":"add-load-more-button-in-woocommerce-products-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-load-more-button-in-woocommerce-products-in-elementor\/","title":{"rendered":"How to Add Load More Button in WooCommerce Products in Elementor?"},"content":{"rendered":"\n<p>Ready to enhance your WooCommerce store&#8217;s user experience with a seamless load more button for product listings? The load more button replaces traditional pagination, allowing customers to load additional products directly on the same page, eliminating the need for multiple page reloads.<\/p>\n\n\n\n<p>If you are using Elementor, you can easily add a load more button to your product listing using the Product Listing widget from The Plus Addons for Elementor.&nbsp;<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, <a href=\"\/docs\/product-listing-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pluslisting\/#client-logos-wgts\u00a0?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, make sure you\u2019ve added some products to your WooCommerce store, then follow the steps &#8211;&nbsp;<\/p>\n\n\n\n<p>1. Add the Product Listing widget on the page or template, then select the appropriate listing type, style and layout.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Load More is only available in the <\/em><strong><em>Normal Page<\/em><\/strong><em> and <\/em><strong><em>Search List<\/em><\/strong><em> listing type, except in the <\/em><strong><em>Carousel<\/em><\/strong><em> layout.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>2. Then go to the <strong>Extra Options<\/strong> tab and select <strong>Load More<\/strong> from the <strong>More Post Loading Options <\/strong>dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"264\" height=\"991\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-load-more.png\" alt=\"product listing load more\" class=\"wp-image-123566\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-load-more.png 264w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-load-more-80x300.png 80w\" sizes=\"(max-width: 264px) 100vw, 264px\" \/><\/figure>\n\n\n\n<p>You can change the text on the button from the <strong>Button Text<\/strong> field, while the <strong>Loading Text<\/strong> field allows you to change the text that appears when more products are being loaded. Additionally, you can also modify the text that appears when all products are loaded by using the <strong>All Posts Loaded Text<\/strong> field.<\/p>\n\n\n\n<p>Then from the <strong>More posts on click\/scroll<\/strong> field, you can set how many products will load at once on the button click.<\/p>\n\n\n\n<p>You can also manage the button typography, colour, background, border etc.<\/p>\n\n\n\n<p>3. Now go to the <strong>Content Source<\/strong> tab and set the maximum number of products to be displayed on a page in the <strong>Maximum Posts Display<\/strong> field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"328\" height=\"880\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-maximum-posts-display.png\" alt=\"product listing maximum posts display\" class=\"wp-image-123562\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-maximum-posts-display.png 328w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-maximum-posts-display-112x300.png 112w\" sizes=\"(max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<p>Depending on the number of products you have and the number set in the <strong>Maximum Posts Display<\/strong> field, you\u2019ll see a load more button on your product listing.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: In order to show load more button, you must set a lower number in the <\/em><strong><em>Maximum Posts Display<\/em><\/strong><em> field than the total number of products.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1138\" height=\"889\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-load-more-demo.gif\" alt=\"product listing load more demo\" class=\"wp-image-123567\"\/><\/figure>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-infinite-scroll-to-woocommerce-products-list-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Infinite Scroll to WooCommerce Products List in Elementor<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":123568,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[526,579],"class_list":["post-123565","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-listings","docs-product-listing"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/123565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=123565"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/123565\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/123568"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=123565"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=123565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}