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