本教程详细指导如何在woocommerce结账页面集成xdsoft datetimepicker，并根据用户选择的配送日期动态收取额外费用。文章涵盖了自定义日期字段的添加、日期选择器的配置、基于日期差异计算和应用费用的php逻辑，以及如何将配送日期保存并显示在订单详情和邮件中，确保结账流程的灵活性和业务规则的准确执行。
在WooCommerce商店中，有时需要根据客户选择的配送日期来调整订单费用，例如为当日或次日配送收取额外加急费。本教程将引导您完成在WooCommerce结账页面实现这一功能的完整步骤，包括添加自定义日期选择器、动态计算费用以及将选择的日期保存到订单信息中。
一、添加自定义配送日期选择器
首先，我们需要在WooCommerce结账页面添加一个用于选择配送日期的字段，并对其进行基础验证。
'text', 'class' => array('form-row-wide'), 'id' => 'datepicker', // 用于JS选择器 'required' => true, 'label' => __('Select Delivery Date', 'your-text-domain'), 'placeholder' => __('Click to select date', 'your-text-domain'), ));}add_action( 'woocommerce_after_order_notes', 'custom_delivery_date_field' );/** * 验证配送日期字段是否已选择 */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' );?>
代码说明：
custom_delivery_date_field 函数通过 woocommerce_form_field 创建一个类型为 text 的输入字段，其 id 设置为 datepicker，方便后续JavaScript进行初始化。woocommerce_after_order_notes 钩子确保该字段显示在订单备注区域下方。validate_delivery_date_field 函数在结账处理时检查 delivery_date 字段是否为空，若为空则添加一个错误通知。
二、集成并配置xdsoft DateTimePicker
为了提供友好的日期选择体验，我们将集成 xdsoft DateTimePicker。此步骤包括引入必要的JavaScript库和初始化日期选择器，并配置其在日期或时间选择后触发WooCommerce结账页面的更新。
jQuery(document).ready(function($) { jQuery.datetimepicker.setLocale('en'); // 设置语言环境 // 获取当前时间，并向上取整到最近的30分钟，确保可选时间从当前时间之后开始 var currentDate = new Date(); var minutes = currentDate.getMinutes(); var m = (Math.ceil(minutes / 30) * 30) % 60; currentDate.setMinutes(m); jQuery('#datepicker').datetimepicker({ // beforeShowDay: $.datepicker.noWeekends, // 禁用周末，如果需要可以启用 format: 'Y/m/d H:i:s', // 日期时间格式 minDate: 0, // 最小可选日期为今天 minTime: '8:00', // 最小可选时间 step: 30, // 时间步长为30分钟 allowTimes: [ // 允许选择的时间段 '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00' ], onSelectDate: function(ct, $i) { // 当选择日期时，触发WooCommerce结账页面的更新，以便重新计算费用 jQuery('body').trigger('update_checkout'); }, onSelectTime: function(ct, $i) { // 当选择时间时，触发WooCommerce结账页面的更新 jQuery('body').trigger('update_checkout'); } }); });
代码说明：
load_and_init_datetimepicker 函数通过 woocommerce_after_checkout_form 钩子在结账表单底部加载JavaScript和CSS库。jQuery.datetimepicker.setLocale(‘en’) 设置日期选择器的语言。minDate: 0 确保用户不能选择过去的日期。onSelectDate 和 onSelectTime 回调函数是关键，它们在用户选择日期或时间后，通过 jQuery(‘body’).trigger(‘update_checkout’) 触发WooCommerce结账页面的AJAX更新，从而实时重新计算订单费用。
三、实现基于配送日期的额外费用逻辑
这一部分是核心，我们将使用 woocommerce_cart_calculate_fees 钩子来检查用户选择的配送日期，并根据规则动态添加或移除额外费用。
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->fees_api()->set_fees( $fees ); break; // 找到并移除后即可退出循环 } } } } 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->fees_api()->set_fees( $fees ); break; } } }}add_action( 'woocommerce_cart_calculate_fees','wc_add_delivery_surcharge' );?>
代码说明：
wc_add_delivery_surcharge 函数挂载到 woocommerce_cart_calculate_fees 钩子，确保在购物车费用计算时执行。通过 parse_str( $_POST[‘post_data’], $post_data ) 获取结账表单提交的数据，其中包含 delivery_date。将选定日期和当前日期转换为时间戳，计算它们之间的天数差异。如果差异为 0（今天）或 1（明天），则使用 WC()->cart->add_fee() 添加名为“Fast delivery charge”的额外费用。关键的移除逻辑： 如果用户选择了非加急日期，或者没有选择日期，代码会遍历当前购物车中的所有费用，如果找到名为“Fast delivery charge”的费用，则将其移除。这确保了费用的动态性和准确性。
四、保存与显示配送日期信息
为了在订单管理和通知中查看配送日期，我们需要将其保存到订单元数据中，并在后台订单详情页和客户邮件中显示。
get_meta( '_delivery_date' ); if ( $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订单邮件中显示配送日期 * * @param WC_Order $order 订单对象 * @param bool $sent_to_admin 是否发送给管理员 * @param bool $plain_text 是否为纯文本邮件 * @param WC_Email $email 邮件对象 */function display_delivery_date_in_emails( $order, $sent_to_admin, $plain_text, $email ) { $delivery_date = $order->get_meta( '_delivery_date' ); if ( $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 函数使用 woocommerce_checkout_update_order_meta 钩子将 delivery_date 的值保存为订单的元数据（_delivery_date）。display_delivery_date_in_admin_order 函数使用 woocommerce_admin_order_data_after_billing_address 钩子在WooCommerce后台订单编辑页面的账单地址下方显示配送日期。display_delivery_date_in_emails 函数使用 woocommerce_email_after_order_table 钩子在所有WooCommerce订单邮件（包括客户和管理员邮件）的订单表格下方显示配送日期。
五、注意事项与总结
代码放置位置： 所有上述PHP代码应放置在您主题的 functions.php 文件中，或创建一个自定义插件来管理这些功能。推荐使用自定义插件，以确保主题更新不会覆盖您的定制代码。文本域： 在代码中使用了 ‘your-text-domain’ 作为文本域，请根据您的主题或插件实际使用的文本域进行替换，以便进行国际化。费用金额与名称： wc_add_delivery_surcharge 函数中的 $fee_amount 和费用名称 ‘Fast delivery charge’ 可以根据您的业务需求进行调整。日期选择器配置： load_and_init_datetimepicker 函数中的 minDate、minTime、step 和 allowTimes 等选项可以根据您的配送策略进行灵活配置。例如，如果您不希望周末配送，可以启用 beforeShowDay: $.datepicker.noWeekends。AJAX更新： onSelectDate 和 onSelectTime 中触发 jQuery(‘body’).trigger(‘update_checkout’) 是实现费用动态计算的关键。这会向服务器发送AJAX请求，重新计算购物车总额和费用，并更新结账页面显示。
通过以上步骤，您已经成功地在WooCommerce结账页面实现了一个功能完善的配送日期选择器，并能够根据用户的选择动态地添加或移除额外费用，同时将配送日期保存并显示在订单的各个环节中。这不仅提升了用户体验，也为您的业务提供了更大的灵活性。
以上就是WooCommerce结账页：根据配送日期动态添加额外费用（含日期选择器集成）的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1329115.html
微信扫一扫 
支付宝扫一扫 
