If you have a large number of products, displaying them all on a single page can cause slow page load times, which can lead to a poor user experience. By adding a load more button to your product pages, you can improve the user experience and reduce the load on your server.
With the Product Listing block from The Plus Blocks for Gutenberg, you can easily add a load more button to your product listing.
To check the complete feature overview documentation of The Plus Blocks for Gutenberg Product Listing block, click here.
Requirement – This block is a part of The Plus Blocks for Gutenberg, make sure its installed & activated to enjoy all its powers.
To do this, make sure you’ve added some products to your WooCommerce store, then follow the steps –
1. Add the Product Listing block on the page or template, then select the appropriate listing type, style and layout.
Note: Load More is not available in the Carousel layout.
2. Then go to the Extra Options tab and select Load More from the Load More Options dropdown.
In the Post View OnClick / OnScroll field, you can set how many products will load at once on the button click.
From the Button Text field, you can change the text on the button, while the Loading Text field allows you to change the text that appears when more products are being loaded. You can also modify the text that appears when all products are loaded by using the All Posts Loaded Text field.
3. Now go to the Query tab, and set the maximum number of products to be displayed on a page in the Maximum Posts Display field.
Depending on the number of products you have and the number set in the Maximum Posts Display field, you’ll see a load more button on your product listing.
Note: In order to show load more button, you must set a lower number in the Maximum Posts Display field than the total number of products.
Also, check How to Add Pagination to WooCommerce Products in WordPress.
