WooCommerce单产品Ajax添加购物车含自定义数据：请求200未生效

你的代码存在几个核心问题，导致商品无法加入购物车：

1. 请求数据格式不兼容 #

你在JS中用JSON.stringify()发送JSON格式数据，但PHP的$_POST默认仅解析application/x-www-form-urlencoded或multipart/form-data格式的请求体，因此后端无法获取到你发送的参数，自然无法执行加购操作。

2. 无效的商品ID #

你传入的product_id是字符串'123ABC'，后端用intval()转换后会变成0，WooCommerce无法识别ID为0的商品，直接导致加购失败。

3. 缺少Nonce安全验证 #

WordPress AJAX请求要求验证nonce（安全令牌），否则可能被安全机制拦截，这也是WP开发的强制最佳实践。

4. 请求URL使用不当 #

你通过wc_add_to_cart_params构造URL，但已经通过wp_localize_script传递了正确的ajax_object.ajax_url，直接使用该URL更可靠。

修正后的代码 #

1. 前端JS代码（add-to-cart-ajax.js） #

document.addEventListener('DOMContentLoaded', () => {
  const ADD_TO_CART = document.getElementById('add-to-cart');
  // 使用localize传递的正确AJAX地址
  const URL = ajax_object.ajax_url;

  ADD_TO_CART.addEventListener('click', (e) => {
    e.preventDefault();
    ADD_TO_CART.disabled = true;

    const FORM_DATA = new FormData();
    // 加入nonce验证
    FORM_DATA.append('security', ajax_object.nonce);
    FORM_DATA.append('action', 'add_to_cart');
    FORM_DATA.append('quantity', 1);
    // 改为有效的数字商品ID
    FORM_DATA.append('product_id', 123);
    FORM_DATA.append('height', '96 in.');
    FORM_DATA.append('width', '120 in.');
    FORM_DATA.append('totalArea', '80 sq ft');
    FORM_DATA.append('cost', '$636.00');
    FORM_DATA.append('numPanels', 5);
    FORM_DATA.append('enteredHeight', '96 in.');
    FORM_DATA.append('enteredWidth', '120 in.');

    fetch(URL, {
      method: 'POST',
      body: FORM_DATA
    })
    .then(response => response.json())
    .then(data => {
      console.log('操作结果:', data);
      // 可选：更新购物车UI
      if(data.success) {
        alert('商品已加入购物车');
        ADD_TO_CART.disabled = false;
      } else {
        alert('加购失败：' + data.message);
        ADD_TO_CART.disabled = false;
      }
    })
    .catch(error => {
      console.error('请求错误:', error);
      ADD_TO_CART.disabled = false;
    });
  });
});

2. 后端PHP代码（functions.php） #

function add_to_cart() {
  // 验证nonce
  if (!isset($_POST['security']) || !wp_verify_nonce($_POST['security'], 'ajax_nonce')) {
    wp_send_json_error(array('message' => '安全验证失败'));
  }

  $product_id = intval($_POST['product_id']);
  // 检查商品ID是否有效
  if ($product_id <= 0 || !wc_get_product($product_id)) {
    wp_send_json_error(array('message' => '无效的商品ID'));
  }

  $quantity = intval($_POST['quantity']);
  $height = sanitize_text_field($_POST['height']);
  $width = sanitize_text_field($_POST['width']);
  $totalArea = sanitize_text_field($_POST['totalArea']);
  $cost = sanitize_text_field($_POST['cost']);
  $numPanels = intval($_POST['numPanels']);
  $enteredHeight = sanitize_text_field($_POST['enteredHeight']);
  $enteredWidth = sanitize_text_field($_POST['enteredWidth']);

  // 执行加购并检查结果
  $cart_item_key = WC()->cart->add_to_cart(
    $product_id,
    $quantity,
    0,
    array(),
    array(
      'height' => $height,
      'width' => $width,
      'totalArea' => $totalArea,
      'cost' => $cost,
      'numPanels' => $numPanels,
      'enteredHeight' => $enteredHeight,
      'enteredWidth' => $enteredWidth
    )
  );

  if ($cart_item_key) {
    wp_send_json_success(array('message' => '商品已加入购物车', 'cart_item_key' => $cart_item_key));
  } else {
    wp_send_json_error(array('message' => '加购失败，请检查商品状态'));
  }

  wp_die();
}
add_action('wp_ajax_add_to_cart', 'add_to_cart');
add_action('wp_ajax_nopriv_add_to_cart', 'add_to_cart');

function enqueue_add_to_cart_script() {
  if(function_exists('is_product') && is_product()) {
    wp_enqueue_script('add_to_cart', get_stylesheet_directory_uri() . '/js/add-to-cart-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('add_to_cart', 'ajax_object', array(
      'ajax_url' => admin_url('admin-ajax.php'),
      'nonce' => wp_create_nonce('ajax_nonce')
    ));
  }
}
add_action('wp_enqueue_scripts', 'enqueue_add_to_cart_script');

3. 按钮代码（调整函数名避免冲突） #

<?php
function add_to_cart_button() { ?>
  <button id="add-to-cart">Add to Cart</button>
<?php }
// 可在产品模板中添加调用，例如：
// add_action('woocommerce_single_product_summary', 'add_to_cart_button', 30);

额外说明 #

• 确保商品ID是有效的数字（可在WooCommerce产品列表中查看ID）；
• 加购后可通过WooCommerce前端API更新页面购物车显示；
• 若需在购物车/结算页显示自定义字段，可通过woocommerce_get_item_data钩子实现。

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