本文介绍在 WooCommerce 单商品页中，通过 PHP 函数根据自定义属性（如 type-2）的变体值（如 repaired 或 never-repaired）动态输出对应 Banner 图片的完整实现方案，含代码、逻辑说明与健壮性注意事项。
本文介绍在 woocommerce 单商品页中，通过 php 函数根据自定义属性（如 `type-2`）的变体值（如 `repaired` 或 `never-repaired`）动态输出对应 banner 图片的完整实现方案，含代码、逻辑说明与健壮性注意事项。
在 WooCommerce 中，当商品使用自定义属性（例如 type-2）作为变体标识时，常需根据用户所选变体实时更新页面视觉元素——如侧边栏 Banner 图片。以下是一个专业、可复用的解决方案，适用于单商品页（single-product.php）或通过钩子挂载到侧边栏区域（如 woocommerce_sidebar）。
✅ 核心实现逻辑
函数 image_by_variation() 通过 $product->get_attribute('type-2') 获取当前商品该属性的前台显示值（注意：此方法返回的是格式化后的字符串，非原始 taxonomy term slug），再进行精确字符串比对，分别输出对应图片 HTML。
function image_by_variation() {
global $product;
// 获取 type-2 属性的前台显示值（如 'repaired' 或 'never-repaired'）
$type = $product->get_attribute('type-2');
// 若属性为空或未设置，直接退出，避免输出无效内容
if (empty($type)) {
return;
}
// 使用严格相等（===）确保类型与值均匹配，防止意外触发
if ('repaired' === $type) {
echo '<div class="var_img"><img src="https://ksa.revent.store/wp-content/uploads/2022/09/repaired.png?x-oss-process=image/resize,p_40" alt="Repaired version banner" style="max-width:90%" style="max-width:90%"></div>';
return;
}
if ('never-repaired' === $type) {
echo '<div class="var_img"><img src="https://ksa.revent.store/wp-content/uploads/2022/09/never-repaired.png?x-oss-process=image/resize,p_40" alt="Never-repaired version banner" style="max-width:90%" style="max-width:90%"></div>';
return;
}
}
// 挂载到商品页侧边栏（示例位置，可根据主题调整）
add_action('woocommerce_sidebar', 'image_by_variation');
⚠️ 重要注意事项
-
属性值来源确认：
$product->get_attribute()返回的是「前台展示值」（即 attribute 的 Visible on the product page 值），而非数据库 term slug。若你在后台将repaired的「名称」设为“已修复”，则此处获取到的是“已修复”，需同步调整判断条件。 -
多值属性兼容性：若
type-2属性允许多选（如 checkbox 类型），get_attribute()可能返回逗号分隔字符串（如"repaired, never-repaired"）或数组。此时应改用wp_get_post_terms()并配合in_array()判断：$terms = wp_get_post_terms($product->get_id(), 'pa_type-2', ['fields' => 'slugs']); if (is_array($terms) && in_array('repaired', $terms)) { /* ... */ } -
图片路径建议：生产环境请使用
wp_get_attachment_image_src()或wp_get_attachment_url()关联媒体库图片，提升可维护性与 CDN 兼容性；示例中直接使用 URL 仅为简化演示。 -
前端交互增强（进阶）：上述代码仅在页面加载时生效。如需用户切换变体后实时更新图片，需结合
found_variationjQuery 事件 + AJAX 或前端 JS 动态替换 DOM（WooCommerce 默认变体选择器会触发show_variation事件）。
✅ 总结
该方案轻量、可靠，无需插件依赖，精准满足「按变体名称切换 Banner」的核心需求。关键在于理解 get_attribute() 的行为边界，并根据实际属性配置灵活调整判断逻辑。部署前建议在子主题 functions.php 中添加，并配合 wp_reset_postdata()（如在循环中调用）确保全局变量安全。
