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>