1 行用于所有产品图库图片
1 row for all product gallery images
我正在寻找一种方法让产品图库仅在一行中显示所有图片。
目前它显示 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
class 的地方。您应该 return 4
以便第 4 项获得 last
class。但是,您还需要调整 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%;
}
如果不缩小宽度,这些项目将永远无法全部放在一行中。
我正在寻找一种方法让产品图库仅在一行中显示所有图片。 目前它显示 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
class 的地方。您应该 return 4
以便第 4 项获得 last
class。但是,您还需要调整 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%;
}
如果不缩小宽度,这些项目将永远无法全部放在一行中。