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

时间:2015-04-13 16:08:18

标签: css wordpress woocommerce

我正在寻找一种方法,让产品库只显示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
 }

1 个答案:

答案 0 :(得分: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%;
}

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