Question

我正在寻找一种方法，让产品库只显示1行的所有图像。目前它显示2行。第一行有3个图像，第二行有1个图像。请查看page。

我尝试了这段代码，但它并没有真正帮助：

add_filter ( 'woocommerce_product_thumbnails_columns', 'xx_thumb_cols' );
 function xx_thumb_cols() {
     return 1; // .last class applied to every 4th thumbnail
 }

Answer 1

您发布的代码仅会更改last类的应用位置。您应该return 4以便第4项获得last课程。但是，您还需要调整CSS

.woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a {
  float: left;
  width: 30.75%;
  margin-right: 3.8%;
}

需要修改为：

.woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a {
  float: left;
  width: 22.1%;
  margin-right: 3.8%;
}

如果你不缩小宽度，那么这些物品将永远不会全部放在单行上。

所有产品图库图片均为1行

1 个答案: