本文介绍如何在 woocommerce 中为商品同时展示“元/平方米”和“元/整箱”两种价格形式，且确保购物车与结算始终按整箱价格计费，适用于地板、瓷砖等按面积销售但以固定规格箱体出货的场景。
本文介绍如何在 woocommerce 中为商品同时展示“元/平方米”和“元/整箱”两种价格形式，且确保购物车与结算始终按整箱价格计费，适用于地板、瓷砖等按面积销售但以固定规格箱体出货的场景。
在实际建材类电商中，常见一种混合定价逻辑：商品主标价为“¥100/m²”，但实际销售单位是“一整箱（含1.7m²）”，售价为¥170/箱。此时需在前端清晰呈现双重价格信息——既体现单位面积成本便于客户比价，又明确结算单位避免歧义；而后台必须确保购物车添加、订单生成、支付计算均严格基于整箱价格（即 1 件 = 1 箱 = ¥170），而非按面积折算。
实现该需求的核心在于三步分离：
✅ 扩展商品元数据：新增自定义字段 _number_in_package（单位：m²/箱），用于存储每箱所含面积；
✅ 增强管理界面：在商品编辑页「库存」选项卡下添加该字段输入框（仅对简单商品可见）；
✅ 前端智能展示：在商品详情页摘要区动态输出“¥X/m²”与“¥Y/箱”双价格，并保持原价（$product->get_price_html()）仍代表整箱售价。
以下是完整可部署代码（建议放入子主题 functions.php 或专用插件中）：
// 1. 在商品编辑页添加「每箱面积（m²）」字段（仅简单商品）
add_action('woocommerce_product_options_inventory_product_data', function() {
woocommerce_wp_text_input([
'id' => '_number_in_package',
'label' => __('每箱面积 (m²)', 'textdomain'),
'description' => __('例如：1.7 表示每箱含 1.7 平方米', 'textdomain'),
'wrapper_class' => 'show_if_simple',
'type' => 'number',
'step' => '0.01',
'min' => '0.01'
]);
});
// 2. 保存自定义字段值
add_action('woocommerce_process_product_meta', function($post_id) {
if (isset($_POST['_number_in_package'])) {
$product = wc_get_product($post_id);
$area_per_box = floatval($_POST['_number_in_package']);
if ($area_per_box > 0) {
$product->update_meta_data('_number_in_package', $area_per_box);
$product->save();
}
}
});
// 3. 前端显示双价格（位于商品标题下方、价格上方）
add_action('woocommerce_single_product_summary', function() {
global $product;
$area_per_box = $product->get_meta('_number_in_package');
$regular_price = $product->get_regular_price();
$sale_price = $product->get_sale_price();
$display_price = $sale_price ? $sale_price : $regular_price;
if ($area_per_box && $display_price > 0) {
$unit_price = round($display_price / $area_per_box, 2);
echo '<div class="woocommerce-unit-price" style="margin:1em 0; padding:0.5em; background:#f9f9f9; border-left:3px solid #007cba;">';
echo '<span class="unit-price-label" style="font-size:0.9em; color:#666;">参考单价：</span>';
echo '<span class="unit-price-value" style="font-weight:bold; color:#007cba;">¥' . esc_html($unit_price) . '/m²</span>';
echo ' ｜ ';
echo '<span class="box-price-label" style="font-size:0.9em; color:#666;">整箱售价：</span>';
echo '<span class="box-price-value" style="font-weight:bold; color:#d32f2f;">¥' . esc_html($display_price) . '/箱</span>';
echo '</div>';
}
}, 8); // 插入在默认价格显示之前（默认 priority 是 10）
⚠️ 关键注意事项：
- 此方案不修改结算逻辑：WooCommerce 默认以商品
price为计费基准，因此务必确保商品「常规价格」或「促销价格」设置为整箱售价（如 ¥170），而非单平方米价格； - 自定义字段
_number_in_package仅用于展示与辅助计算，不影响库存、运费或税费逻辑； - 如需在商品列表页（Shop Loop）也显示双价格，可将第 3 步钩子替换为
woocommerce_after_shop_loop_item_title，并调整 CSS 样式； - 建议配合 CSS 进行视觉优化（如上例已内联基础样式），确保移动端友好；
- 若涉及变体商品（Variable Product），需额外扩展逻辑至变体级别（通过
woocommerce_variation_options_pricing钩子）。
通过以上实现，您既能满足客户对单位成本的透明化需求，又能保障订单履约的准确性——真正实现“看得清、买得准、结得对”。
