本文详解如何通过自定义 mini-cart.php 模板和使用 get_title() 方法，将小购物车中合并显示的产品名称（如“my product - green”）拆分为独立的标题（）和变体（），实现语义化、可样式化的 HTML 结构。

本文详解如何通过自定义 `mini-cart.php` 模板和使用 `get_title()` 方法，将小购物车中合并显示的产品名称（如“my product - green”）拆分为独立的标题（`

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

在 WooCommerce 默认的小购物车（Mini Cart）中，产品项的标题由 wp_kses_post( $product_name ) 渲染，而 $product_name 通常来自 WC_Cart_Item::get_formatted_name() —— 它会将产品主标题与变体属性（如颜色、尺寸）拼接为单一字符串（例如 "My Product - Green"）。若需结构化控制（如为标题加

、为变体加 并单独样式化），直接修改 $product_name 不可行，因其已转义且含 HTML。

✅ 正确做法是：绕过 $product_name，改用原生产品对象获取纯净标题与变体数据。

步骤一：复制并覆盖模板文件

将 WooCommerce 插件中的 woocommerce/cart/mini-cart.php 复制到您的主题目录下：
your-theme/woocommerce/cart/mini-cart.php
（确保已启用子主题或正确路径，避免插件更新时丢失修改）

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

在 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_title();

// 获取变体描述（仅对变体产品有效；简单产品返回空字符串）
$variation_description = '';
if ( $_product->is_type( 'variation' ) && isset( $cart_item['variation'] ) && ! empty( $cart_item['variation'] ) ) {
    $variation_description = wc_get_formatted_variation( $cart_item['variation'], true );
}

⚠️ 注意：$_product->get_title() 返回的是未转义的原始标题（如 "My Product"），安全起见，应在输出前使用 esc_html()；而 wc_get_formatted_variation() 已做适当转义，可直接输出。

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

找到原渲染行（通常在 标签内）：

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

将其替换为结构化输出：

<a class="minicart-product-title" href="<?php%20echo%20esc_url(%20%24product_permalink%20);%20?>">
    <?php echo $thumbnail; // 缩略图保持不变 ?><h3><?php echo esc_html( $product_title ); ?></h3>
    <?php if ( ! empty( $variation_description ) ) : ?><span class="minicart-variation"><?php echo wp_kses_post( $variation_description ); ?></span>
    <?php endif; ?></a>

✅ 最终效果 HTML 示例：

<a class="minicart-product-title" href="https://yoursite.com/product/my-product/">
  <div class="minicart-image">
    <img    style="max-width:90%"   style="max-width:90%" src="..." alt="" loading="lazy">
</div>
  <h3>My Product</h3>
  <span class="minicart-variation">Green, Size: M</span>
</a>

? 补充说明与注意事项：

• 不要直接修改 $product_name 或尝试 str_replace 分割：变体分隔符（如 -）可能出现在标题或属性值中，不可靠；
• get_title() vs get_name()：get_name() 等同于默认 $product_name，含变体；get_title() 仅返回 post_title，更干净；
• 兼容性保障：该方案兼容所有产品类型（简单、变体、组合等），对非变体产品，$variation_description 自动为空，不会渲染 ；
• 样式建议：可通过 CSS 精准控制

  和 .minicart-variation 的字体、间距与颜色，提升可访问性与设计灵活性。

完成以上修改后，刷新缓存即可生效。此方法不依赖钩子、不改动核心，符合 WooCommerce 主题覆盖最佳实践，便于长期维护。