WooCommerce购物车属性显示技巧

本文深入解析了在 WooCommerce 自定义购物车页面中精准展示商品图片、标题、价格及全部属性（含系统与自定义属性）的实战方案，直击开发者常遇的 `wc_display_product_attributes()` 调用失败痛点——明确指出必须传入有效的 `WC_Product` 对象（如 `$cart_item['data']`）而非商品 ID，并针对可变产品推荐更精准的 `get_formatted_variation()` 方法，同时强调安全输出、属性可见性控制及官方 API 优先原则，提供一套兼容 WooCommerce 6.0+、开箱即用且符合最佳实践的可靠解决方案。

本文详解如何在 WooCommerce 自定义购物车模板中，准确获取并展示商品图片、标题、价格及全部属性（包括自定义和系统属性），重点解决 wc_display_product_attributes() 的正确调用方式与上下文适配问题。

本文详解如何在 WooCommerce 自定义购物车模板中，准确获取并展示商品图片、标题、价格及全部属性（包括自定义和系统属性），重点解决 wc_display_product_attributes() 的正确调用方式与上下文适配问题。

在 WooCommerce 开发中，当需要完全自定义购物车（Cart）页面的渲染逻辑时，开发者常需遍历购物车项（cart items），并逐个提取商品的核心信息：缩略图、标题、数量、价格，以及关键的产品属性（Attributes）——例如“颜色”“尺寸”“材质”等。然而，许多开发者会发现，直接调用 wc_display_product_attributes( $product ) 却返回空白或报错，根本原因在于该函数依赖有效的 $product 对象上下文，且不接受任意 ID 或空值。

以下是一个经过验证、可直接集成到 cart.php 或自定义循环中的完整解决方案：

<?php
global $woocommerce;
$cart = WC()->cart;
$items = $cart->get_cart();

if ( ! empty( $items ) ) {
    foreach ( $items as $cart_item_key => $cart_item ) {
        $product_id = $cart_item['product_id'];
        $product    = $cart_item['data']; // ✅ 正确获取 WC_Product 实例（含变体属性值）
        $quantity   = $cart_item['quantity'];

        // 1. 商品图片（带链接）
        echo $product->get_image( 'woocommerce_thumbnail' );

        // 2. 商品标题 + 数量
        echo '<h3><strong>' . esc_html( $product->get_name() ) . '</strong></h3>';
        echo '<p>数量: ' . absint( $quantity ) . '</p>';

        // 3. 商品价格（使用 WC 格式化方法，支持货币符号与小数位）
        echo '<p>价格: ' . wc_price( $product->get_price() ) . '</p>';

        // 4. ✅ 关键：显示所有已选属性（含变体属性与全局属性）
        // 注意：必须传入 WC_Product 实例（非 ID！），且推荐使用 get_formatted_variation()
        if ( $product->is_type( 'variation' ) ) {
            // 变体商品：显示所选变体属性（如 "颜色: 红色 / 尺寸: L"）
            echo '<p><strong>规格:</strong> ' . wp_kses_post( $product->get_formatted_variation( array( 'show_default' => false ) ) ) . '</p>';
        } else {
            // 普通商品：显示所有已分配的属性（如分类法属性：pa_color, pa_size）
            echo '<div class="product-attributes">';
            wc_display_product_attributes( $product );
            echo '</div>';
        }
    }
} else {
    echo '<p>购物车为空。</p>';
}
?>

⚠️ 重要注意事项

• 不要传入 $product_id：wc_display_product_attributes() 严格要求第一个参数为 WC_Product 对象（如 $cart_item['data']），传入整数 ID 会导致函数静默失败。
• 变体商品优先用 get_formatted_variation()：对于可变产品（Variable Product），购物车中存储的是具体变体（WC_Product_Variation 对象），其属性值已确定，此时 get_formatted_variation() 比通用 wc_display_product_attributes() 更精准、更简洁。
• 安全输出：始终使用 esc_html()、wp_kses_post() 或 wc_price() 等 WooCommerce 官方安全函数，避免 XSS 风险与格式错误。
• 属性可见性控制：wc_display_product_attributes() 默认仅显示「前台可见」且「已设置为“在商店中显示”的属性」。如需强制显示所有属性，请扩展 woocommerce_display_product_attributes 过滤器。

✅ 总结

要可靠地在购物车中显示产品属性，核心是：

1. 从 $cart_item['data'] 获取真实产品对象；
2. 区分普通商品与变体商品，选用最合适的 API（wc_display_product_attributes() 或 get_formatted_variation()）；
3. 避免硬编码 meta 查询（如 get_post_meta(..., '_price', true)），统一使用 WC_Product 方法保证兼容性与可维护性。

此方案兼容 WooCommerce 6.0+，符合官方最佳实践，可直接用于主题子目录下的 cart.php 覆盖模板或自定义短代码逻辑中。

好了，本文到此结束，带大家了解了《WooCommerce购物车属性显示技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！