Question

我想让产品详情页面使用3列而不是4列默认列。

我的Magento2网站上有一些类别，每个类别都有一些产品。我希望它们显示为3列计数，但它总是显示为4个默认列数，如何更改plz帮助我。

Answer 1

Magento 2没有将列数设置为Magento 1的选项。

要从4更改为3（对于基于Luma的主题），您需要更改CSS并重置图像大小。

您需要更改的CSS代码位于Magento_Catalog模块中，文件：

_listings.less

就是这样：

    .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  .products-grid .product-item { width: 100%/5 }
  .page-layout-1column .products-grid .product-item { width: 100%/6 }
  .page-layout-3columns .products-grid .product-item { width: 100%/4 }
  .page-products .products-grid .product-items { margin: 0; }
  .page-products .products-grid .product-item {
    width: 24.439%;
    margin-left: calc(~"(100% - 4 * 32.439%) / 3");
    padding: 0;
    &:nth-child(3n+1) {
      margin-left: 0;
    }
  }
  .page-products.page-layout-1column .products-grid .product-item { width: 100%/5 }
  .page-products.page-layout-3columns .products-grid .product-item { width: 100%/4 }
}

要有3列，请将其更改为（我建议将此代码添加到_theme.less）：

    .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  .products-grid .product-item { width: 100%/4 }
  .page-layout-1column .products-grid .product-item { width: 100%/5 }
  .page-layout-3columns .products-grid .product-item { width: 100%/3 }
  .page-products .products-grid .product-items { margin: 0; }
  .page-products .products-grid .product-item {
    width: 32.439%;
    margin-left: calc(~"(100% - 3 * 32.439%) / 2");
    padding: 0;
    &:nth-child(3n+1) {
      margin-left: 0;
    }
  }
  .page-products.page-layout-1column .products-grid .product-item { width: 100%/4 }
  .page-products.page-layout-3columns .products-grid .product-item { width: 100%/3 }
}

之后

/your_theme/etc/view.xml

更改小图像宽度和高度。现在是240和300，将它改为300和330。

刷新，就是这样。

如何更改列表页面Magento2中的列数？

1 个答案: