CODEWITHSUNDEEP
phpwordpresswoocommercecategoriesproduct
T.Doe
T.Doe

Reputation: 2035

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

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?

Upvotes: 3

Views: 13445

Answers (3)

Atif Tariq
Atif Tariq

Reputation: 2772

Please apply this code:

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

Upvotes: 0

kruddock
kruddock

Reputation: 47

In my storefront-child theme. The accepted answer did not work for me. I had to copy woocommerce/templates/loop/loop-star.php to my child theme subfolder /woocommerce/loop/ and modify it like this:

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// FMP20181126 - Categories are SubCategories set # of columns.
$display_type = woocommerce_get_loop_display_mode();
if ( 'subcategories' === $display_type || 'both' === $display_type ) {
        wc_set_loop_prop( 'columns', 3 );
}   

?>

<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">

Upvotes: 0

LoicTheAztec
LoicTheAztec

Reputation: 253804

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:

Upvotes: 8

Related Questions