If you have a large number of products, displaying them all on a single page causes slow page load times and a poor user experience. Adding a load more button to your WooCommerce product listing lets visitors load products in batches, keeping the page fast and the browsing experience smooth.
The Product Listing block in Nexter Blocks lets you add a WooCommerce load more button to your product listing so shoppers load new items on demand without leaving the page.
To check the complete feature overview documentation of the Nexter Blocks Product Listing block, click here.
Best Used For:
- WooCommerce stores with 12 or more products where loading all items at once slows the page
- Product category pages where you want to show a controlled number of items and let shoppers decide to load more
- Online stores that want to keep the initial page load fast while still offering access to the full catalog
Requirement – This block is a part of Nexter Blocks, make sure its installed & activated to enjoy all its powers.
To do this, make sure you have added products to your WooCommerce store. Then follow these steps.
1. Add the Product Listing block to the page or template. In the block settings, select a listing type, style, and layout for your WooCommerce product grid.
Note: Load More is not available in the Carousel layout.
2. Go to the Extra Options tab and select Load More from the Load More Options dropdown.
In the Post View OnClick / OnScroll field, set how many products load each time a visitor clicks the button. Use a lower value (4 to 6) when product cards are large or image-heavy, so each click adds a manageable number. Use a higher value (12 or more) when product cards are compact and shoppers expect to see a larger selection with each click.
In the Button Text field, change the label on the button itself. Use this when your store uses a specific call-to-action, such as “Show More Products” or “View All Items.”
In the Loading Text field, set the message that appears while new products are fetching.
In the All Posts Loaded Text field, set the end-of-list message that tells shoppers there are no more products to load. This is useful on smaller catalogs where visitors might otherwise click and see no response.
If you want products to load automatically as visitors scroll instead of requiring a button click, see How to Add Infinite Scroll to WooCommerce Products List in WordPress?
3. Go to the Query tab and set a value in the Maximum Posts Display field. This controls the total number of products that can appear on the page across all load-more clicks.
Depending on the total number of products in your store and the value set in the Maximum Posts Display field, the load more button appears automatically on your WooCommerce 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 see How to Add Pagination to WooCommerce Products in WordPress? for numbered page navigation, and How to Filter WooCommerce Products by Category in WordPress? to let shoppers narrow results before loading more.
