代码中调整WooCommerce产品缩略图宽高比例的方法

为了在您的目录中显示图像，WooCommerce 注册了一些图像尺寸，这些尺寸定义了要使用的实际图像尺寸。这些尺寸包括：

• woocommerce_thumbnail– 在商店页面等地方的产品“网格”中使用。
• woocommerce_single– 用于单个产品页面。
• woocommerce_gallery_thumbnail– 用于单品页面主图下方切换图库。

woocommerce_single显示上传的完整产品图像，因此默认情况下始终未裁剪。它默认为 600px 宽度。

woocommerce_gallery_thumbnail总是方形裁剪，默认为 100×100 像素。这用于在图库中导航图像。

woocommerce_thumbnail默认为 300px 宽度，方形裁剪，因此产品网格看起来很整洁。店主可以自定义裁剪的纵横比。

重要的是要注意，尽管设置了实际的图像宽度，但主题最终可以改变使用 CSS 显示图像的大小，并且图像宽度可能受到产品网格/列宽的限制。

主题可以定义图像大小

从 WooCommerce 3.3.0 开始，主题可以声明在声明 WooCommerce 支持时应使用的大小。如果主题定义了图像尺寸（宽度），店主将无法更改它们，但定义的尺寸应该是主题的最佳尺寸。

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 500,
) );

当调用需要图像大小的 WordPress 函数时，例如wp_get_attachment_image_src，您应该使用图像大小名称 – 这些是：

• woocommerce_thumbnail
• woocommerce_single
• woocommerce_gallery_thumbnail

店主仍然可以控制纵横比和裁剪（见下文）。

在定制器中自定义图像大小

定制器包含在 WooCommerce 中控制缩略图的选项。

如果主题声明图像大小，则顶部将被隐藏，只有裁剪选项可见。

更改裁剪选项或宽度将更新右侧的预览以显示事物的外观。在定制器“发布”并且缩略图重新生成到新尺寸之前，客户将看不到更改。

定制器中的缩略图裁剪部分允许商店所有者为目录中的图像选择三种裁剪比例设置之一：

• 1:1（方形裁剪）
• 自定义（店主可以输入自定义纵横比）
• 未裁剪（保留原图像的纵横比）

然后根据所选的裁剪选项和图像宽度计算实际图像尺寸。

通过钩子改变图像大小

虽然主题可以将图像大小固定为特定宽度，并且商店所有者可以控制宽度和纵横比，但如果您需要对缩略图大小进行更多控制，则可以使用一些挂钩。

WooCommerce 使用该wc_get_image_size函数来获取图像大小尺寸。this 的返回值通过过滤器传递：

woocommerce_get_image_size_{SIZE_NAME_WITHOUT_WOOCOMMERCE_PREFIX}

如果使用此钩子，您将收到一个大小数组，类似于：

array(
'width' => 200,
'height' => 200,
'crop' => 1,
)

例如，如果我想将图库缩略图更改为 150×150 像素的未裁剪图像，您可以使用以下代码：

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );

我们不建议插件和主题走这条路，因为它会移除店主的控制权，并且他们的设置不会受到尊重，但店主可以选择。

注意：更改图像尺寸后，您可能需要重新生成缩略图，以便将新尺寸用于现有图像。

通过钩子更改 WooCommerce 中使用的图像大小

除了上面的钩子，WooCommerce 中的一些模板函数通过过滤器运行图像大小，因此您可以使用 WooCommerce 注册图像大小以外的东西。

注意： full是 WordPress 注册的大小，设置在Settings > Media.

例如，假设我想让画廊缩略图大小使用thumbnailWordPress 注册的大小，而不是woocommerce_gallery_thumbnail. 以下片段可以完成这项工作：

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return 'thumbnail';
} );

注意：上面列出的钩子由 WooCommerce 核心使用。如果一个主题有自定义模板文件或使用它自己的函数来输出图像，这些过滤器可能不会被使用。