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
Ahed
i tried the code to change rows number but it didn’t work
help please
Brooke
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?
Farah
Thank you so much! it works! I’ve been looking for solution everywhere and so glad i bumped into your page.
MAHDI
wow! i was searching for this code 4 days!!
the last code worked…
thanks :)
Hung PD
It worked fine for me. Thank you so much!!!
Lennart
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!
David
Hey man the last code worked!
I tried all the codes possible..
Thanks a lot !
Farah
Thank you!! You saved my life and my webshop! It works!
Andy Turner
Cool thanks ! i just added this line to the end of the functions.php file, and it works like a dream.