WooCommerce: Hiển thị Ngày Giao hàng cho Đơn đặt hàng trên trang thanh toán

Đây là cách bạn có thể hiển thị ngày giao hàng bằng cách thêm trường “lịch” trên trang thanh toán WooCommerce, cho phép mọi người quyết định ngày giao hàng và lưu giá trị này vào đơn đặt hàng. Việc này khá phức tạp vì nó phụ thuộc vào nhu cầu và thời gian của khách hàng, chúng ta không thể chủ động trong việc giao hàng.

Tôi đã mất nhiều thời gian để triển khai điều này cho một khách hàng (nó phức tạp hơn nhiều, với các ngày có sẵn, lịch khác nhau dựa trên các khu vực vận chuyển khác nhau, trọng lượng tối đa mỗi ngày, v.v.) vì vậy tôi nghĩ đến việc chia sẻ đoạn mã này với các bạn!

Đoạn mã PHP: Hiển thị Ngày Giao hàng cho Đơn đặt hàng trên trang thanh toán

Thứ nhất: Hiển thị Lịch thanh toán nếu Đã chọn Giao hàng

[code]

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 ) {

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 );
});

</script>

<?php

}

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’ );

}

[/code]

Thứ hai: Load dữ liệu bảng chọn ngày giao hàng

[code]

add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_enable_datepicker’, 10 );

function bbloomer_enable_datepicker() {

<?php

}

[/code]

Thứ ba: Load lịch

[code]

add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_load_calendar_dates’, 20 );

function bbloomer_load_calendar_dates( $available_gateways ) {

jQuery(document).ready(function($) {

$(‘#datepicker’).click(function() {

$(‘#datepicker’).datepicker({
dateFormat: ‘dd-mm-yy’,
maxDate: “+2m”,
minDate: 1,
}).datepicker( “show” );

});

</script>

<?php

}

[/code]

Thứ tư: Lưu & hiển thị ngày dưới dạng meta đơn hàng

[code]

add_action( ‘woocommerce_checkout_update_order_meta’, ‘bbloomer_save_date_weight_order’ );

function bbloomer_save_date_weight_order( $order_id ) {

global $woocommerce;

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>’;

}

[/code]

Bên cạnh đó

Nếu bạn thích viết mã nhưng không cảm thấy tự tin 100% với PHP, thì có một plugin đáng tin cậy để đạt được kết quả tương tự.

Trong trường hợp này, tôi khuyên bạn nên sử dụng plugin WooCommerce Delivery Slots. Ngoài việc hiển thị bộ chọn ngày và giờ trên trang thanh toán, bạn cũng có thể giới hạn giờ và ngày, tính phí và phí bảo hiểm cho các vị trí cụ thể và hơn thế nữa.

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).