Tùy biến trường thanh toán trong WooCommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến trường thanh toán trong WooCommerce

Trong bài trước, bạn được

Tùy chọn thanh toán, Biểu mẫu chuẩn của WooCommerce sẽ đủ cho hầu hết các mục tiêu vì nó bao gồm đa số các chi tiết cần có để hoàn thành đơn đặt hàng:

Tuy nhiên, có thể sắp xếp lại các trường, hay xóa các trường hoặc thêm các trường mới. WooCommerce, sử dụng API WP, cấp phép bạn sử dụng các action và filter để tùy chỉnh biểu mẫu của mình để phù hợp nhất với nhu cầu của bạn.

Trong ví dụ này, chúng tôi sẽ dễ dàng bố trí lại một vài trường; chuyển vị trí của trường “Tên công ty” và trường “Tên” và “Họ”. Chúng ta sẽ đặt đoạn mã sau vào tệp functions.php của theme:

 add_filter( 'woocommerce_checkout_fields', 'tl_reorder_billing_fields'); function tl_reorder_billing_fields($fields) { $order = array( 'billing_company', 'billing_first_name', 'billing_last_name', 'billing_address_1', 'billing_email', 'billing_phone' ); foreach($order as $field) { $ordered_fields[$field] = $fields['billing'][$field]; } $fields['billing'] = $ordered_fields; return $fields; }  

Và này là kết quả của bạn có được:

Lưu trường tùy chỉnh

Khi khái niệm trường tùy chỉnh là bắt buộc điền bởi khách hàng, trường này sẽ tự động lưu ở dữ liệu meta. Thêm 'required' => true vảo mảng khai báo trường của bạn.

 add_filter( 'woocommerce_billing_fields', 'woo_custom_billing', 10, 1 ); function woo_custom_billing( $fields=[] ) { //example $fields['billing_gender'] = [ 'type'=> 'radio', 'label' =>  '', 'required' =>  true, 'form-row'], 'options' =>  ['gender1'=>  'Anh', 'gender2'=> 'Chi'], ]; return $fields; }  

Nhưng không phải trường nào cũng bắt buộc nhập, bạn cần chủ động lưu giá trị của các trường này, hoặc nếu muốn chắc chắn thì sử dụng hook ‘woocommerce_checkout_create_order’ trong WooCommerce để lưu giá trị tùy chỉnh.

 add_action('woocommerce_checkout_create_order', 'wc_checkout_create_order', 10,2); function wc_checkout_create_order($order, $data) { $order-> update_meta_data('_your-field', $value); }  

Biến đối tượng $order, có liên kết với mỗi biến đối tượng khách hàng (Customer), bạn sẽ cũng muốn lưu giá trị trường tùy chỉnh vào thông tin người dùng. Bạn cũng có thể có thể sử dụng API ‘woocommerce_checkout_update_user_meta’ để thực hiện điều này.

 function reigel_woocommerce_checkout_update_user_meta( $customer_id, $posted=[] ) { if (isset($posted['billing_gender'])) { $gender = sanitize_text_field( $posted['billing_gender'] ); update_user_meta( $customer_id, 'gender', $gender); } if(!empty($posted['billing_phone'])) update_user_meta($customer_id, 'phone', $posted['billing_phone']); } add_action( 'woocommerce_checkout_update_user_meta', 'reigel_woocommerce_checkout_update_user_meta', 100, 2 );  

Hiển thị trường tùy chỉnh ở trang lô hàng WooCommerce

Khi khách hàng đặt mua sẽ nhập thêm các giá trị vào trường tùy chỉnh của bạn, giá trị này sẽ lưu vào đơn hàng của khách hàng trong databbase. Bạn sẽ cần hiển thị giá trị trường đó trên trang quản lý đơn hàng WooCommerce.

Ở đây, chúng ta có Hook `woocommerce_admin_order_data_after_billing_address`, & bạn có thể hiển thị dữ liệu bổ xung ở cuối thông tin lô hàng trong Admin. Thêm đoạn code sau vào file functions.php

 add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_billing_infos_to_admin_order_meta', 20, 1 ); function display_billing_infos_to_admin_order_meta( $order ){ echo ' 

'.__('Podaj NIP').': ' . get_post_meta( $order-> get_id(), '_billing_infos', true ) . '

'; }

Vì dữ liệu tùy chỉnh được lưu dạng meta, bạn có thể sử dụng hàm get_post_custom để lấy mọi tin tức tùy chỉnh nếu muốn.

 $custom = get_post_custom( $order-> get_id());  

Tham khảo một số hàm cơ bản lấy tin tức từ đơn hàng.

 //ghi chú lô hàng $order-> get_customer_note(); $order-> get_billing_first_name(); $order-> get_billing_last_name() $order-> get_billing_company() $order-> get_billing_address_1() $order-> get_billing_address_2() $order-> get_billing_city() $order-> get_billing_state() $order-> get_billing_country() $order-> get_billing_email() $order-> get_billing_phone() ..  

Mình sẽ sửa code để hiển thị dữ liệu ở không ít nơi, trong admin trang quản lý lô hàng và hiển thị trên giao diện website khi khách hàng đặt hàng. Cách viết sau giúp bạn quản lý code khoa học, Xem ví dụ chúng ta tạo thêm hàm hiển thị có tên display_order_detail, hàm này sẽ hiển thị giá trị các trường tùy chỉnh bởi khách hàng. Sửa lại hook ‘woocommerce_admin_order_data_after_billing_address’ như sau:

 add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_billing_infos_to_admin_order_meta', 20, 1 ); function display_billing_infos_to_admin_order_meta( $order ){ #$custom = get_post_custom( $order-> get_id()); #echo ' 

'.__('Podaj NIP').': ' . get_post_meta( $order-> get_id(), '_billing_infos', true ) . '

'; display_order_detail($order); } function display_order_detail($order) { $fields = woo_filter_state_billing(); $detail=[]; $custom=get_post_custom($order-> get_id());#_print($t); $dir = ($custom['_billing_gender'][0]=='gender1')? 'Anh':'Chị'; $detail[$dir] = $custom['_billing_first_name'][0]; if($custom['_receive_method'][0]=='receive-method-1') { $detail['Địa chỉ giao hàng'] = $custom['_billing_city'][0].' - '.$custom['_billing_state'][0].' - '.$custom['_billing_country'][0]; } else $detail[]= 'Nhận hàng tại cửa hàng'; $detail['PHƯƠNG THỨC GIAO HÀNG'] = $fields['shipping_method']['options'][$custom['_shipping_method'][0]]['text']; $detail['PHƯƠNG THỨC THANH TOÁN'] = $fields['payment_method']['options'][$custom['_payment_method'][0]]['text']; //bill if($custom['_bill'][0]){ $detail['Xuất hóa đơn Công ty']= '
    '; $detail['Xuất hóa đơn Công ty'].= '
  • Tên Công ty: '. $custom['_bill-company'][0].'
  • '; $detail['Xuất hóa đơn Công ty'].= '
  • Địa chỉ (Address): '. $custom['_bill-address'][0].'
  • '; $detail['Xuất hóa đơn Công ty'].= '
  • Mã số thuế (MST): '. $custom['_tax-code'][0].'
  • '; $detail['Xuất hóa đơn Công ty'].='
'; } $detail['Ghi chú'] = $order-> get_customer_note(); echo '
'; foreach($detail as $label=> $text) { printf('
%s%s
', is_numeric($label)? '': ' '.$label.' : ', $text); } }

Trong admin , truy cập vào trang lô hàng bạn sẽ thấy kết quả giống như sau:

Xem tiếp bài hướng dẫn Tạo thêm trường cho trang thanh toán WooCommerce

Chúc bạn thành công!

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Tùy biến trường thanh toán trong WooCommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang