我正在寻找一种方法让产品图库仅在一行中显示所有图片。 目前它显示 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
}
最佳答案
您发布的代码只更改了应用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%;
}
如果你不缩小宽度,这些元素永远不会全部放在一行上。
关于css - 1 行用于所有产品图库图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29610017/