Question

我正在使用带有主题模板的woocommerce。默认情况下，woocommerce每行显示4个产品，但我想显示5个。

我正在使用子模板，所以我复制了woocommerce文件，里面我有content-product.php文件。

我在这里对此进行了修改。

if ( empty( $woocommerce_loop['columns'] ) ) 
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 5 );

但没有工作。

我读了如何改变这个我找到了这个函数，我把它放在我的function.php中的子模板

中

add_filter('loop_shop_columns', 'custom_loop_columns');
if (!function_exists('custom_loop_columns')) {
    function custom_loop_columns() {
        return 8;
    }
}

但也不行。

知道如何更改woocomerce中每行的产品数量!!!!

Answer 1

试试这个，

在你的function.php中检查这个功能。

// 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
}
}

然后你的孩子主题添加了这个，

// Override theme default specification for product # per row
function loop_columns() {
return 5; // 5 products per row
}
add_filter('loop_shop_columns', 'loop_columns', 999);

有关详情，请查看this

希望有所帮助......

Answer 2

在我的情况下，它适用于以下代码

我在儿童主题的style.css文件中插入了这些样式

@media only screen and (min-width: 768px) {
  ul.products li.product {
  width: 16.05%!important;
 }
}

并将以下php代码用于主题的function.php

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
add_filter('loop_shop_columns', 'loop_columns');
 if(!function_exists('loop_columns')) { function loop_columns() { return 5; }}
 if ( empty( $woocommerce_loop['columns'] ) ) { $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );}

Answer 3

我知道它已经很晚但是这段代码（但是在那里找到一个好的解决方案并不容易）确实对我有所帮助:( functions.php首选于子主题）

    add_filter( 'loop_shop_columns', 'wc_loop_shop_columns', 1, 10 );

    /*
     * Return a new number of maximum columns for shop archives
     * @param int Original value
     * @return int New number of columns
     */
    function wc_loop_shop_columns( $number_columns ) {
        return 5;
    }

和css：

.columns-4 ul.products li.product {float:left !important;width:29% !important;}
.columns-4 .container_inner>ul.products li.product:nth-child(4n+1), .columns-4 .products>ul.products li.product:nth-child(4n+1), div.woocommerce.columns-4 ul.products li.product:nth-child(4n+1), .columns-4 .cross-sells>ul.products li.product:nth-child(4n+1), .columns-4 .woocommerce_with_sidebar ul.products li.product:nth-child(3n+1) {
clear:none !important;
}

更改woocommerce中每行的产品数量

3 个答案: