Hướng dẫn chỉnh sửa trang checkout Woocommerce – Thêm thời gian giao hàng
Trang checkout (tức trang thanh toán) của Woocommerce mặc định có thể có 1 số trường dữ liệu mà chúng ta không dùng tới, hay là có những trường dữ liệu ở đó nó không có mà chúng ta lại muốn sử dụng thì phải làm thế nào.
Trong bài viết này tôi sẽ hướng dẫn cho mọi người cách để có thể xóa đi các trường không sử dụng trong trang checkout mặc định của Woocommerce. Và sau đó tôi sẽ hướng dẫn cách thêm mới một hay nhiều custum field (trường dữ liệu) mà bạn muốn sử dụng vào trang checkout này. Cụ thể là thêm ngày giao hàng, giờ giao hàng. Thông điệp thêm ngoài ghi chú.
Nội Dung Bài Viết
1. Xóa trường dữ liệu không sử dụng
Ở VD trên tôi muốn xóa các trường ko cần thiết đối với tôi như: Company , Country , City , state.
Để làm được điều đó ta cần viết đoạn code sau vào file function.php trong theme bạn đang dùng.
//bo cac truong trong thanh toan add_filter( 'woocommerce_checkout_fields' , 'bbloomer_remove_billing_postcode_checkout' ); function bbloomer_remove_billing_postcode_checkout( $fields ) { unset($fields['billing']['billing_postcode']); unset($fields['billing']['billing_company']); unset($fields['billing']['billing_country']); unset($fields['billing']['billing_city']); unset($fields['shipping']['shipping_postcode']); unset($fields['shipping']['shipping_company']); unset($fields['shipping']['shipping_country']); unset($fields['shipping']['shipping_city']); return $fields; }
Trong đó $fields[‘billing’] là trong phần thông tin của người thanh toán, $fields[‘shipping’] là thông tin người nhận hàng (đối với người dùn nhận hàng ko phải là người thanh toán).
Sau khi thực hiện ta sẽ được như sau:
2. Thêm trường chọn ngày giao hàng
Trước tiên để có thể sử dụng được chức năng datepicker này ta cần kích hoạt nó. Tất cả những đoạn code sau đây chúng ta điều làm việc trong file function.php ở theme mà mọi người đang sài.
// Register main datepicker jQuery plugin script add_action( 'wp_enqueue_scripts', 'enabling_date_picker' ); function enabling_date_picker() { // Only on front-end and checkout page if( is_admin() || ! is_checkout() ) return; // Load the datepicker jQuery-ui plugin script wp_enqueue_script( 'jquery-ui-datepicker' ); }
Sau khi đăng ký sử dụng chức năng datepicker xong nó đã hoạt động và chúng ta cần thêm trường dữ liệu thời gian giao hàng vào bằng đoạn code sau:
// Call datepicker functionality in your custom text field add_action('woocommerce_after_order_notes', 'my_custom_checkout_field', 10, 1); function my_custom_checkout_field( $checkout ) { date_default_timezone_set('America/Los_Angeles'); $mydateoptions = array('' => __('Select PickupDate', 'woocommerce' )); echo '<div id="my_custom_checkout_field"> <h3>'.__('Thời Gian Giao Hàng').'</h3>'; // YOUR SCRIPT HERE BELOW echo ' <script> jQuery(function($){ $("#datepicker").datepicker(); }); </script>'; woocommerce_form_field( 'order_pickup_date', array( 'type' => 'text', 'class' => array('my-field-class form-row-wide'), 'id' => 'datepicker', 'required' => true, 'label' => __('Ngày Giao Hàng'), 'placeholder' => __('Chọn Ngày'), 'options' => $mydateoptions ),$checkout->get_value( 'order_pickup_date' )); echo '</div>'; }
Tiếp tục là khâu báo lỗi nếu phần này không được chọn (tức để trống), bởi vì ở trên ta khai báo required=true nên sẽ đòi khỏi khâu này, nếu ta thấy cái này ko thực sự cần thiết và ko ép người dùng phải chọn thì sửa thành required=false và bỏ qua bước xử lý lỗi này.
/** * Process the checkout */ add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process'); function my_custom_checkout_field_process() { // Check if set, if its not set add an error. if ( ! $_POST['order_pickup_date'] ) wc_add_notice( __( 'Vui lòng chọn thời gian cần giao hàng' ), 'error' ); }
Tiếp theo cần lưu lại những dữ liệu này vào đơn hàng sau khi người dùng đặt hàng
/** * Update the order meta with field value */ add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' ); function my_custom_checkout_field_update_order_meta( $order_id ) { if ( ! empty( $_POST['order_pickup_date'] ) ) { update_post_meta( $order_id, 'Ngày Giao', sanitize_text_field( $_POST['order_pickup_date'] ) ); } }
Hiển thị trên trang xem và sửa đơn hàng trong admin
/** * Display field value on the order edit page */ add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 ); function my_custom_checkout_field_display_admin_order_meta($order){ echo '<p><strong>'.__('Ngày Giao').':</strong> ' . get_post_meta( $order->id, 'Ngày Giao', true ) . '</p>'; }
Hiển thị trên trang báo đơn hàng thành công cho khách hàng
// display in userfronend add_action( 'woocommerce_order_details_after_order_table', 'custom_order_details_after_order_table', 10, 1 ); function custom_order_details_after_order_table( $order ) { ?> <h2><?php _e( 'Thời gian và thông điệp' ); ?></h2> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th><?php _e( 'Ngày Giao:' ); ?></th> <td><?php echo get_post_meta( $order->id, 'Ngày Giao', true ); ?></td> </tr> </tbody> </table> <?php }
Vâng với tất cả những gì hướng dẫn ở trên chúng ta đã xử lý được việc thêm mới trường chọn ngày giao hàng, mình thấy đây là một tính năng khá quan trọng trong bán hàng online bởi vì có nhiều khách hàng rất cần. Tiếp theo mình sẽ hướng dẫn việc thêm giờ giao hàng, tặng cho ai, nhân dịp gì (những trường này là dropdown field) và một trường thông điệp cần gửi (trường này là textarea field) giống như trang web mình làm cho khách hàng là Hoa thiên hương đây là một trang web shop hoa tươi online chuyên phục vụ tất cả các loại hoa tươi giao hàng tận nơi rất tốt, các bạn hãy sử dụng nhân dịp lễ này nhé :), sẵn đó test chức năng này giúp mình, nhớ đặt xong phải lấy hàng nhà, không là chủ shop buồn lắm đó.
3. Thêm các trường Dropdown và texterea vào checkout
Cũng giống như trên tất cả đều làm trong file function.php hết nhé
3.1 Add 4 trường giờ giao, tặng cho ai, nhân dịp gì, thông điệp vào một lần
// Add giờ giao function cloudways_custom_checkout_fields($fields){ $fields['cloudways_extra_fields'] = array( 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array( '' => __( 'Vui lòng chọn' ), '7h' => __( '7h' ), '8h' => __( '8h' ), '9h' => __( '9h' ),'10h' => __( '10h' ),'11h' => __( '11h' ),'12h' => __( '12h' ),'13h' => __( '13h' ),'14h' => __( '14h' ),'15h' => __( '15h' ),'16h' => __( '16h' ),'17h' => __( '17h' ),'18h' => __( '18h' ),'19h' => __( '19h' ),'20h' => __( '20h' ) ), 'required' => true, 'label' => __( 'Giờ Giao' ) ), 'cloudways_dropdown_1' => array( 'type' => 'select', 'options' => array( '' => __( 'Vui lòng chọn' ), 'Bạn Bè' => __( 'Bạn Bè' ), 'Người Yêu' => __( 'Người Yêu' ), 'Vợ' => __( 'Vợ' ),'Chồng' => __( 'Chồng' ),'Đồng Nghiệp' => __( 'Đồng Nghiệp' ), 'Ba, Mẹ' => __( 'Ba, Mẹ' ),'Đối Tác, Khách Hàng' => __( 'Đối Tác, Khách Hàng' ),'Anh, Chị, Em' => __( 'Anh, Chị, Em' ),'Đối tượng khác' => __( 'Đối tượng khác' ) ), 'required' => true, 'label' => __( 'Tặng cho' ) ), 'cloudways_dropdown_2' => array( 'type' => 'select', 'options' => array( '' => __( 'Vui lòng chọn' ), 'Sinh nhật' => __( 'Sinh nhật' ), 'Ngày kỉ niệm' => __( 'Ngày kỉ niệm' ), 'Làm quen' => __( 'Làm quen' ),'Khai trương' => __( 'Khai trương' ),'Chúc mừng' => __( 'Chúc mừng' ), 'Chia buồn' => __( 'Chia buồn' ),'Cảm ơn' => __( 'Cảm ơn' ),'Ngày lễ' => __( 'Ngày lễ' ),'Mừng thọ' => __( 'Mừng thọ' ),'Xin lỗi' => __( 'Xin lỗi' ),'Dịp khác' => __( 'Dịp khác' ) ), 'required' => true, 'label' => __( 'Nhân dịp' ) ), 'cloudways_text_field' => array( 'type' => 'textarea', 'required' => false, 'label' => __( 'Nội Dung Thiệp - Banner' ) ) ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' ); function cloudways_extra_checkout_fields(){ $checkout = WC()->checkout(); ?> <div class="extra-fields"> <?php foreach ( $checkout->checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?> <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?> <?php endforeach; ?> </div> <?php } add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );
Ở phần 2 mình chỉ hướng dẫn thêm 1 trường 1 lần, trong phần này là nhiều trường 1 lần, các bạn cứ làm như trên, thay bằng các trường mình cần dùng, có thể thêm hoặc xóa bớt tùy ý, theo đúng cú pháp trên là được. Mỗi trường sẽ nằm trong 1 mảng. Thêm thì thêm mảng, xóa thì xóa mảng…
3.2 Lưu lại dữ liệu
// Lưu dữ liệu function cloudways_save_extra_checkout_fields( $order_id, $posted ){ // don't forget appropriate sanitization if you are using a different field type if( isset( $posted['cloudways_text_field'] ) ) { update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) ); } if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( '7h', '8h', '9h','10h','11h','12h','13h','14h','15h','16h','17h','18h','19h','20h') ) ) { update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown'] ); } if( isset( $posted['cloudways_dropdown_1'] ) && in_array( $posted['cloudways_dropdown_1'], array( 'Bạn Bè', 'Người Yêu', 'Vợ','Chồng','Đồng Nghiệp', 'Ba, Mẹ','Đối Tác, Khách Hàng' ,'Anh, Chị, Em','Đối tượng khác') ) ) { update_post_meta( $order_id, '_cloudways_dropdown_1', $posted['cloudways_dropdown_1'] ); } if( isset( $posted['cloudways_dropdown_2'] ) && in_array( $posted['cloudways_dropdown_2'], array( 'Sinh nhật', 'Ngày kỉ niệm', 'Làm quen','Khai trương','Chúc mừng', 'Chia buồn','Cảm ơn','Ngày lễ','Mừng thọ','Xin lỗi','Dịp khác') ) ) { update_post_meta( $order_id, '_cloudways_dropdown_2', $posted['cloudways_dropdown_2'] ); } } add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );
3.3 Hiển thị trong admin phần đơn hàng
// hiển thị trong admin function cloudways_display_order_data_in_admin( $order ){ ?> <p>....</p> <div class="address"> <?php echo '<p><strong>' . __( 'Nội dung thiệp' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>'; echo '<p><strong>' . __( 'Giờ giao' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; echo '<p><strong>' . __( 'Tặng cho' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown_1', true ) . '</p>'; echo '<p><strong>' . __( 'Nhân dịp' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown_2', true ) . '</p>'; ?> </div> <?php } add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );
3.4 Hiển thị ra user front-end trang báo thành công
// hiển thị dữ liệu ra page checkout function cloudways_display_order_data( $order_id ){ ?> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th style="width:30%"><?php _e( 'Giờ giao hàng:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td> </tr> <tr> <th><?php _e( 'Tặng cho:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown_1', true ); ?></td> </tr> <tr> <th><?php _e( 'Nhân dịp:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown_2', true ); ?></td> </tr> <tr> <th><?php _e( 'Thông điệp:' ); ?></th> <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td> </tr> </tbody> </table> <?php } add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 ); add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );
3.5 Thêm tất cả các trường trên vào email gửi cho khách và cho quản trị
Một phần nữa khá quan trọng đó là phải thêm tất cả các trường trên để gửi email cho khách và quản trị viên để xem đơn hàng.
// gửi mail function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) { $fields['thiep'] = array( 'label' => __( 'Nội dung thiệp' ), 'value' => get_post_meta( $order->id, '_cloudways_text_field', true ), ); $fields['giogiao'] = array( 'label' => __( 'Giờ giao' ), 'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ), ); $fields['ngaygiao'] = array( 'label' => __( 'Ngày giao' ), 'value' => get_post_meta( $order->id, 'Ngày Giao', true ), ); $fields['tangcho'] = array( 'label' => __( 'Tặng cho' ), 'value' => get_post_meta( $order->id, '_cloudways_dropdown_1', true ), ); $fields['nhandip'] = array( 'label' => __( 'Nhân dịp' ), 'value' => get_post_meta( $order->id, '_cloudways_dropdown_2', true ), ); return $fields; } add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );
Bài hướng dẫn đến đây là kết thúc, nếu thấy hay hãy share cho mọi người cùng xem để mình có tinh thần viết tiếp nhé. Cảm ơn nhiều.
Em chào anh,
Anh cho em hỏi, em có cài đặt woocommerce nhưng trong phần checkout khi khách hàng làm đến bước này luôn bị lỗi :”SyntaxError: Unexpected token in JSONSON at position 116″ . Em có tìm hiểu nhưng không ra được cách chữa. Anh có thể giúp em được không ạ?
Em cám ơn anh ạ .
Phải nói là cực kỳ tuyệt vời. :))
Bác cho em hỏi. Giờ e gặp chức năng là hàng order. Phải đặt cọc.
Ví dụ em đã tạo đơn hàng trong woo tổng là 1000k. E muốn có thêm mục đặt cọc và khi mình nhập số tiền cọc thì bên cạnh nó cũng hiện ra số tiền còn lại sau này cần thanh toán.
Và tất nhiên vẫn cần hiện thị trong quản trị admin và gửi email cho khách hàng nội dung đó.
Bác có thể giúp em vấn đề này được không ạ? Cảm ơn bác nhiều.
Cái này bạn tạo thêm 1 trường riêng để nhập phần đặt cọc này vào rồi làm phép toán trừ sô tiền trong đơn hàng này cho số tiền đặt cọc và ra số tiền còn lại, bạn lưu tất cả vào là được . Chúc bạn thành công . Xin lỗi vì email bị lỗi không biết bạn comment .
Bạn cho mình hỏi là Mục số 2 Tùy chọn thời gian giao hàng. Mình chỉ cần muốn chọn Thời Gian giao hàng trong ngày. Buổi Sáng, Chiều và Tối thôi thì code như thế nào ạ ?
Thì thay vì thời gian cố định giờ bạn sửa thành select sáng chiều tối thôi bạn