WooCommerce结账页自定义费用计算异常（400错误）修复求助

Got it, let's fix this WooCommerce custom fee issue step by step. The 400 error almost always ties to missing security validation or misconfigured PHP hooks, so we'll tackle both frontend real-time sync and backend database storage with clean, working code.

1. Frontend Plain JavaScript (Real-Time Fee Sync) #

Replace your existing frontend code with this. It handles input changes, sends secure AJAX requests, and triggers WooCommerce's native total refresh:

document.addEventListener('DOMContentLoaded', function() {
    const customFeeInput = document.getElementById('custom-fee-input');
    const nonce = document.getElementById('custom_fee_nonce')?.value;

    if (!customFeeInput || !nonce) return;

    // Listen for input changes (covers typing and pasting)
    customFeeInput.addEventListener('input', updateCustomFee);
    customFeeInput.addEventListener('blur', updateCustomFee);

    function updateCustomFee() {
        const feeAmount = parseFloat(customFeeInput.value) || 0;
        if (isNaN(feeAmount) || feeAmount < 0) return;

        // Send AJAX request to WooCommerce's endpoint
        fetch(wc_checkout_params.ajax_url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-WP-Nonce': nonce
            },
            body: new URLSearchParams({
                action: 'update_custom_fee',
                custom_fee: feeAmount,
                security: nonce
            })
        })
        .then(response => {
            if (!response.ok) throw new Error('Request failed');
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Trigger WooCommerce's built-in checkout refresh
                document.body.dispatchEvent(new Event('update_checkout'));
            } else {
                console.error('Failed to update fee:', data.message);
            }
        })
        .catch(error => console.error('AJAX Error:', error));
    }
});

2. Backend PHP Fix (Resolve 400 Error & Database Storage) #

The 400 error is caused by missing nonce validation and incorrect hook setup. Replace your functions.php code with this:

// Add custom fee input to checkout page
add_action('woocommerce_before_order_notes', 'add_custom_fee_input_field');
function add_custom_fee_input_field($checkout) {
    // Add security nonce to prevent CSRF
    wp_nonce_field('custom_fee_action', 'custom_fee_nonce');
    
    woocommerce_form_field('custom_fee_input', array(
        'type' => 'number',
        'class' => array('form-row-wide'),
        'label' => __('Custom Fee Input', 'woocommerce'),
        'placeholder' => __('Enter custom fee amount', 'woocommerce'),
        'min' => 0,
        'step' => '0.01'
    ), $checkout->get_value('custom_fee_input'));
}

// AJAX handler to update fee (fixes 400 error)
add_action('wp_ajax_update_custom_fee', 'update_custom_fee_callback');
add_action('wp_ajax_nopriv_update_custom_fee', 'update_custom_fee_callback');
function update_custom_fee_callback() {
    // Validate nonce first (critical for security)
    if (!isset($_POST['security']) || !wp_verify_nonce($_POST['security'], 'custom_fee_action')) {
        wp_send_json_error(array('message' => 'Security validation failed'));
    }

    // Clean and validate fee amount
    $fee_amount = isset($_POST['custom_fee']) ? floatval($_POST['custom_fee']) : 0;
    if ($fee_amount < 0) {
        wp_send_json_error(array('message' => 'Invalid fee amount'));
    }

    // Store fee in WooCommerce session to persist through checkout
    WC()->session->set('custom_fee_amount', $fee_amount);

    wp_send_json_success(array('message' => 'Custom fee updated'));
}

// Add custom fee to checkout totals
add_action('woocommerce_cart_calculate_fees', 'add_custom_fee_to_totals');
function add_custom_fee_to_totals($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;

    $fee_amount = WC()->session->get('custom_fee_amount', 0);
    if ($fee_amount > 0) {
        $cart->add_fee(__('Custom Fee', 'woocommerce'), $fee_amount, true, 'standard');
    }
}

// Save custom fee to order database
add_action('woocommerce_checkout_create_order', 'save_custom_fee_to_order_meta');
function save_custom_fee_to_order_meta($order) {
    $fee_amount = WC()->session->get('custom_fee_amount', 0);
    if ($fee_amount > 0) {
        // Save as order meta for backend visibility
        $order->update_meta_data('_custom_fee_amount', $fee_amount);
        // Add as a visible line item in order details
        $order->add_fee(__('Custom Fee', 'woocommerce'), $fee_amount);
    }
}

// Clean up session after order is placed
add_action('woocommerce_thankyou', 'clear_custom_fee_session');
function clear_custom_fee_session($order_id) {
    WC()->session->__unset('custom_fee_amount');
}

3. Key Fixes Explained #

• Nonce Validation: Added proper security nonce fields and checks, which directly resolves the 400 error (your original code likely skipped this critical step).
• Session Storage: Uses WooCommerce's native session to store the fee, ensuring it persists through the entire checkout flow.
• Native Total Refresh: Triggers WooCommerce's built-in update_checkout event to refresh totals, avoiding manual DOM manipulation.
• Database Sync: Saves the fee to order meta and adds it as a visible line item, so it's stored permanently in the database and visible in the WordPress admin.

4. Testing Steps #

1. Add a product to your cart and navigate to the checkout page.
2. Enter a valid number in the "Custom Fee Input" field—you’ll see the totals update instantly.
3. Submit the order, then check the order details in your WordPress admin: the custom fee will appear as a line item and be stored in the order’s metadata.
4. Verify no 400 errors appear in your browser’s developer tools (Network tab).

内容的提问来源于stack exchange，提问作者VQH-cmd