change number of product per row in woocommerce

1 Views

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.

Read More

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!!!!

Post Views: 1

Related posts

Leave a Reply

3 comments

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