Infinite Scroll WooCommerce Products with Ajax Load More

WooCommerce is the most popular eCommerce platform on the internet – it powers over 28% off all online stores. Today, we are going to cover how to implement WooCommerce infinite scrolling with the free Ajax Load More plugin for WordPress.

Before we begin, make sure you have both Ajax Load More and WooCommerce activated and products have been created so there is content ready for infinite scrolling 🙂

Note: The following guide and examples reference code from the official WooCommerce theme, Storefront.

**July 2019 Update**

Version 5.1 of Ajax Load More introduced built-in support for WooCommerce on pages, templates, and product archives using the woocommerce shortcode parameter.

Read more about the new integration in the Building a Shortcode section below.

Implementation

There are essentially four steps to WooCommerce infinite scrolling with Ajax Load More. None of the steps are overly difficult to complete, but you will be required to make modifications to core WooCommerce templates during the process.

The implementation steps are as follows:

1. Create Child Theme
2. Create Repeater Template
3. Building a Shortcode
4. WooCommerce Template

Alright, let’s go!

Create Child Theme

Since this tutorial will require modifying core theme template files the first step will be to create a child theme – this will allow us to make modifications and not worry about conflicts when theme updates are applied.

There are many resources available online that explain exactly how to create a child theme so I won’t go into any more detail on how to do that today.

Create Repeater Template

Next, you’ll want to create a unique WooCommerce Repeater Template for displaying your products,

Most WooCommerce-compatible themes use a variation of the default content-product.php template while iterating over products so you may be fine by simply copying the following template into your Ajax Load More Repeater Template.

<?php wc_get_template_part( 'content', 'product' ); ?>

Note: The template above was copied directly from WooCommerce core – I recommend inspecting your theme in the off chance it is using a modified version of the template.
/plugins/woocommerce/templates/content-product.php

Building a Shortcode

After creating the Repeater Template, you should build out a WooCommerce-specific shortcode. The WooCommerce shortcode instructs Ajax Load More on what content to include while infinite scrolling the products.

Shop Home/Landing Page

For a shop homepage or generic landing page, you simply need to set woocommerce=”true” in the core Ajax Load More shortcode.

With woocommerce set as true, Ajax Load More will automatically set product as the post_type parameter and products as the css_classes parameter for the Ajax query.

<?php
   echo do_shortcode('
Load More
');
?>

Note: The majority of WordPress themes and plugins use .products as the container classname for styling WooCommerce product listings. 

Product Archives

On product archive pages, Ajax Load More will automatically detect the current term and taxonomy (e.g. product_tag or product_cat) and then behind the scenes it will set the corresponding taxonomy, taxonomy_terms, post_type and css_classes shortcode parameters.

<?php
    echo do_shortcode('
Load More
');
?>

Pro Tip: Use the css_classes shortcode parameter to add additional classes to the Ajax Load More container.

Manual Implementation

It’s not mandatory to use the built-in WooCommerce integration, you can always decide to manually build an Ajax Load More shortcode.

<?php
	if(is_archive()){
		// Archive template.
		$obj = get_queried_object();
		$taxonomy = $obj->taxonomy; // Get taxonomy.
		$taxonomy_term = $obj->slug; // Get term.
		
		echo do_shortcode('[
Load More');		]
	} else {		
		// Standard Page	
		echo do_shortcode('[ajax_load_more post_type="product" css_classes="products"]');		
	}
?>

The code snippet above is an example of retrieving WooCommerce products on a taxonomy archive page.

WooCommerce Template

The final step is to clone and modify the archive-product.php template from /plugins/woocommerce/templates/ to the root of your current theme directory. This template used for displaying WooCommerce products so modifying this file directly will allow you to place the Ajax Load More shortcode into the correct location.

Pro Tip: Your theme may already be using custom WooCommerce templates – in that case you should modify those templates and not core WooCommerce templates as referenced below.

—

Once the template has been cloned, open the file in your code editor and select everything from the opening if(wc_get_loop_prop(‘total’)){ to the closing } bracket of the conditional statement. You will want to replace the selected contents, including the while() loop with the following Ajax Load More specific code.

// archive-product.php
if ( wc_get_loop_prop( 'total' ) ) {	
   echo do_shortcode('[ajax_load_more woocommerce="true" posts_per_page="6"]');			   
}

Click here to view the complete archive-product.php template.

With the template updated and steps 1 through 4 complete you should have a working WooCommerce infinite scroll – check out the following links to see our code implemented on a shop homepage and product archive.

Wrapping Things Up

It might seem like a lot of tasks to implement WooCommerce infinite scrolling, but keep in mind at the end of the day all you’re really doing is replacing the default WooCommerce loop with Ajax Load More.

Got any WooCommerce specific questions or suggestions? Leave them in the comments and I’ll do my best to help you out!