WooCommerce - Changing the number of product categories per row

问题

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?

Thank you in advance!

回答1:

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

回答2:

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' ) ); ?>">

来源：https://stackoverflow.com/questions/38932094/woocommerce-changing-the-number-of-product-categories-per-row

标签

php

wordpress

woocommerce