How to change the number of product categories per row using WooCommerce

Question

I'm using Woocommerce settings to show categories thumbnail on the initial shop page and then products and their thumbnails within them.

I want to have that initial category page to display 3 thumbnails per row and the products page to show 5 categories per row.

To display 5 products per row I've used:

add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
    return 5;
    }
}

This changes the thumbnails per row on the category page AND on the shop page too.

Does anyone know how I can change the categories page to 3 thumbnails per row and maintain 5 products per row on shop page?

Solution

Using WooCommerce conditionals tags, will help you to achieve that. I have changed your code:

add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
    function loop_columns() {
        if ( is_product_category() ) {
            return 3;
        } else { // for other archive pages and shop page
            return 5;
        }
    }
}

This code goes on function.php file of your active child theme or theme

Advice: Sometimes, is necessary to change some css rules, to get the correct display per row.

WooCommerce conditionals tags usage:

To target shop page archive:

if ( is_shop() ) {
    // return the number of items by row
}

To target product tag archives:

if ( is_product_tag() ) {
    // return the number of items by row
}

To target all product archives except product category archives (adding ! at the beginning):

if ( !is_product_category() ) {
    // return the number of items by row
}

And you can also define some particular categories or tags (see the documentation for that).

---

References:

• WooCommerce - Change number of products per row
• WooCommerce - Conditionals tags

Comments

[vandijkstef]

Suggestion for improvement: Only use if ( is_product_category() ) { return 3; } else { return 5; }. This way you are not using the same variable twice (3)