如何修改CSS实现Woocommerce垂直商品画廊缩略图放大及主图右移？

可直接补充以下CSS代码实现需求 #

/* 配置画廊内部间距与布局基础 */
.woocommerce-product-gallery {
    gap: 12px;
}

/* 固定缩略图容器宽度，直接放大缩略图尺寸，调整百分比可控制缩略图大小 */
.woocommerce-product-gallery .flex-control-thumbs {
    width: 22% !important;
}

/* 确保缩略图铺满容器，无变形 */
.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100% !important;
    object-fit: contain;
}

/* 主图区域右对齐，实现主图右移效果 */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* 调整主图显示尺寸，可按需修改百分比 */
.woocommerce div.product div.images img {
    width: 92% !important;
}

参数调整说明 #

• 缩略图大小可修改.flex-control-thumbs的width属性值，数值越大缩略图越大
• 缩略图和主图的间距可修改.woocommerce-product-gallery的gap属性值
• 主图大小可修改最后一段img的width属性值，数值越大主图越大
• 若样式不生效可检查页面元素的实际类名，对应调整选择器即可

内容的提问来源于stack exchange，提问作者Hado Baleares