本文详解如何在 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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10908" title="ASP.NET 4.0电子商城"><img
src="https://img.php.cn/upload/webcode/000/000/010/176425380615859.jpg" alt="ASP.NET 4.0电子商城" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10908" title="ASP.NET 4.0电子商城">ASP.NET 4.0电子商城</a>
<p>在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者</p>
</div>
<a href="/xiazai/code/10908" title="ASP.NET 4.0电子商城" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>';
// 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 过滤器。
✅ 总结
要可靠地在购物车中显示产品属性，核心是：
- 从 $cart_item['data'] 获取真实产品对象；
- 区分普通商品与变体商品，选用最合适的 API（wc_display_product_attributes() 或 get_formatted_variation()）；
- 避免硬编码 meta 查询（如 get_post_meta(..., '_price', true)），统一使用 WC_Product 方法保证兼容性与可维护性。
此方案兼容 WooCommerce 6.0+，符合官方最佳实践，可直接用于主题子目录下的 cart.php 覆盖模板或自定义短代码逻辑中。
