WooCommerce基于Google Map API按距离自定义配送费率：前端计算费用后更新Flat Rate的技术实现问询

Let's walk through this step by step—since you're stuck on moving that front-end $6.47 cost to update your Flat Rate shipping, and can't use plugins, here's a custom code approach that works with WooCommerce:

1. Front-End: Send Calculated Cost to Backend via AJAX #

First, once you've computed the distance-based shipping cost in your Google Places modal script, you need to send that value to your WordPress backend. We'll use a secure AJAX request with WooCommerce's built-in session handling.

Add this to your front-end script (right after you calculate the shippingCost variable):

// Grab the WooCommerce nonce for security (it's already on the checkout page)
const wcNonce = document.querySelector('input[name="woocommerce-process-checkout-nonce"]').value;

// Send the calculated shipping cost to the backend
fetch('/wp-json/custom-shipping/v1/update-cost', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-WP-Nonce': wcNonce
  },
  body: JSON.stringify({
    shipping_cost: shippingCost // Your calculated cost (e.g., 6.47)
  })
})
.then(response => response.json())
.then(data => {
  if (data.success) {
    // Trigger checkout refresh to show the updated shipping rate
    jQuery('body').trigger('update_checkout');
  } else {
    console.error('Failed to update shipping cost:', data.message);
  }
})
.catch(error => console.error('AJAX request error:', error));

2. Backend: Register a Secure REST Endpoint to Receive the Cost #

Next, create a custom REST API endpoint in WordPress to accept the front-end data and store it in the user's checkout session. Add this to your theme's functions.php file or a custom code snippet:

add_action('rest_api_init', function() {
  register_rest_route('custom-shipping/v1', '/update-cost', array(
    'methods' => 'POST',
    'callback' => 'custom_shipping_update_cost',
    'permission_callback' => function() {
      // Validate nonce and ensure user is on the checkout page
      if (!wp_verify_nonce($_SERVER['HTTP_X_WP_NONCE'], 'woocommerce-process-checkout')) {
        return new WP_Error('invalid_nonce', 'Security check failed', array('status' => 403));
      }
      return is_checkout();
    }
  ));
});

function custom_shipping_update_cost(WP_REST_Request $request) {
  $shipping_cost = $request->get_param('shipping_cost');
  
  // Make sure the cost is a valid positive number
  if (!is_numeric($shipping_cost) || $shipping_cost < 0) {
    return rest_ensure_response(array(
      'success' => false,
      'message' => 'Invalid shipping cost value'
    ));
  }
  
  // Store the cost in WooCommerce's user session
  if (WC()->session) {
    WC()->session->set('custom_shipping_cost', floatval($shipping_cost));
  }
  
  return rest_ensure_response(array(
    'success' => true
  ));
}

3. Backend: Override Flat Rate Cost Using WooCommerce Hooks #

Finally, use WooCommerce's woocommerce_package_rates filter to update the Flat Rate shipping method with our stored cost. Add this to your functions.php too:

add_filter('woocommerce_package_rates', 'custom_shipping_override_flat_rate', 10, 2);

function custom_shipping_override_flat_rate($rates, $package) {
  // Pull the stored custom cost from the session
  $custom_cost = WC()->session->get('custom_shipping_cost');
  
  // Only update if we have a valid cost
  if (!empty($custom_cost)) {
    foreach ($rates as $rate_id => $rate) {
      // Target the Flat Rate method (adjust method ID if your Flat Rate has a custom ID)
      if ('flat_rate' === $rate->method_id) {
        // Update the base cost
        $rates[$rate_id]->cost = $custom_cost;
        
        // Optional: Update the label to show it's distance-based
        $rates[$rate_id]->label = 'Flat Rate (Distance Calculated): $' . number_format($custom_cost, 2);
        
        // Clear any auto-calculated taxes if you want to handle them separately
        $rates[$rate_id]->taxes = array();
      }
    }
  }
  
  // Bust WooCommerce's shipping cache to ensure changes show up immediately
  foreach ($rates as $rate) {
    $rate->set_meta_data('cache_key', microtime());
  }
  
  return $rates;
}

Quick Tips: #

• Security First: The nonce check prevents unauthorized requests—never skip this.
• Session Persistence: WooCommerce's session keeps the cost tied to the user's checkout session, so it won't get lost if they refresh the page.
• Address Updates: If the user edits their address, re-run your distance calculation, re-send the updated cost via AJAX, and trigger update_checkout again to refresh rates.

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