Changing the Number of Product Columns in WooCommerce

Been working on a WordPress theme that will support WooCommerce. Needed to display less columns per row on the product category page. Fortunately changing the number of product columns in WooCommerce can be done with built in WooCommerce functionality.

WooCommerce Column Filter

I found WooCommerce documentation on a filter that we can use. It is a simple WordPress / WooCommerce filter that allows you to filter the WooCommerce loop and choose the amount of columns to be displayed. Really happy no extra coding on my part was needed really. More information on implementation you can check out here below.

WooCommerce Filters in Roots Sage

Code you can use inside WooCommerce templates in a Sage based theme is the following:

/**
*
* Change number or products per row to 2
* https://docs.woocommerce.com/document/change-number-of-products-per-row/
*
**/
 add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');
 if (!function_exists('loop_columns') && is_tax('product_cat')) {
 function loop_columns() {
 return 2; // 2 products per row
 }
 }

For working with filters in Sage you need PHP namespaces – Roots Sage Blog Post on this. That is why the filters are slightly different. Also see I added an extra condition to load it on the Product Category page.

Column Filter in Non Namespaced themes

For regular themes not using namespaces you can use the following add_filter:

// Change number or products per row to 3
 add_filter('loop_shop_columns', 'loop_columns');
 if (!function_exists('loop_columns')) {
 function loop_columns() {
 return 3; // 3 products per row
 }
 }

as shown in the WooCommerce Documentation. It is similar to the Sage implementation as you can see. This a just a little simpler. And it can also be added to the functions.php file in your theme.

Filter Location Caveats

Do make sure you add the filter to the WooCommerce template and not to functions.php if you are working with conditionals directly this way. See more information on conditional tags in WooCommerce documentation here . Also conditional tags in the WordPress Codex is a good place for you to look into. It is not impossible as shown below, but it depends on how it is loaded there.

Functions File Workaround

Did in the end try a workaround to add it to files being included in function.php despite using WooCommerce conditionals. Took some effort on my part though. Initially when I added this function:

function loop_columns() {
 if (is_product_category()) :
 return 2; // 2 products per row
 endif;
 }
add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');

to extra.php which is loaded into functions.php I got this error on product pages (category pages were fine and loaded the columns dictated):

( ! ) Fatal error: Uncaught DivisionByZeroError: Modulo by zero in /srv/www/domain.com/current/web/app/plugins/woocommerce/includes/wc-template-functions.php on line 250

which referred to the WooCommerce loop:

if ( 0 === ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 === $woocommerce_loop['columns'] ) {
 return 'first';
 }

And the DivisionByZero PHP error refers to a trial to divide a number by zero using the division operator %. More information on it here. Googling I found a lot of sites suffering from this error. Some due to the use of a plugin WooCommerce Product Archive Customizer . No quick solutions or explanations really though.

In the end I figured I needed the function to tell what amount of columns to display in other situations not equal to the condition. So I created this function that did work:

function loop_columns() {
 if (!is_shop()) {
 return 2; // 2 products per row
 } else {
 return 4;
 }
}
add_filter('loop_shop_columns', __NAMESPACE__ . '\loop_columns');

Decided to change the condition here and use shop. Might revert to product_category at a later stage, but this seems to work for me. And it saves me loading another WooCommerce template in my theme!

NB Function is loaded at the end of the extra.php

Columns of Choice Displayed

If you did all this changing the number of product columns in WooCommerce should have been a lot easier than we both thought. It is also code that you can adjust with ease in the future. A win win situation!

Blog