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.

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' );
  }
}

3 Comments

  1. David on June 27, 2019 at 8:10 am

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

    Thanks a lot !

  2. Farah on December 10, 2018 at 11:32 am

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

  3. Andy Turner on September 28, 2018 at 4:50 am

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

Leave a Comment