WooCommerce结账页自定义配送日期并实现加急配送费用

碧海醫心

发布时间：2025-10-31 11:26:01

1046人浏览过

来源于php中文网

原创

WooCommerce结账页自定义配送日期并实现加急配送费用

本教程将指导您如何在woocommerce结账页集成xdsoft jquery datetimepicker，允许客户选择配送日期，并根据选择的日期（如当日或次日）动态计算并添加加急配送费用。同时，文章还将涵盖如何将此日期信息保存至订单并显示在管理后台及邮件中，以实现完整的配送日期管理功能。

在电子商务运营中，为客户提供灵活的配送日期选择，并对加急配送服务收取额外费用，是提升用户体验和管理物流成本的常见需求。本教程将详细介绍如何在WooCommerce结账流程中实现这一功能，包括自定义字段的添加、日期时间选择器的集成、动态费用计算以及订单信息的持久化与展示。

1. 添加自定义配送日期字段与验证

首先，我们需要在WooCommerce结账页添加一个用于选择配送日期的文本输入框。这个输入框将通过WordPress和WooCommerce的钩子函数进行注册和渲染。

/**
 * 在结账页“订单备注”下方添加自定义配送日期字段
 * 使用 woocommerce_after_order_notes 钩子
 */
function custom_delivery_date_field( $checkout ) {
    woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'), // 字段宽度
        'id'            => 'datepicker', // 用于JS选择器的ID
        'required'      => true, // 设为必填
        'label'         => __('Select Delivery Date', 'your-text-domain'), // 字段标签
        'placeholder'   => __('Click to select date', 'your-text-domain'), // 占位符
    ), $checkout->get_value( 'delivery_date' )); // 保持字段值
}
add_action( 'woocommerce_after_order_notes', 'custom_delivery_date_field' );

/**
 * 验证自定义配送日期字段
 * 使用 woocommerce_checkout_process 钩子
 */
