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.

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 Amount 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 amount of products displayed on an Archive Product Category 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.

1 Comment

  1. 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