Bricks 移除 WooCommerce 产品图库中的特色图片

问题背景

WooCommerce 的单产品页上有一个产品图库（Product Gallery），默认情况下它会把产品的特色图片（Featured Image）也渲染进图库，作为第一张图。

这在大多数场景下是合理的，但有些站点希望图库只展示附加图库图片——比如特色图已经在页面其他地方（Breadcrumb 上方的大图、自定义 Hero 区）单独展示过了，图库里再出现一张一模一样的就重复了。

Bricks 的产品图库元素底层渲染逻辑，对应文件是 /wp-content/themes/bricks/includes/woocommerce/elements/product-gallery.php，它复用了 WooCommerce 的标准图库输出。所以我们可以用 WooCommerce 官方的过滤器来干预。

解决方案：一个过滤器

在子主题的 functions.php 或代码片段插件中加入：

add_filter( 'woocommerce_single_product_image_thumbnail_html', function ( $html, $post_thumbnail_id ) {
	global $product;

	if ( $post_thumbnail_id === $product->get_image_id() )
		$html = '';

	return $html;
}, 10, 2 );

保存后刷新产品页，图库中的特色图就消失了，只剩附加图库图片。

原理说明

woocommerce_single_product_image_thumbnail_html 是 WooCommerce 渲染单产品页图库每一张缩略图时都会触发的过滤器，带两个参数：

• $html：当前缩略图的 HTML 输出；
• $post_thumbnail_id：当前这张图片的附件 ID。

我们拿它和 $product->get_image_id()（当前产品的特色图 ID）对比：如果一致，说明这张图就是特色图，直接把 $html 置空字符串丢弃；否则原样放行。这样其他附加图库图片完全不受影响。

小结

这个需求本质上是“过滤掉图库里的特定图片”，用 WooCommerce 官方过滤器一行判断就能完成，不需要动 Bricks 模板结构，也不需要 jQuery 在渲染后隐藏元素（那样图片还是会被加载，浪费带宽）。

如果你还想做更细的定制——比如只移除某个特定 ID 的图片、或者对移动端和桌面端区别处理——都是在 $html 返回前做条件判断的事，原理完全一致。