如何将JavaScript计算结果设为WooCommerce产品定价？

需求说明 #

我们销售瓦楞纸箱，需要在WooCommerce产品页面添加表单，让用户输入长度、宽度、高度，通过这三个值计算产品价格，并将计算结果作为最终定价加入购物车。此前咨询WooCommerce客服仅建议雇佣开发者或使用插件，未提供具体方案，现基于给定代码实现自定义解决方案。

实现步骤 #

1. 替换前端表单与计算逻辑 #

把你提供的双数相加代码，改成适配长宽高输入和定价计算的版本，同时同步更新WooCommerce的价格显示，并将计算值传递到购物车：

<!-- 自定义尺寸输入表单 -->
<form id="box-dimensions-form">
  <label for="box-length">长度 (cm):</label><br>
  <input type="number" id="box-length" name="box-length" min="1" required><br>
  <label for="box-width">宽度 (cm):</label><br>
  <input type="number" id="box-width" name="box-width" min="1" required><br>
  <label for="box-height">高度 (cm):</label><br>
  <input type="number" id="box-height" name="box-height" min="1" required><br><br>
  <button type="button" id="calculate-price-btn">计算价格</button>
</form>

<!-- 显示计算结果 -->
<p>计算后价格:</p>
<p id="calculated-price" style="font-weight: bold; color: #d7263d;"></p>

<script>
// 定价计算逻辑（示例按体积×单位单价，可自行修改公式）
function calculateBoxPrice() {
  const length = parseInt(document.getElementById('box-length').value);
  const width = parseInt(document.getElementById('box-width').value);
  const height = parseInt(document.getElementById('box-height').value);
  
  if (isNaN(length) || isNaN(width) || isNaN(height)) {
    document.getElementById('calculated-price').innerHTML = '请输入有效的尺寸数值';
    return;
  }

  // 自定义定价公式：比如每立方厘米0.02元，可根据成本调整
  const unitPrice = 0.02;
  const volume = length * width * height;
  const totalPrice = volume * unitPrice;
  
  // 格式化价格为两位小数
  const formattedPrice = totalPrice.toFixed(2);
  document.getElementById('calculated-price').innerHTML = '¥' + formattedPrice;

  // 将计算结果存入隐藏字段，用于传递到购物车
  let hiddenPriceInput = document.getElementById('custom-box-price');
  if (hiddenPriceInput) {
    hiddenPriceInput.value = formattedPrice;
  } else {
    hiddenPriceInput = document.createElement('input');
    hiddenPriceInput.type = 'hidden';
    hiddenPriceInput.id = 'custom-box-price';
    hiddenPriceInput.name = 'custom_box_price';
    hiddenPriceInput.value = formattedPrice;
    document.querySelector('.single_add_to_cart_button').parentNode.appendChild(hiddenPriceInput);
  }
}

// 绑定按钮点击事件
document.getElementById('calculate-price-btn').addEventListener('click', calculateBoxPrice);
// 输入框实时计算
document.querySelectorAll('#box-dimensions-form input').forEach(input => {
  input.addEventListener('input', calculateBoxPrice);
});
</script>

2. 配置WooCommerce产品 #

• 将目标产品设置为简单产品，在“产品数据”中设置一个基础价格（比如0元，或最小尺寸的价格），后续通过代码覆盖该价格。
• 若不想显示默认价格，可添加自定义CSS隐藏：

.single-product .price {
  display: none !important;
}

3. 添加PHP代码到主题functions.php #

通过WooCommerce钩子捕获自定义价格，确保购物车、结算页使用该价格：

// 保存自定义价格到购物车项
add_filter('woocommerce_add_cart_item_data', 'save_custom_box_price_to_cart', 10, 2);
function save_custom_box_price_to_cart($cart_item_data, $product_id) {
  if (isset($_POST['custom_box_price']) && !empty($_POST['custom_box_price'])) {
    $cart_item_data['custom_box_price'] = floatval($_POST['custom_box_price']);
    // 添加唯一键，确保不同价格生成独立购物车项
    $cart_item_data['unique_key'] = md5(microtime().rand());
  }
  return $cart_item_data;
}

// 在购物车中应用自定义价格
add_action('woocommerce_before_calculate_totals', 'set_custom_box_price_in_cart');
function set_custom_box_price_in_cart($cart) {
  if (is_admin() && !defined('DOING_AJAX')) return;

  foreach ($cart->get_cart() as $cart_item) {
    if (isset($cart_item['custom_box_price'])) {
      $cart_item['data']->set_price($cart_item['custom_box_price']);
    }
  }
}

// 购物车中显示纸箱尺寸（可选）
add_filter('woocommerce_get_item_data', 'display_box_dimensions_in_cart', 10, 2);
function display_box_dimensions_in_cart($item_data, $cart_item) {
  if (isset($_POST['box-length'], $_POST['box-width'], $_POST['box-height'])) {
    $item_data[] = array(
      'key' => '纸箱尺寸',
      'value' => $_POST['box-length'].'×'.$_POST['box-width'].'×'.$_POST['box-height'].' cm'
    );
  }
  return $item_data;
}

注意事项 #

• 定价公式可根据成本、材质、利润调整，比如加入固定加工费：const totalPrice = (volume * unitPrice) + 5;（5元固定费）。
• 可在前端代码中添加尺寸最大值限制，避免无效输入。
• 测试时需检查购物车、结算页价格是否正确，订单详情是否显示尺寸信息。

内容的提问来源于stack exchange，提问作者Sensebe