本文详解如何通过自定义模板和 WooCommerce 产品方法，将小购物车（mini cart）中混合显示的商品名称（如“T-Shirt – 红色”）拆分为独立的标题（<h3>）和变体（<span>），实现语义化、可样式化的 HTML 结构。

本文详解如何通过自定义模板和 woocommerce 产品方法，将小购物车（mini cart）中混合显示的商品名称（如“t-shirt – 红色”）拆分为独立的标题（`

`）和变体（``），实现语义化、可样式化的 html 结构。

要在 WooCommerce 小购物车中精准分离商品主标题与变体描述（例如将 "My Product - Green" 拆解为 <h3>My Product</h3> - <span>Green</span>），不能直接修改 wp_kses_post( $product_name ) 的输出——因为 $product_name 是已拼接的完整字符串（含变体），且经 wp_kses_post 过滤后无法安全注入额外 HTML 标签。

✅ 正确做法是：绕过 $product_name，改用 WooCommerce 原生产品对象方法分别获取标题与变体信息。

步骤一：复制并覆盖 mini-cart.php 模板

将 WooCommerce 默认模板文件 wp-content/plugins/woocommerce/templates/cart/mini-cart.php 复制到你的主题目录下：
your-theme/woocommerce/cart/mini-cart.php
（确保主题已启用 WooCommerce 支持）

步骤二：定位并增强产品数据获取逻辑

在 mini-cart.php 中，找到类似以下的条件判断块（通常在循环内）：

if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) {

在此行下方添加：

// 获取纯净商品标题（不含变体）
$product_title = $_product->get_name(); // 注意：此处推荐用 get_name() + 手动解析，或更稳妥使用 get_title()

// 获取变体选项文本（仅适用于变体商品）
$variation_name = '';
if ( $_product->is_type( 'variation' ) && isset( $cart_item['variation'] ) ) {
    $variation_name = wc_get_formatted_variation( $cart_item['variation'], true );
}

⚠️ 注意：$_product->get_title() 在某些版本中可能返回带 SKU 的标题，而 get_name() 更可靠；但 get_name() 仍会包含变体名。因此推荐使用 wc_get_formatted_variation() 提取变体，并从原始标题中剥离它。

步骤三：重构链接内的 HTML 结构

找到原渲染代码（通常在 <a> 标签内）：

<a href="<?php echo esc_url( $product_permalink ); ?>">
    <?php echo $thumbnail . wp_kses_post( $product_name ); ?>
</a>

替换为结构化输出：

<a class="minicart-product-title" href="<?php echo esc_url( $product_permalink ); ?>">
    <?php echo $thumbnail; ?>
    <h3><?php echo esc_html( $_product->get_name() ); ?></h3>
    <?php if ( $variation_name ) : ?>
        <span class="minicart-variation"><?php echo wp_kses_post( $variation_name ); ?></span>
    <?php endif; ?>
</a>

✅ 最终效果 HTML 示例：

<a class="minicart-product-title" href="https://yoursite.com/product/t-shirt/">
  <div class="minicart-image">
    <img width="128" height="100" src="..." alt="" loading="lazy">
  </div>
  <h3>T-Shirt</h3>
  <span class="minicart-variation">Color: Red, Size: M</span>
</a>

? 补充说明与最佳实践

• 安全性：esc_html() 用于纯文本标题，wp_kses_post() 用于可能含简单格式（如 <br>）的变体描述，确保 XSS 防护。
• 兼容性：wc_get_formatted_variation() 是 WooCommerce 官方推荐方式，自动适配多属性、翻译及分隔符（如 Color: Red / Size: M）。
• 样式控制：为 .minicart-product-title h3 和 .minicart-variation 单独添加 CSS，实现灵活布局（如 inline-flex、margin 调整等）。
• 非变体商品兼容：$variation_name 为空时自动隐藏 <span>，不影响普通商品显示。

通过此方案，你不仅实现了标题与变体的语义分离，还提升了前端可维护性与无障碍访问支持（screen reader 可分别识别主标题与规格），是 WooCommerce 主题开发中的标准实践。