以下是如何在 WooCommerce 结帐页面上添加“日历”字段，让人们决定交货日期，并将此值保存在订单中。
我花了很长时间才为客户实现这个（它要复杂得多，有可用的日期，基于不同运输区域的不同日历，每天的最大重量等）所以我想和你分享基本的片段！
/**
* @snippet Display Order Delivery Date @ WooCommerce Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// ——————————-
// 1. Display Checkout Calendar if Shipping Selected
add_action( ‘woocommerce_review_order_before_payment’, ‘bbloomer_echo_acf_date_picker’ );
function bbloomer_echo_acf_date_picker( $checkout ) {
echo ‘<div id=”show-if-shipping” style=”display:none”><h3>Delivery Date</h3>’;
woocommerce_form_field( ‘delivery_date’, array(
‘type’ => ‘text’,
‘class’ => array( ‘form-row-wide’ ),
‘id’ => ‘datepicker’,
‘required’ => true,
‘label’ => ‘Select Delivery Date’,
‘placeholder’ => ‘Click to open calendar’,
));
echo ‘</div>’;
}
add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_show_hide_calendar’ );
function bbloomer_show_hide_calendar( $available_gateways ) {
wc_enqueue_js( “
function show_calendar( val ) {
if ( val.match(‘^flat_rate’) || val.match(‘^free_shipping’) ) {
jQuery(‘#show-if-shipping’).fadeIn();
} else {
jQuery(‘#show-if-shipping’).fadeOut();
}
}
jQuery(document).ajaxComplete(function() {
var val = jQuery(‘input[name^=\’shipping_method\’]:checked’).val();
show_calendar( val );
});
” );
}
add_action( ‘woocommerce_checkout_process’, ‘bbloomer_validate_new_checkout_fields’ );
function bbloomer_validate_new_checkout_fields() {
if ( isset( $_POST[ ‘delivery_date’ ] ) && empty( $_POST[ ‘delivery_date’ ] ) ) wc_add_notice( __( ‘Please select the Delivery Date’ ), ‘error’ );
}
// ——————————-
// 2. Load JQuery Datepicker
add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_enable_datepicker’, 10 );
function bbloomer_enable_datepicker() {
echo ‘<link rel=”stylesheet” href=”//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css”>’;
echo ‘<script src=”//code.jquery.com/ui/1.13.0/jquery-ui.js”></script>’;
}
// ——————————-
// 3. Load Calendar Dates
add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_load_calendar_dates’, 20 );
function bbloomer_load_calendar_dates( $available_gateways ) {
wc_enqueue_js( “
$(‘#datepicker’).click(function() {
$(‘#datepicker’).datepicker({
dateFormat: ‘dd-mm-yy’,
maxDate: “+2m”,
minDate: 1,
}).datepicker( “show” );
});
” );
}
// ——————————-
// 4. Save & show date as order meta
add_action( ‘woocommerce_checkout_update_order_meta’, ‘bbloomer_save_date_weight_order’ );
function bbloomer_save_date_weight_order( $order_id ) {
if ( $_POST[‘delivery_date’] ) update_post_meta( $order_id, ‘_delivery_date’, esc_attr( $_POST[‘delivery_date’] ) );
}
add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘bbloomer_delivery_weight_display_admin_order_meta’ );
function bbloomer_delivery_weight_display_admin_order_meta( $order ) {
echo ‘<p><strong>Delivery Date:</strong> ‘ . get_post_meta( $order->get_id(), ‘_delivery_date’, true ) . ‘</p>’;
}
常见问题
所有的素材与插件都可以用吗？
本站所有的素材与插件（包括免费的），都是本工作室用过的，测试过的，或者二开修改过的，理论上来说没有什么bug，但不保证在所有环境下都可以完美运行。
收费素材与免费素材怎么定义的
本站收费的素材，也是及其便宜的，其实就是收个打赏钱，是工作室对这些插件的测试，整理，修复，优化的辛苦钱，并非开发插件的费用，原创插件或者模版收费稍贵一些。
出现问题了怎么办？
由于收费非常低，大部分都不超10元，所以并不提供售后服务，但您如果需要，可以联系我付费咨询，费用为50元/次/小时。如果是原创模版或者插件，可以免费为您指导。
原文链接：https://www.52gys.cn/4710.html，转载请注明出处。
评论0