Flatsome主题下Woocommerce商品详情页图片统一尺寸设置问题

前置配置（解决后台设置不生效问题） #

• 进入WooCommerce → 设置 → 产品 → 产品显示，设置你需要的主图、缩略图默认尺寸，裁剪规则选择统一裁剪
• 进入Flatsome主题选项 → 商店 → 产品页面，关闭「产品图片自适应尺寸」相关开关
• 安装Regenerate Thumbnails插件，批量重建所有已上传图片的缩略图版本，3000张图执行完成后原有设置即可生效，无需额外CSS

快速CSS适配方案（无需重建缩略图，和你现有列表页CSS逻辑兼容） #

直接将以下代码添加到Flatsome主题选项 → 高级 → 自定义CSS框内即可生效，可自行调整数值适配你的站点需求：

/* 商品详情页主图容器固定高度 */
.woocommerce-product-gallery__wrapper {
    background-color: #fff;
    height: 600px!important;
    position: relative;
}
/* 主图尺寸限制+居中显示 */
.woocommerce-product-gallery__image img {
    max-height: 590px!important;
    width: auto!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 10px;
}
/* 详情页下方缩略图统一尺寸 */
.woocommerce-product-gallery .flex-control-thumbs li {
    height: 80px!important;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
    max-height: 70px!important;
    width: auto!important;
}

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