如何通过PHP在WooCommerce中创建运费与配送日期字段

以下是完整的实现步骤，包含字段添加、数据保存、后台展示及JS同步示例：

1. 向结账页面添加自定义字段 #

使用woocommerce_after_order_notes钩子，在结账备注区域后插入两个文本字段：

add_action('woocommerce_after_order_notes', 'add_custom_checkout_fields');
function add_custom_checkout_fields($checkout) {
    echo '<div id="custom_checkout_fields">';
    
    // 运费字段
    woocommerce_form_field('shipping_cost', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'label'         => __('运费 (Shipping Cost)'),
        'placeholder'   => __('输入运费金额'),
        'required'      => true, // 可根据需求修改是否必填
    ), $checkout->get_value('shipping_cost'));
    
    // 配送日期字段
    woocommerce_form_field('delivery_day', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'label'         => __('配送日期 (Delivery Day)'),
        'placeholder'   => __('输入配送日期/星期'),
        'required'      => true,
    ), $checkout->get_value('delivery_day'));
    
    echo '</div>';
}

2. 将字段值保存至订单元数据 #

通过woocommerce_checkout_create_order钩子，把前台提交的字段值存入订单数据：

add_action('woocommerce_checkout_create_order', 'save_custom_checkout_fields_to_order');
function save_custom_checkout_fields_to_order($order) {
    if (!empty($_POST['shipping_cost'])) {
        $order->update_meta_data('_shipping_cost', sanitize_text_field($_POST['shipping_cost']));
    }
    if (!empty($_POST['delivery_day'])) {
        $order->update_meta_data('_delivery_day', sanitize_text_field($_POST['delivery_day']));
    }
}

3. 在后台订单详情页展示字段 #

使用woocommerce_admin_order_data_after_billing_address钩子，在订单详情的账单区域后显示自定义字段：

add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_fields_in_order_details');
function display_custom_fields_in_order_details($order) {
    echo '<div class="address">';
    echo '<p><strong>' . __('运费') . ':</strong> ' . $order->get_meta('_shipping_cost') . '</p>';
    echo '<p><strong>' . __('配送日期') . ':</strong> ' . $order->get_meta('_delivery_day') . '</p>';
    echo '</div>';
}

4. （可选）在后台订单列表添加自定义列 #

如果需要在订单列表直接查看这两个字段，添加以下代码：

// 新增订单列表列
add_filter('manage_edit-shop_order_columns', 'add_custom_order_list_columns');
function add_custom_order_list_columns($columns) {
    $columns['shipping_cost'] = __('运费');
    $columns['delivery_day'] = __('配送日期');
    return $columns;
}

// 填充列内容
add_action('manage_shop_order_posts_custom_column', 'populate_custom_order_list_columns');
function populate_custom_order_list_columns($column) {
    global $post;
    $order = wc_get_order($post->ID);
    
    if ($column === 'shipping_cost') {
        echo $order->get_meta('_shipping_cost');
    }
    if ($column === 'delivery_day') {
        echo $order->get_meta('_delivery_day');
    }
}

5. JS自动同步字段示例 #

以下是配合你需求的JS模块示例，根据收货城市自动填充运费和配送日期：

// 注册并加载JS文件
add_action('wp_enqueue_scripts', 'enqueue_checkout_custom_js');
function enqueue_checkout_custom_js() {
    if (is_checkout() && !is_wc_endpoint_url()) {
        wp_enqueue_script('checkout-custom-js', get_stylesheet_directory_uri() . '/js/checkout-custom.js', array('jquery'), '1.0', true);
    }
}

在主题目录的js/checkout-custom.js中添加：

jQuery(document).ready(function($) {
    // 监听收货城市字段变化（默认字段ID为billing_city，可根据主题调整）
    $('#billing_city').on('change', function() {
        let city = $(this).val().toLowerCase();
        let shippingCostField = $('#shipping_cost');
        let deliveryDayField = $('#delivery_day');
        
        // 根据城市设置对应值
        if (city.includes('buenos aires')) {
            shippingCostField.val('500');
            deliveryDayField.val('周一');
        } else if (city.includes('new york')) {
            shippingCostField.val('1000');
            deliveryDayField.val('周二');
        } else {
            // 其他城市清空字段
            shippingCostField.val('');
            deliveryDayField.val('');
        }
    });
});

注意事项 #

• 所有代码建议添加到主题的functions.php文件或自定义插件中，避免主题更新导致代码丢失
• 字段的name属性和保存时的元数据键名（如_shipping_cost）需保持一致
• JS中需根据实际的地址字段ID调整（部分主题可能使用shipping_city而非billing_city）

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