Load More Products in WooCommerce

In this tutorial, I will uncover two ways how you can load more products with AJAX on your WooCommerce store’s pages.

1. Firstly, I will show you can do it in classic WooCommerce themes, for example, Storefront.
2. Then, we will do it for a block theme.

As a bonus, we will take a look at how to create an infinite scroll for WooCommerce products.

Load More Products Without a Plugin for a Classic Theme

In this first method, we will create a WooCommerce load more button without any plugins, so we’re going to use HTML, a little bit of PHP, and jQuery.

The good news is that there are plenty of hooks in WooCommerce and we can easily do everything we need without lurking in WooCommerce templates.

Step 1. Button HTML (choosing the right WooCommerce hook)

I think the best hook we can use here is woocommerce_after_shop_loop. It allows us to add anything after the product list on both the “Shop” and product category pages.

add_action( 'woocommerce_after_shop_loop', function() {

	global $wp_query;
	
	// don't display the button if there are not enough products
	if( 1 < $wp_query->max_num_pages ) {
		echo '<div class="load-more-products button">Show more products</div>';
	}

}, 5 );

If you’re not sure where to use this code snippet, I recommend checking out this tutorial.

You can also remove the standard WooCommerce pagination with the following code snippet:

add_action( 'init', function() {
	remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
	remove_action( 'woocommerce_before_shop_loop', 'woocommerce_pagination', 10 );
} );

For the Storefront theme, the process might be slightly different:

add_action( 'init', function() {
	// we're using a different hook priority (30 instead of 10) 
	remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 30 );
	// we're removing a different function from the hook
	remove_action( 'woocommerce_before_shop_loop', 'storefront_woocommerce_pagination', 30 );
} );

And here we go, that’s what I have now in my Storefront theme:

Of course, at this moment you can click the button as many times as you want – it won’t load more products… yet. But please be patient, we’re going to make it work in just a little bit.

Step 2. Using jQuery to load more products

Before actually sending any AJAX requests, we must do some preparation steps first:

• to enqueue the scripts,
• to pass the information about the query to the AJAX request.

Both of these two things can be done kind of together with the same code snippet.

add_action( 'wp_enqueue_scripts', function() {

	// we need to get parameters from this global variable
	global $wp_query;

	// register but do not enqueue it yet
	wp_register_script(
		'rudr_load_more_products',
		// let's assume, that we are using this code in a WordPress theme
		get_stylesheet_directory_uri() . '/load-more-products.js',
		array( 'jquery', 'woocommerce' )
	);

	wp_localize_script(
		'rudr_load_more_products',
		'loadmore_params', // parameter name
		array(
			'queryVars' => json_encode( $wp_query->query_vars ),
			'currentPage' => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
			'maxPage' => $wp_query->max_num_pages,
		)
	);

 	wp_enqueue_script( 'rudr_load_more_products' );

} );

And now, just a little bit of an explanation for you, guys:

• It is quite obvious why I made this script dependent on the jquery library because we’re using jQuery in it, right? But why the woocommerce dependency? I decided to add it in order to be able to access the woocommerce_params.ajax_url value inside my JavaScript file, so we don’t need to declare one more parameter with the wp_localize_script() function.
• Also, at this moment I created an empty JS file load-more-products.js and put it into a child theme folder (but you can create a custom plugin for that if you want).
• queryVars and maxPage are just the minimum required product query parameters here.

Once finished with this part, we are ready to add the jQuery code to the load-more-products.js file:

jQuery( function($){
	// on button click
	$( '.load-more-products' ).click(function(){

		const button = $(this)
		// parameters for the AJAX request
		const data = {
			'action' : 'woo_more_products',
			'query': loadmore_params.queryVars,
			'page' : loadmore_params.currentPage,
		}
	
		// let's load more WooCommerce products with this AJAX request
		$.ajax({
			url : woocommerce_params.ajax_url,
			data : data,
			type : 'POST',
			beforeSend : function ( xhr ) {
				// you can add a preloader animation here if you want
				button.text( 'Loading more products...' )
			},
			success : function( data ){

				if( data ) {
					button.text( 'Show more products' ).prev().append( data )
					loadmore_params.currentPage++

					if( loadmore_params.currentPage == loadmore_params.maxPage ) {
						button.remove() // if it is the last page, remove the button
					}
				} else {
					button.remove() // if no data, remove the button as well
				}
			}
		})
	})
})

Please take a look at the action parameter which is woo_more_products because we’re going to use it in the next step.

Step 3. wp_ajax_ and wp_ajax_nopriv_ hooks

Since we’re sending the AJAX request the “WordPress way”, we need to process it in PHP using the following action hooks:

• wp_ajax_{action name} – for authorized users,
• wp_ajax_nopriv_{action name} – for everyone else.

And here is the code you can use:

add_action( 'wp_ajax_woo_more_products', 'rudr_load_more_products' );
add_action( 'wp_ajax_nopriv_woo_more_products', 'rudr_load_more_products' );

function rudr_load_more_products(){

	// prepare our arguments for the query
	$args = json_decode( stripslashes( $_POST[ 'query' ] ), true );
	$args[ 'paged' ] = $_POST[ 'page' ] + 1; // we need next page to be loaded
	$args[ 'post_status' ] = 'publish';

	query_posts( $args );

	if( have_posts() ) :
		// product query loop
		while( have_posts() ): the_post();
			// include a WooCommerce product template
			wc_get_template_part( 'content', 'product' );
		endwhile;

	endif;
	die;
}

As you can see, it is pretty much enough to get WooCommerce products using a standard WordPress loop, and the query_posts() function.

This is the result:

Creating a Load More Button in WooCommerce in a Block Theme

I wish I could say that when using a block theme in WooCommerce you can load more products without a plugin, but it is quite difficult to accomplish.

Obviously, in a block theme, you will need to develop a block. And it is a completely different story than just using WooCommerce hooks and a little bit of jQuery.

What are the solutions here?

Well, maybe I would need to create a video course about developing blocks. Because it is just impossible to put all the information in this one tutorial.

Or, as an option you could try to use my Simple Load More Block plugin for this purpose. All you need to do in order to add an AJAX load more button for WooCommerce products with my plugin is:

• to display your products using the standard Query Loop block,
• and then, for example, instead of adding a pagination block, add my Load More block there.

The example is in the screenshot below:

And here we go, now we can load more WooCommerce products with AJAX on store pages:

I remember that I promised you an infinite scroll functionality as well. It can be configured pretty easily, just go to the “Load More” block settings and switch the type option to “Infinite”:

If you have any questions, guys, feel free to ask in the comments below.

# WooCommerce, admin-ajax.php

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X