css - 1 行用于所有产品图库图片

Question

我正在寻找一种方法让产品图库仅在一行中显示所有图片。目前它显示 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 类的地方。您应该返回 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%;
}

如果你不缩小宽度，这些元素永远不会全部放在一行上。