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

Question

我使用 wordpress 电子商务主题，使用 grid 960 系统 (.container_12)、fancybox、jquery 和选项框架插件。我列举它们的原因是我不完全确定它们中的哪一个会影响我需要一些帮助才能解决的问题。我的问题是如何更改产品列表中的列号？ (我在 sytle.css 中将宽度设置为 75%(在#primary,#secondary 部分)所以它在 homapage 上显示了 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 );
  

或

• 安装并激活 this插头。然后转到 Woocommerce -> 产品，向下滚动到 Product Columns 标题并将数量更改为 3。

编辑:在 js/ 文件夹中的 custom.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>');