change number of product per row in woocommerce

问题:

I am using woocommerce with a themefores template. By default woocommerce show 4 product per row, but I want to show 5.

I am using a child template so I duplicate woocommerce file and inside I have content-product.php file.

Here I modified this.

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

but no work.

I read how to change this I found this function that I put in my function.php in child template

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

but don't work too.

Any idea how to change the number of product per row in woocomerce!!!!

回答1:

Try this,

In your function.php check this function.

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

Then your child theme add this,

// 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);

for more details check this

Hope it helps..

回答2:

In my case it works with the following code

I inserted these styles on child theme's style.css file

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

and use the following php code into the theme's 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 );}

回答3:

I know its late but this code (but it was not easy to find a good solution out there) sure did help me: (functions.php prefered in child-theme)

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

and in 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;
}