-1

In my wordpress woocommerce, I have designed my category layout to show only the images with it's corresponded title and links.

Now,

  • I want to integrate ajax load more capability without using any plugins like ajax load more. How may I achieve that for woocommerce?
  • I want to hide the Load More or View More button once all the products are displayed.
  • I want to load unique products from all the subcategories if the requested category has.
  • All products should be unique, no duplicate
2

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="<?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>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.