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 ) {
?>
<script type=”text/javascript”>
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() {
?>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>
<?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 ) {
?>
<script type=”text/javascript”>
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).
Dịch vụ thiết kế website chuyên nghiệp tại Web MTP
Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!
Website: https://webmtp.com/
Hotline: 0931 912 379
Mời bạn xem nhiều bài hấp dẫn khác
