如何将WooCommerce产品画廊缩略图改为正方形（无需重传图片）

方案一：裁剪为正方形（图片居中裁剪，无空白） #

方法1：Elementor自定义CSS #

直接给产品画廊添加样式，强制容器为正方形并裁剪图片：

/* WooCommerce产品画廊正方形（裁剪版） */
.woocommerce-product-gallery__image {
    width: 100% !important;
    padding-top: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}
.woocommerce-product-gallery__image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

复制这段代码到Elementor的「自定义CSS」面板（可以是单个产品页面的局部自定义CSS，也可以是Elementor全局自定义CSS），生效后所有画廊图片容器会变成正方形，图片居中裁剪填充，不会变形。

方法2：functions.php全局代码 #

如果要让所有产品画廊统一生效，在主题的functions.php文件末尾添加以下代码：

// 注册正方形产品画廊图片尺寸（裁剪版）
add_action('after_setup_theme', 'register_square_product_gallery_size');
function register_square_product_gallery_size() {
    add_image_size('woocommerce-square-gallery', 600, 600, true); // 宽高600px，true表示强制裁剪
}

// 替换WooCommerce产品画廊默认图片尺寸
add_filter('woocommerce_gallery_image_size', 'replace_gallery_with_square_size');
function replace_gallery_with_square_size($size) {
    return 'woocommerce-square-gallery';
}

添加后需要用「Regenerate Thumbnails」插件重新生成所有产品图片的缩略图，生成后画廊会自动使用新的正方形裁剪尺寸。

方案二：不裁剪正方形（保持原图比例，空白填充） #

方法1：Elementor自定义CSS #

保持图片原有比例，用背景色填充正方形容器的空白区域：

/* WooCommerce产品画廊正方形（不裁剪版） */
.woocommerce-product-gallery__image {
    width: 100% !important;
    padding-top: 100% !important;
    position: relative !important;
    background-color: #f5f5f5; /* 可根据需求修改背景色 */
}
.woocommerce-product-gallery__image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

复制到Elementor自定义CSS面板后，图片会在正方形容器内居中显示，空白部分用设置的背景色填充，不会裁剪图片内容。

方法2：functions.php全局代码 #

注册不裁剪的正方形尺寸，替换画廊默认尺寸：

// 注册正方形产品画廊图片尺寸（不裁剪版）
add_action('after_setup_theme', 'register_non_cropped_square_gallery_size');
function register_non_cropped_square_gallery_size() {
    add_image_size('woocommerce-square-non-cropped', 600, 600, false); // false表示不裁剪，保持原图比例
}

// 替换WooCommerce产品画廊默认图片尺寸
add_filter('woocommerce_gallery_image_size', 'replace_gallery_with_non_cropped_square');
function replace_gallery_with_non_cropped_square($size) {
    return 'woocommerce-square-non-cropped';
}

同样需要用「Regenerate Thumbnails」插件重新生成缩略图，生成后的图片会保持原有比例，最长边适配600px，短边区域留空白。

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