WooCommerce Products Per Page

WooCommerce has default settings that allow you to set the amount of products you would like to show on a category/archive page.  This can be accomplished by adding a simple snippet to your child theme’s functions.php file:

/**
 * Change number of products that are displayed per page (shop page)
 */
add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  // $cols contains the current number of products per page based on the value stored on Options –> Reading
  // Return the number of products you wanna show per page.
  $cols = 9;
  return $cols;
}

This will statically set the amount of products to show per page in WooCommerce. The problem is that it is static, what if you want to allow your users to change this on their own?

We can allow for this functionality as well by modifying this snippet some like below:

add_action( 'after_setup_theme', 'change_parent_products_per_page', 10 );
 
function change_parent_products_per_page() {

  if( isset($_GET['productsperpage']) && is_numeric($_GET['productsperpage']) ){
    $count = $_GET['productsperpage'];
  }else{
    $count = 20;
  }

   //Chnage how many products are displayed per page    
    add_filter( 'loop_shop_per_page', create_function( '$cols', 'return '.$count.';' ), 20 );

}

This again goes into your child theme’s functions.php file.

By default we are setting this to 20 products per page unless the user overrides it.  Now that we have the hook to accomplish this you need to add a drop down for the user to select it within the WooCommerce archive-product.php template.

First, if you have not already done this, copy over the archive-product.php file from you parent theme or WooCommerce plugin into your child-theme/woocommerce folder.

Next you’ll insert this code snippet into the template wherever you would like the select drop down to be displayed:

<form method='get' action='' class='productsperpage'>
	<label>Products per page</label>
	<select name='productsperpage' style='padding: 5px; background-color: #f0f0f0;'>
		<option value='10' <?php if( isset($_GET['productsperpage']) && $_GET['productsperpage'] == '10' ){ echo 'selected='selected''; } ?> >10</option>
		<option value='20' <?php if( ( isset($_GET['productsperpage']) && $_GET['productsperpage'] == '20' ) || !isset($_GET['productsperpage']) ){ echo 'selected='selected''; } ?> >20</option>
		<option value='30' <?php if( isset($_GET['productsperpage']) && $_GET['productsperpage'] == '30' ){ echo 'selected='selected''; } ?> >30</option>
		<option value='40' <?php if( isset($_GET['productsperpage']) && $_GET['productsperpage'] == '40' ){ echo 'selected='selected''; } ?> >40</option>
		<option value='50' <?php if( isset($_GET['productsperpage']) && $_GET['productsperpage'] == '50' ){ echo 'selected='selected''; } ?> >50</option>
		<option value='60' <?php if( isset($_GET['productsperpage']) && $_GET['productsperpage'] == '60' ){ echo 'selected='selected''; } ?> >60</option>
	</select>
</form>

That’s all, now your users can define from the frontend of your website how many products per page they would like to see.