function validate_delivery_date_field() {
    if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) {
        wc_add_notice( __( 'Please select the Delivery Date', 'your-text-domain' ), 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_delivery_date_field' );

代码说明：

晓象AI资讯阅读神器

晓象-AI时代的资讯阅读神器

下载

custom_delivery_date_field 函数通过 woocommerce_form_field 创建一个类型为 text 的输入框。
id 设置为 datepicker，这在后续集成JavaScript日期时间选择器时非常关键。
required 参数确保用户必须选择一个日期才能继续。
validate_delivery_date_field 函数在结账处理时检查 delivery_date 字段是否为空，若为空则显示错误通知。

2. 集成并配置xdsoft jQuery DateTimePicker

为了提供友好的日期选择界面，我们将使用xdsoft jQuery DateTimePicker库。这需要引入其JavaScript和CSS文件，并初始化日期时间选择器。

/**
 * 引入xdsoft jQuery DateTimePicker所需的JS和CSS
 * 使用 woocommerce_after_checkout_form 钩子
 */
function enqueue_datetimepicker_scripts() {
    // 引入jQuery UI，xdsoft datetimepicker可能依赖它，或者xdsoft自带了大部分功能
    // 根据xdsoft文档，通常只需要xdsoft库本身
    // wp_enqueue_script( 'jquery-ui-datepicker' ); // 如果需要jQuery UI Datepicker的额外功能

    // xdsoft jQuery DateTimePicker CSS
    wp_enqueue_style( 'jquery-datetimepicker-css', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css', array(), '2.5.20' );
    // xdsoft jQuery DateTimePicker JS
    wp_enqueue_script( 'jquery-datetimepicker-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js', array('jquery'), '2.5.20', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_datetimepicker_scripts' ); // 在前端正确引入

/**
 * 初始化xdsoft jQuery DateTimePicker并配置选项
 * 使用 woocommerce_after_checkout_form 钩子
 */
function initialize_datetimepicker() {
   ?>
   
   代码说明：

enqueue_datetimepicker_scripts 函数使用 wp_enqueue_style 和 wp_enqueue_script 引入DateTimePicker的CSS和JS文件。为了确保它们在前端页面加载，我们将其挂载到 wp_enqueue_scripts 钩子上。
initialize_datetimepicker 函数在 woocommerce_after_checkout_form 钩子上执行，用于初始化 datepicker 字段。
format 定义了日期时间的显示和提交格式。
minDate: 0 允许选择今天及以后的日期。
minTime 和 allowTimes 限制了可选的时间范围。

关键点： onSelectDate 和 onSelectTime 回调函数在用户选择日期或时间时，会触发 $( 'body' ).trigger( 'update_checkout' );。这会强制WooCommerce重新计算购物车和费用，从而动态更新加急配送费。

3. 动态计算并添加加急配送费
现在，我们将实现根据用户选择的配送日期动态添加或移除加急配送费用的逻辑。这通过 woocommerce_cart_calculate_fees 钩子完成。
/**
 * 根据选择的配送日期动态添加加急配送费
 * 使用 woocommerce_cart_calculate_fees 钩子
 */
function add_express_delivery_surcharge() { 
    // 确保只在前端、非管理员请求且非AJAX请求时执行
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
        return;
    }

    // 解析POST数据以获取 delivery_date 字段
    parse_str($_POST['post_data'], $post_data);

    if ( isset( $post_data['delivery_date'] ) && ! empty( $post_data['delivery_date'] ) ) {
        $current_date_obj = new DateTime(); // 当前日期对象
        $delivery_date_str = explode(' ', $post_data['delivery_date'])[0]; // 只取日期部分，忽略时间
        $delivery_date_obj = DateTime::createFromFormat('Y/m/d', $delivery_date_str); // 配送日期对象

        if ( $delivery_date_obj ) {
            // 计算日期差异（天数）
            $interval = $current_date_obj->diff($delivery_date_obj);
            $difference_days = (int)$interval->format('%r%a'); // %r 表示符号 (+/-), %a 表示总天数

            $fee_amount = 5.00; // 定义加急费用金额

            // 如果选择的日期是今天 (0) 或明天 (1)
            if ( $difference_days == 0 || $difference_days == 1 ) {
                // 检查是否已经添加了该费用，避免重复添加
                $has_fee = false;
                foreach ( WC()->cart->get_fees() as $fee ) {
                    if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
                        $has_fee = true;
                        break;
                    }
                }
                if ( ! $has_fee ) {
                    WC()->cart->add_fee( __( 'Fast delivery charge', 'your-text-domain' ), $fee_amount, true, 'standard' );
                }
            } else {
                // 如果选择的不是今天或明天，则移除加急费用（如果已存在）
                $fees = WC()->cart->get_fees();
                foreach ( $fees as $key => $fee ) {
                    if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
                        unset( $fees[$key] ); // 移除费用
                        WC()->cart->set_fees( $fees ); // 更新费用列表
                        break; // 假设只有一项这样的费用，移除后即可退出
                    }
                }
            }
        }
    } else {
        // 如果 delivery_date 未设置或为空，确保移除加急费用
        $fees = WC()->cart->get_fees();
        foreach ( $fees as $key => $fee ) {
            if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
                unset( $fees[$key] );
                WC()->cart->set_fees( $fees );
                break;
            }
        }
    }
}
add_action( 'woocommerce_cart_calculate_fees','add_express_delivery_surcharge' );
代码说明：

add_express_delivery_surcharge 函数挂载到 woocommerce_cart_calculate_fees 钩子，确保在购物车费用计算时执行。
parse_str($_POST['post_data'], $post_data); 用于从AJAX请求的POST数据中解析出 delivery_date。
我们使用 DateTime 对象来计算当前日期和所选配送日期之间的天数差异。$difference_days == 0 表示今天，$difference_days == 1 表示明天。
如果满足加急条件，WC()->cart->add_fee() 会添加一个名为“Fast delivery charge”的费用。第三个参数 true 表示该费用是可税的。

重要： 每次费用计算时，都需要检查是否应该添加或移除费用。如果用户更改了日期，并且不再满足加急条件，我们需要通过遍历 WC()->cart->get_fees() 并使用 unset() 移除该费用，然后用 WC()->cart->set_fees() 更新费用列表。

4. 保存与显示配送日期信息
为了在订单管理后台和客户收到的邮件中显示配送日期，我们需要将该信息保存到订单元数据中。
/**
 * 将配送日期保存到订单元数据
 * 使用 woocommerce_checkout_update_order_meta 钩子
 */
function save_delivery_date_field_to_order_meta( $order_id ) { 
    if ( isset( $_POST['delivery_date'] ) && ! empty( $_POST['delivery_date'] ) ) {
        update_post_meta( $order_id, 'delivery_date', sanitize_text_field( $_POST['delivery_date'] ) );
    }
}  
add_action( 'woocommerce_checkout_update_order_meta', 'save_delivery_date_field_to_order_meta' );

/**
 * 在WooCommerce管理订单编辑页显示配送日期
 * 使用 woocommerce_admin_order_data_after_billing_address 钩子
 */
function display_delivery_date_in_admin_order( $order ) {    
   $delivery_date = $order->get_meta( 'delivery_date', true ); // 从订单元数据获取
   if ( ! empty( $delivery_date ) ) {
       echo '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '';
   }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_delivery_date_in_admin_order', 10, 1 );

/**
 * 在WooCommerce订单邮件中显示配送日期
 * 使用 woocommerce_email_after_order_table 钩子
 */
function display_delivery_date_in_emails( $order, $sent_to_admin, $plain_text, $email ) {
    $delivery_date = $order->get_meta( 'delivery_date', true );
    if ( ! empty( $delivery_date ) ) {
        echo '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '';
    }
}
add_action( 'woocommerce_email_after_order_table', 'display_delivery_date_in_emails', 20, 4 );
代码说明：

save_delivery_date_field_to_order_meta 函数在订单创建或更新时，将 delivery_date 字段的值保存为订单的元数据。
display_delivery_date_in_admin_order 函数在WooCommerce管理后台的订单详情页账单地址下方显示配送日期。
display_delivery_date_in_emails 函数在发送给客户和管理员的订单邮件中显示配送日期。

注意事项与总结


代码位置： 将上述所有PHP代码添加到您的主题 functions.php 文件中，或创建一个自定义插件来管理这些功能。推荐使用自定义插件，以便在主题更新时保留您的修改。

文本域： 代码中使用了 'your-text-domain' 作为文本域。在实际项目中，请将其替换为您的主题或插件的实际文本域，以便进行国际化翻译。

费用名称： “Fast delivery charge” 是费用名称，您可以在 add_express_delivery_surcharge 函数中根据需要修改。

CSS样式： xdsoft jQuery DateTimePicker自带样式，但您可能需要添加自定义CSS来更好地融入您的网站设计。

测试： 在部署到生产环境之前，务必在开发环境中充分测试所有功能，包括不同日期选择、订单创建、管理后台显示和邮件接收等场景。

性能： woocommerce_cart_calculate_fees 钩子会在每次购物车更新时触发，包括AJAX请求。确保您的费用计算逻辑高效，避免不必要的复杂操作，以保持结账流程的流畅性。

时区： 在处理日期和时间时，请注意服务器时区和WordPress设置的时区，以避免潜在的日期计算错误。DateTime 对象通常会处理好时区问题，但了解其行为很重要。

通过以上步骤，您已经成功地为WooCommerce结账页添加了一个功能完善的配送日期选择器，并实现了根据日期紧急程度动态收取加急配送费用的功能，同时确保了这些关键信息在整个订单管理流程中的可见性。