Makers Byte
Published in

Makers Byte

How to change number of products display in WooCommerce product listing page?

A snippet of code for changing the number of product display in WooCommerce product listing page

via unsplash.com

There are many solutions to this problem in WooCommerce. Some might be limited by your site’s theme, and some themes only allow for a few solutions that we’ll explain here.

Before commencing, it is vital to backup everything. It would also make sense to have a child theme in place, or everything might disappear after a while.

Here are two ways to change the number of products per page:

#1 — With the Theme Customizer

The easiest way to change the WooCommerce number of products per page is by changing the theme’s settings, however, first make sure your theme allows it. If it doesn’t, move on to the second solution.

#2 — With a Filter

This option is for everyone whose theme does not allow them to customize the products per page. You can use a very simple code snippet and incorporate it into your functions.php file. Simply follow these steps.

  • Go to your WordPress site’s files, and locate the theme you are using, go inside the folder and open functions.php file.
  • Now use the following snippet:
/**
* 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;
}
  • In above case we want to display 9 products over the listing page.
  • Update the file, and save it. With this filter, you’ll now enable your users to see 9 products per page.
  • You can always modify the number to any value you want. To do that, change the value in $col = 9 to any value you want.

If you enjoyed this post…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store