How can I change the number of columns in the product list?

Question

I use a wordpress ecommerce theme using grid 960 system (.container_12), fancybox, jquery and the options framework plugin. The reason why I've enumerated them is that I'm not completely sure which of them affect the problem what I need some help to be able to solve. My question would be that how can I change the column number in the product list? ( I set the width to 75% in sytle. css (within #primary,#secondary section) so it displayed 3 three columns instead of the original 4 on the homapage but in every second row there is only one product element. I've tried everything to eliminate the problem from modifying the style.css (used column-count:3, display: block, inline-block settings etc. in the .product-box) to changing 960.css) but nothing helped the problem remained the same.

I'd be really thankful if someone could give a short and exact answer to the issue. Primarly to that that what modifications should be made in style.css or other file to arrange product listing to three columns per row.

Thank you in advance.

Answer 1

This can be done a number different of ways:

• Add this to the functions.php file

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

OR

• In the woocommerce/templates/content-product.php file change the following line:

  $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
  

  to

  $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );
  

OR

• Install and activate this plug. Then go Woocommerce -> Products, scroll down to the Product Columns heading and change the amount to 3.

EDIT: In the custom.js file in the js/ folder change:

jQuery('.article-list .grid_3:nth-child(4n)').after('<div class="clear"></div>');

to

jQuery('.article-list .grid_3:nth-child(3n)').after('<div class="clear"></div>');