Change Amount of WooCommerce Products Displayed on Shop Page

WooCommerce displays by default 4 columns and 10 products per page in the shop or archive page – the products per page is based off the amount of post set to display in the WP Admin Dashboard > Reading – Blog pages show at most setting.

Here is how you can change the amount of products in both the shop and product category archive pages.

Changing WooCommerce Product Amount & Rows

Change the Amount of Products

You can edit this by adding to your functions.php

add_filter( 'loop_shop_per_page', 'bt_new_loop_shop_per_page', 20 );
/**
 * How many products per page
 * @since 1.0.0
 */
function bt_new_loop_shop_per_page( $cols ) {
    // Return the number of products you want show per page.
    $cols = 28;
    return $cols;
}

Change the ‘return 28:’ value to the number of products you need to display.

Show all the Products

To show all the products use the number -1 so $cols = -1;


Change the Number of Rows

By default WooCommerce displays in 4 rows set to 22.05% wide and controls the layout with first and last classes assigned to the <li> element.

add_filter( 'loop_shop_columns', 'bt_new_loop_columns_per_page' );
/**
 * How many columns per page
 * @since 1.0.0
 */
function bt_new_loop_columns_per_page( $cols ) {
    // Return the number of columns you want show per page.
    $cols = 3;
    return $cols;
}

Change the ‘return 3:’ value to the number of rows you need to display.

Also, you will need to change the CSS for the width percentage of the row – so for our example above using 3 rows in your style.css add…

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 29.5%;
}

You may to tweak the % amount to fit your page layout.

You can also express the row filter an alternate way.

Change to a different amount of products displayed on a Product Category Archive Page

If you wanted to have a different amount of products on an archive product category page, you can use either pre_get_posts or Woo’s woocommerce_product_query together with the WooCommerce conditional is_product_category()

add_action('pre_get_posts','bt_shop_filter_cat');

function bt_shop_filter_cat($query) {
  if (!is_admin() && $query->is_main_query() && is_product_category( 'accessories' )) { // change to your product category
        $query->set( 'posts_per_page', '28' );
  }
}

or

add_action( 'woocommerce_product_query', 'bt_woocommerce_product_query', 10, 2 );
function bt_woocommerce_product_query( $q, $instance ) {
	if ( $q->is_main_query() && is_product_category( 'accessories' )) { // change to your product category
		$q->set( 'posts_per_page', '4' );
	}
}

pre_get_posts is probably more familiar and works fine, it assumes the posts are in a main_query – co combine other WooCoomerce archives with the number of products to display, check the list of Woo conditionals.

Additionally, pre_get_posts filter can be used to force the number of products on the WooCommerce shop page if the another methods didn’t work.

add_action('pre_get_posts','tt_woocommerce_archive');

function tt_woocommerce_archive($query) {
  if (!is_admin() && $query->is_main_query() && is_shop()) {
        $query->set( 'posts_per_page', '30' );
  }
}

So the above will output 30 products on the shop page – or for all the WooCommerce archive pages…

add_action('pre_get_posts','tt_woocommerce_archive');

function tt_woocommerce_archive($query) {
  if (!is_admin() && $query->is_main_query() && is_shop() || is_woocommerce() || is_product_category() || is_product_tag()) {
        $query->set( 'posts_per_page', '30' );
  }
}

10 comments

  • i tried the code to change rows number but it didn’t work
    help please

  • I am trying to target how many products display on specific categories and the 5th one worked great! But is it possible to target several specific categories, and not just one?

  • Thank you so much! it works! I’ve been looking for solution everywhere and so glad i bumped into your page.

  • wow! i was searching for this code 4 days!!
    the last code worked…
    thanks :)

  • It worked fine for me. Thank you so much!!!

  • Perfect! I was looking for an easy solution and the first one worked for me. :-)
    Thank you!

  • Fadilah Othman

    Wow! It works for me too! I used the first codes, added to the end of the Functions.php file.

    Thank you so much!

  • Hey man the last code worked!
    I tried all the codes possible..

    Thanks a lot !

  • Thank you!! You saved my life and my webshop! It works!

  • Cool thanks ! i just added this line to the end of the functions.php file, and it works like a dream.

Leave your comment