WooCommerce结账区块自定义配送方式：选择值无法传递至PHP的问题

核心问题原因 #

1. Checkout Block 不兼容传统表单逻辑
   你的代码依赖传统的<form class="checkout">和checkout_place_order事件，但WooCommerce新的Checkout Block是基于React构建的单页组件，没有传统的表单提交流程，绑定的事件不会触发，导致动态添加的隐藏字段无法被提交到后台。

2. Option标签语法错误
   在fetch_sf_express_service_points函数中，生成option的代码存在引号闭合错误：

   $html .= '<option value="' . esc_attr(trim($parts[0])) . '">' . esc_html(trim($parts[1])) . '</option>';
   

   这里的">会导致value属性未正确闭合，浏览器解析后value会包含多余的引号，导致选中的值不符合预期，甚至无法被正确识别。

3. 未通过官方API注册结账字段
   无论是传统结账还是Block结账，WooCommerce都要求自定义字段通过官方过滤器或API注册，系统才会自动处理字段的验证、保存和传递。直接通过JS添加DOM元素的方式，在Block结账中无法被React状态管理捕获，自然不会被提交。

解决建议 #

1. 修复Option标签语法错误 #

修改fetch_sf_express_service_points函数中的option生成代码，确保引号正确闭合：

$html .= '<option value="' . esc_attr(trim($parts[0])) . '">' . esc_html(trim($parts[1])) . '</option>';

将">替换为">，保证value属性正常解析。

2. 适配Checkout Block的字段添加方式 #

方案一：PHP注册字段（兼容传统与Block结账）

通过woocommerce_checkout_fields过滤器注册字段，让WooCommerce自动处理字段的渲染和提交：

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['shipping']['sf_express_service_point'] = array(
        'label'       => __('SF Express Service Point', 'sf_express'),
        'required'    => false,
        'type'        => 'select',
        'class'       => array('form-row-wide'),
        'options'     => array('' => __('Select a service point', 'sf_express')),
        'priority'    => 60,
    );
    return $fields;
});

修改JS代码，控制已注册字段的显示/隐藏并填充选项：

function updateServicePointField() {
    $.ajax({
        url: sf_express_params.ajax_url,
        type: 'POST',
        data: { action: 'fetch_sf_express_service_points' },
        success: function(response) {
            $('select#sf_express_service_point').append(response);
        }
    });
}

function toggleServicePointField() {
    const isSFSelected = $('input[name="shipping_method[0]"]:checked').val() === 'sf_express';
    $('p.form-row.sf_express_service_point').toggle(isSFSelected);
    if (isSFSelected) updateServicePointField();
}

$(document).ready(function() {
    toggleServicePointField();
    $(document).on('change', 'input[name="shipping_method[0]"]', toggleServicePointField);
});

方案二：使用WooCommerce Blocks扩展API（纯Block环境）

针对纯Block结账场景，使用官方扩展API创建自定义字段：

1. 创建sf-express-block.js：

import { registerCheckoutBlockExtension } from '@woocommerce/blocks-registry';
import { useEffect, useState } from '@wordpress/element';
import { SelectControl } from '@wordpress/components';

const SFExpressServicePoint = ({ checkoutExtensionData }) => {
    const [servicePoints, setServicePoints] = useState([{ label: 'Select a service point', value: '' }]);
    const [selectedPoint, setSelectedPoint] = useState('');

    useEffect(() => {
        fetch(sf_express_params.ajax_url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({ action: 'fetch_sf_express_service_points' })
        })
        .then(res => res.text())
        .then(html => {
            const doc = new DOMParser().parseFromString(html, 'text/html');
            const options = Array.from(doc.querySelectorAll('option')).map(opt => ({
                label: opt.textContent,
                value: opt.value
            }));
            setServicePoints([...servicePoints, ...options]);
        });
    }, []);

    useEffect(() => {
        checkoutExtensionData.updateExtensionData(
            'sf_express',
            'service_point',
            selectedPoint
        );
    }, [selectedPoint]);

    const shippingMethod = checkoutExtensionData.getExtensionData('shipping', 'selectedRateId');
    if (!shippingMethod?.includes('sf_express')) return null;

    return (
        <div className="sf-express-service-point">
            <SelectControl
                label="SF Express Service Point"
                value={selectedPoint}
                options={servicePoints}
                onChange={setSelectedPoint}
            />
        </div>
    );
};

registerCheckoutBlockExtension('woocommerce/checkout-shipping-methods-block', {
    extensionName: 'sf_express_service_point',
    component: SFExpressServicePoint,
});

2. 在PHP中注册脚本：

add_action('enqueue_block_assets', function() {
    if (is_checkout()) {
        wp_enqueue_script(
            'sf-express-block',
            plugins_url('/sf-express-block.js', __FILE__),
            array('wp-element', 'wp-components', 'wc-blocks-registry'),
            '1.0',
            true
        );
        wp_localize_script('sf-express-block', 'sf_express_params', array(
            'ajax_url' => admin_url('admin-ajax.php')
        ));
    }
});

3. 从Block扩展数据中获取值：

add_action('woocommerce_checkout_create_order', function($order, $data) {
    $servicePoint = isset($data['extensions']['sf_express']['service_point']) ? $data['extensions']['sf_express']['service_point'] : '';
    
    if (!empty($servicePoint)) {
        $order->update_meta_data('sf_express_service_point', sanitize_text_field($servicePoint));
        $order->add_order_note('SF Express Service Point: ' . $servicePoint);
    }
}, 10, 2);

3. 适配字段验证逻辑 #

修改woocommerce_checkout_process钩子，同时兼容传统和Block结账的提交方式：

add_action('woocommerce_checkout_process', function() {
    $servicePoint = '';
    $shippingMethod = '';

    // 处理传统表单提交
    if (isset($_POST['sf_express_service_point'])) {
        $servicePoint = $_POST['sf_express_service_point'];
        $shippingMethod = isset($_POST['shipping_method'][0]) ? $_POST['shipping_method'][0] : '';
    }

    // 处理Block结账的JSON请求
    if (wp_is_json_request()) {
        $requestBody = json_decode(file_get_contents('php://input'), true);
        $servicePoint = isset($requestBody['extensions']['sf_express']['service_point']) ? $requestBody['extensions']['sf_express']['service_point'] : '';
        $shippingMethod = isset($requestBody['shippingRate']['id']) ? $requestBody['shippingRate']['id'] : '';
    }

    if (empty($servicePoint) && $shippingMethod === 'sf_express') {
        wc_add_notice(__('Please select an SF Express Service Point.', 'sf_express'), 'error');
    }
});

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