WooCommerce How To Change the Number of Products Per Row

Oct 16, 2017   Web Development   Nick Vogt   Comments (2)
Please note that this post is over a year old and may contain outdated information.
Here is how to change the number of products/columns per row on WooCommerce product pages. You should be using a child theme of the default Storefront theme that comes with WooCommerce and not editing the Storefront theme directly. If you're using a theme other than Storefront, I'm not sure if these instructions will work.

In your child theme's functions.php file, add these lines of code:

// Change number of columns per row
add_filter('loop_shop_columns', 'change_loop_columns', 999);
add_filter('storefront_loop_columns', 'change_loop_columns', 999);
function change_loop_columns() {
    return 4;

Change the 4 to the number of products you want per row.

Most guides on the Internet miss the storefront_loop_columns filter, which is required. Leaving it out will result in products being displayed in a very odd pattern.
Share This Post

Comments (2)

pasc   Feb 02, 2018
great! thanks man!
Share This Post
H3XED © Nick Vogt   RSS   Policies   Twitter