H3XED

WooCommerce Change Number of Products Per Row

Oct 16, 2017   Web Development   Nick Vogt   Comments
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
Facebook Twitter

Comments (0)

Share This Post
Facebook Twitter
H3XED © Nick Vogt   RSS   Policies   Facebook   Twitter   Google+