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 to infinite scroll 🙂

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

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 anymore 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 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.

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


Building a Shortcode

After creating your Repeater Template you will need to build a custom WooCommerce shortcode – this shortcode instructs Ajax Load More on what content to include in the infinite scroll query.

Shop Home/Landing Page

For a shop home or landing page you simply need to set product as the Post Type and include products as a custom css_classes parameter.

Product Archives

For displaying product category and tag archives you will also be required to pass in the current taxonomy (product_tag / product_cat) and taxonomy term to the Ajax Load More shortcode.

Note: The css_classes shortcode parameter may differ depending on your theme.


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.

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

With the template updated and steps 1 thru 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!

Comments

12 thoughts on “Infinite Scroll WooCommerce Products with Ajax Load More”

  1. Avatar

    Ismail

    June 01, 2019 @ 3:29 am
    Reply

    Hi Darren,

    I have done the following steps to make it work for my WooCommerce store site with flatsome theme.
    1. copied block from content-product.php to default(repeater) template in uploads folder.
    2. cloned archive-product template from /plugins/woocommerce/templates/ to root folder of my child theme. file path in my case is /themes/flatsome-child/archive-product.php
    3. Nested following code block to if ( wc_get_loop_prop( ‘total’ ) )
    {ALM code bock(if/else) here} section in archive-product template:

    ALM Code Block Inserted:

    if(is_archive()){ // Product Archives

    $obj = get_queried_object();
    $taxonomy = $obj->taxonomy; // Get taxonomy
    $taxonomy_term = $obj->slug; // Get term
    echo do_shortcode(‘[ajax_load_more post_type="product" taxonomy="'. $taxonomy .'" taxonomy_terms="'. $taxonomy_term .'" taxonomy_operator="IN" css_classes="products" posts_per_page="6" transition="fade"]‘);

    } else { // Shop Landing Page

    echo do_shortcode(‘[ajax_load_more post_type="product" css_classes="products" posts_per_page="6" transition="fade"]‘);

    }

    Its not working. Can you please point out what i am doing wrong here.

    1. Avatar

      Ismail

      June 03, 2019 @ 2:59 am
      Reply

      Hi Darren,

      The issue is fixed by moving archive-product file from child theme root to woocommerce folder created under child theme root.
      But now the issue is that my theme layout is broken:
      1. sidebar is not showing on left side but below the products
      2. single product is showing instead of 4 in case of desktop and 2 in case of mobile
      Can you please help me fix this.
      And do you have a plan to integrate woocommerce feature in plugin options?

      Thanks.

      1. Avatar

        Darren Cooney

        June 10, 2019 @ 9:10 am
        Reply

        Hi Ismail,
        Oh, nice work. Glad to hear it’s sorted.

  2. Avatar

    John Negoita

    May 19, 2019 @ 1:56 am
    Reply

    hi Darren,

    I’m trying to implement ALM with masonry for my products in Woo.
    and I’m doing this in the archive-product.php

    echo do_shortcode(‘[ajax_load_more post_type="product" taxonomy="'. $taxonomy .'" taxonomy_terms="'. $taxonomy_term .'" taxonomy_operator="IN" css_classes="products" posts_per_page="6" transition="masonry" masonry_selector=".grid-item"]‘);

    But, I’m getting this JS error:

    Cannot read property ‘style’ of undefined at new ajaxloadmore (ajax-load-more.js:122)

    When debugging it seems that the code expects the element alm-btn-wrap to be inside the ajax-load-more-wrap element, but it’s actually outside

    What am I doing wrong?

    thanks,
    John

    1. Avatar

      Darren Cooney

      May 21, 2019 @ 8:17 am
      Reply

      Hey John,
      This error is usually related to an issue in the repeater template. If a template is closing an extra div, ALM can lose the positioning of the button.
      Can you share your template in a Gist or something?

  3. Avatar

    boombalaya

    May 03, 2019 @ 4:39 pm
    Reply

    Would it be possible to connect the shortcode with woocommerce’s attributes filter widget so users can sort by size / color?, I already tried adding the parameters in the shortcode and fetching the values from the URL via $GET[‘filter_size’] but I must be doing something wrong because no products are shown.

    1. Avatar

      boombalaya

      May 03, 2019 @ 5:18 pm
      Reply

      Nevermind, I realized product attributes are treated as taxonomies in your shortcode, all good! thanks for the great plugin.

      1. Avatar

        Darren Cooney

        May 04, 2019 @ 10:23 am
        Reply

        Yes, you need to pass the taxonomies into the shortcode. I hope to make this easier for everyone soon, but for now it’s sort of a manual process.
        Glad it’s working for you!

        1. Avatar

          boombalaya

          May 06, 2019 @ 1:37 pm
          Reply

          Thank you so much, yeah I got that working and I’m just missing one thing, I don’t know if it’s possible. Is there a way to also pass the product price range values? Thank you!

          1. Avatar

            Darren Cooney

            May 08, 2019 @ 11:49 am

            Can you show me an example?

  4. Avatar

    Jeremy

    October 03, 2018 @ 9:11 pm
    Reply

    Would it be possible for you to make a video explaining these steps as you go along? I’m not a computer science major and I’m pretty much faking it until I make it with this stuff… It’s super cool in theory, but I honestly have no idea what I’m doing and videos are much more helpful than written instructions because I can follow along as you go. Thanks!

    1. Avatar

      Darren Cooney

      October 06, 2018 @ 12:12 pm
      Reply

      Hi Jeremy,
      My plan is to start creating more video content very soon.

Leave a Reply

Your email address will not be published. Required fields are marked *