Add Number of Products per Page to WooCommerce

For large online stores, it’s practically necessary to have a dropdown menu that allows you to change the number of products shown per page. If you’re like me, you don’t want to browse through 50 pages of 10 products each to find what you want—I much prefer selecting “View All Products” and scrolling through everything to get the product I want.

Since WooCommerce is one of the most popular e-commerce plugins on WordPress today, it surprised me to know that it doesn’t let you dynamically change the number of products shown per page with a dropdown menu. Searching for this function brought me to many forums posts and blog posts saying “Oh, just change the number of posts shown on your blog in your Reading Settings.” With the right set of search words, however, I managed to find this gem by Derek Schmidt.

His code helped me add in the dropdown that will change the number of products shown per page, but it doesn’t automatically load your selected option upon refresh or page change. If you read through the comments, Adrian posts some code but WordPress filtered out some of the characters. There’s also some jQuery that’s involved, but was left out.

Here is what I came up with from Derek’s and Adrian’s code. It works and it’s easy to customize. Remember to sub out “yourdomain.com” towards the end of the code with the address of your domain or subdomain.

// User selects how many products to view per page
// via http://designloud.com/how-to-add-products-per-page-dropdown-to-woocommerce/
function woocommerce_catalog_page_ordering() {
?>
<form action="" method="POST" name="results">
<select name="woocommerce-sort-by-columns" id="woocommerce-sort-by-columns" class="sortby" onchange="this.form.submit()">
<?php

		//  This is where you can change the amounts per page that the user will use  feel free to change the numbers and text as you want, in my case we had 4 products per row so I chose to have multiples of four for the user to select.
			$shopCatalog_orderby = apply_filters('woocommerce_sortby_page', array(
				''		=> __('Products per page', 'woocommerce'),
				'8' 	=> __('8 per page', 'woocommerce'),
				'16' 		=> __('16 per page', 'woocommerce'),
				'32' 		=> __('32 per page', 'woocommerce'),
				'-1' 		=> __('View All', 'woocommerce'),
			));

			foreach ( $shopCatalog_orderby as $sort_id => $sort_name )
				echo '<option value="' . $sort_id . '" ' . selected( $_SESSION['sortby'], $sort_id, false ) . ' >' . $sort_name . '</option>';
		?>
</select>

</form>
<?php   // Adrian's code
	if (isset($_POST['woocommerce-sort-by-columns']) && (($_COOKIE['shop_pageResults'] <> $_POST['woocommerce-sort-by-columns']))) {
	$currentProductsPerPage = $_POST['woocommerce-sort-by-columns'];
	} else {
	$currentProductsPerPage = $_COOKIE['shop_pageResults'];
	}
	?>
    <script type="text/javascript">
         jQuery('select.sortby>option[value="<?php echo $currentProductsPerPage; ?>"]').attr('selected', true); 
    </script>
<?php 
} 

// now we set our cookie if we need to
function dl_sort_by_page($count) {
  if (isset($_COOKIE['shop_pageResults'])) { // if normal page load with cookie
     $count = $_COOKIE['shop_pageResults'];
  }
  if (isset($_POST['woocommerce-sort-by-columns'])) { //if form submitted
    setcookie('shop_pageResults', $_POST['woocommerce-sort-by-columns'], time()+1209600, '/', 'yourdomain.com', false); //this will fail if any part of page has been output- hope this works!
    $count = $_POST['woocommerce-sort-by-columns'];
  }
  // else normal page load and no cookie
  return $count;
}

add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_page_ordering', 20 );
add_filter('loop_shop_per_page','dl_sort_by_page');

It took me a while to figure out the jQuery. Adrian had posted this in reference to forcing the dropdown to select the currently used option, but this refers to the option index instead of the option value (note: the following line of code isn’t necessary – it’s included in the code above but edited to use the option’s value instead of its index):

$('select.sortby>option:eq(1)').attr('selected', true);

I didn’t feel like writing a loop to figure out the option’s position within the dropdown, so I changed it to use the option value.

So if you have a large store using WooCommerce, try out this code. Your customers will be able to change the number of products they want to see per page, which improves user experience.