本文介绍如何修改 woocommerce 主题循环模板代码，将默认显示的商品分类替换为商品标题，并实现图片悬停时展示标题的效果。操作简单、兼容性强，适用于 woocommerce 3.0+ 版本。
本文介绍如何修改 woocommerce 主题循环模板代码，将默认显示的商品分类替换为商品标题，并实现图片悬停时展示标题的效果。操作简单、兼容性强，适用于 woocommerce 3.0+ 版本。
在 WooCommerce 商品列表（如首页推荐、分类归档页）中，许多主题会在商品图片上方或覆盖层中显示辅助信息——常见的是分类名称。但若需提升用户体验与 SEO 可读性，将悬停时展示的内容改为商品标题往往更直观有效。
你当前使用的代码片段中，
内通过条件判断调用了 wc_get_product_category_list() 或 $product->get_categories() 来输出分类，而目标是将其替换为商品标题。WooCommerce 的 WC_Product 实例（即 $product 对象）提供了标准化的 get_title() 方法，它安全返回已过滤、转义后的商品标题，兼容所有产品类型（包括简单、可变、分组等），且自动处理多语言与特殊字符。
✅ 正确替换方式如下：
<div class="bg-overlay"></div>
<a href="<?php%20the_permalink();%20?>" class="link-overlay"></a>
<div class="text-on-hover-wrap">
<?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?><?php // 替换原分类输出逻辑 → 改为显示商品标题
echo '<div class="product-title">' . esc_html( $product->get_title() ) . '</div>';
?>
⚠️ 注意事项：
- 务必使用 esc_html() 包裹 get_title() 输出：虽然 get_title() 本身已做基本过滤，但在 HTML 上下文中显式转义可进一步防止 XSS 风险；
- 确保 $product 变量在当前作用域中可用（通常在 woocommerce-loop.php 或 content-product.php 中已全局定义）；
- 若主题使用了自定义循环结构，请确认 $product 是通过 global $product 或 wc_setup_product_data() 正确初始化的；
- 样式建议：为 .product-title 添加 CSS 控制显示位置、字体大小、背景半透明遮罩等，例如：
.text-on-hover-wrap .product-title {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.7);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
✅ 总结：仅需一行核心代码替换即可完成需求，无需额外插件或复杂钩子。该方案轻量、稳定、符合 WooCommerce 官方编码规范，适用于绝大多数基于 product 循环的主题模板。
