如何更改产品列表中的列数？

Question

我使用了网格960系统（.container_12），fancybox，jquery和选项框架插件的wordpress电子商务主题。我列举它们的原因是我不完全确定它们中哪一个会影响我需要帮助才能解决的问题。 我的问题是如何更改产品列表中的列号？ （我在sytle。css中设置了75％的宽度（在＃primary，＃secondary section中），所以它在homapage上显示了3列而不是原来的4列，但是在每第二行只有一个产品元素。 我已经尝试了一切来消除修改style.css（使用的列数：3，显示：块，.linect框中的内联块设置等）到更改960.css的问题，但没有任何帮助问题依然存在。

如果有人能对这个问题给出简短而准确的答案，我真的很感激。至少应该在style.css或其他文件中进行哪些修改，以便将产品列表排列为每行三列。

提前谢谢。

Answer 1

这可以通过多种方式完成：

• 将其添加到functions.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
  }
  }
  

或

• 在woocommerce/templates/content-product.php文件中更改以下行：

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

  到

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

或

• 安装并激活this插件。然后去Woocommerce - ＆gt;产品，向下滚动到Product Columns标题并将金额更改为3。

编辑： 在custom.js文件夹更改中的js/文件中：

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

到

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