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

Question

我使用 wordpress 电子商务主题，使用 grid 960 系统 (.container_12)、fancybox、jquery 和选项框架插件。我之所以列举它们，是因为我不完全确定它们中的哪一个会影响我需要一些帮助才能解决的问题。我的问题是如何更改产品列表中的列号？（我在 sytle.css 中将宽度设置为 75%（在#primary、#secondary 部分中），因此它在主页上显示 3 个三列，而不是原来的 4 列，但每隔一行只有一个产品元素。我已经尝试了一切方法来消除问题，从修改 style.css（在 .product-box 中使用了 column-count:3、display: block、inline-block 设置等）到更改 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 );
  

或者

• 安装并激活该插件。然后转到 Woocommerce -> 产品，向下滚动到 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>');