Ajax Load More or View More functionality for woocommerce category layout by template overriding

You can achieve this by create a template override for woocommerce category layout.

How to Create Template override

  • Go to wp-content/theme/{your_theme}
  • Create a folder named woocommerce if already not exist
  • Then create a file titled archive-product.php
  • Now, paste the below code as instructed and modify any parameters per your need

Add this code right after if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly }

/** Load More or View More Functionality 
 * What it is doing is checking if an ajax request was fired
 * and if fired, will run the code and exit to terminate the ajax request
 */ 

    if ($_POST['start'] || $_POST['load']) {

        $bool = get_queried_object();
        $parent_cat_NAME = $bool->name;
        $subCatList = $bool->name;
        $IDbyNAME = get_term_by('name', $parent_cat_NAME, 'product_cat');
        $product_cat_ID = $IDbyNAME->term_id;
        $args = array(
           'hierarchical' => 1,
           'show_option_none' => '',
           'hide_empty' => 0,
           'parent' => $product_cat_ID,
           'taxonomy' => 'product_cat'
        );
        $subcats = get_categories($args);
        $total = count($subcats);
          foreach ($subcats as $sc) {
            $link = get_term_link( $sc->slug, $sc->taxonomy );
              $subCatList  = $subCatList.', '.$sc->slug;
          }
            $args = array( 'post_type' => 'product', 'posts_per_page' => $_POST['load'], 'product_cat' => ($subCatList ? $subCatList : $bool->slug), 'orderby' => 'title', 'order' => 'ASC', 'offset' => (($_POST['start'] + $_POST['load']) - $_POST['load']) );
            $loop = new WP_Query( $args );
            while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                    <li class="product type-product status-publish has-post-thumbnail">    

                    <a href="https://wordpress.stackexchange.com/questions/235873/<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                            <?php woocommerce_show_product_sale_flash( $post, $product ); ?>

                            <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="170px" height="232px" />'; ?>              

                        </a>
                            <h3><?php the_title(); ?></h3>                          

                    </li>

            <?php endwhile; ?>
        <?php wp_reset_query(); ?>
<?php exit(); } ?>
<?php /* Load More or View More Functionality */ ?>

Now add the below code right after do_action( 'woocommerce_sidebar' );

/* Count Total Products */

            $bool = get_queried_object();
            $parent_cat_NAME = $bool->name;
            $subCatList = $bool->name;
            $IDbyNAME = get_term_by('name', $parent_cat_NAME, 'product_cat');
            $product_cat_ID = $IDbyNAME->term_id;
            $args = array(
               'hierarchical' => 1,
               'show_option_none' => '',
               'hide_empty' => 0,
               'parent' => $product_cat_ID,
               'taxonomy' => 'product_cat'
            );
            $subcats = get_categories($args);
            $total = count($subcats);
              foreach ($subcats as $sc) {
                $link = get_term_link( $sc->slug, $sc->taxonomy );
                  $subCatList  = $subCatList.', '.$sc->slug;
              }
              $args = array( 'post_type' => 'product', 'posts_per_page' => 1000, 'product_cat' => ($subCatList ? $subCatList : $bool->slug), 'orderby' => 'title', 'order' => 'ASC' );
                $loop = new WP_Query( $args );
                $count = 0;
                while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
                    $count ++; 

                endwhile; 
                wp_reset_query();

    /* Count Total Products */

    ?>
    <button class="btn btn-load-more" onclick="load_more(<?php echo $count; ?>);">View More</button>

    <script type="text/javascript">
        var start = 15; /* Set the offset value i.e the number of products to skip */
        var load = 20; /* How many products you want to load in one load */
        var current = jQuery('ul.products li').length;

        if(start > current) { jQuery('button.btn.btn-load-more').attr("disabled",true);}

        function load_more(max) {
             jQuery.ajax({
              type: "POST",
              url: window.location.pathname,
              data: { start: start, load: load }

            }).done(function( msg ) {
              jQuery('ul.products').append(msg);
              start = start + load;
                if(start>max) { jQuery('button.btn.btn-load-more').attr("disabled",true);}
            });
        };
    </script>