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.

Update: Jeroen Sormani created a plugin! Check it out at WooCommerce Products Per Page.

9 comments on “Add Number of Products per Page to WooCommerceAdd yours →

    1. Hi Jeroen,

      Thank you for making a plugin! I’m definitely going to use it on my next WooCommerce project, and I’ll update my post to include your plugin link.

      Cheers!

    1. Hi Bhupendra,

      Your website is password-protected so I can’t view what’s going on with the sorting. If you want help with the plugin, you should contact its creator either by his online contact form or on the support forum for the plugin.

      If you feel comfortable working in PHP, you can disable/delete the plugin and try my code (the large chunk) from the tutorial. All you have to do is copy it into your theme’s functions.php file and change ‘yourdomain.com’ to your website’s domain name.

      I hope you get it working soon!

    2. Hi Bupendra,

      Maybe a late reply, but better late then never.

      I’ve been pointed to that a few weeks ago and released an update for that. If you haven’t downloaded the latest version yet I can recommend it, of course :).

  1. Hi Mercy,
    Thanks for sharing this with the woocommerce community.

    I tried the plugin with a clients site and it didn’t work. It messed thing sup.

    Your code works brilliant.

    Keep up the great work 🙂

    1. Hi Vishal,

      Please check that the action in your form code is an empty value (form=””). When I visit your page, it has this:

      <form method="post" action="http://www.axattechnologies.in/demo/mexicansilverstore1/?product_cat=bracelets?product_cat=bracelets" style="float: right;" class="form-wppp-select products-per-page">
      

      So when you select a new value from the dropdown, it executes the action above (which results in a 404 because of the parameters). I do see that the products shown per page does change if you navigate back from the 404, so I think that one thing (removing the URL from the action) should fix things.

Leave a Reply