WooCommerce change number of columns in the frontpage

Question

I've been looking for an answer for a couple of days now. I've tried every snippet possible, changing the functions files, creating a separate template for content products but I can't change the number of products listed. Currently WooCommerce displays 4 products per row. Adding a css class of "last" to that fourth product. I want to display the products in a line of three products.

Here is the url to the current store: http://teamhappiness.org/store/

Answer 1

You didn't say what snippets you've actually tried, but according to the docs, you can filter loop_shop_columns like so:

function wpa65503_woo_shop_columns( $columns ) {
    return 3;
}
add_filter( 'loop_shop_columns', 'wpa65503_woo_shop_columns' );

tested and working for me with Twenty Eleven theme.

EDIT - this is the particular line in the default content-product.php template file that makes the above filter work. you could just set it directly if you're using a custom template file and don't need it filterable:

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

Answer 2

Hey guys I was searching around the same issue; just found the solution! It's not involving content-product.php at all (at least in my case), it's involving the file woocommerce > single-product > related.php Make a template of this file (if you don't know how to override WooCommerce template study that) and find this code:

$args = apply_filters('woocommerce_related_products_args', array(
'post_type'             => 'product',
'ignore_sticky_posts'   => 1,
'no_found_rows'         => 1,
'posts_per_page'        => $posts_per_page,
'orderby'               => $orderby,
'post__in'              => $related
) );

All you've got to do is change the variable

$posts_per_page

In which number of related products you want to display! For example:

'posts_per_page'        => 10,

Will display 10 products.