Hướng dẫn thêm/xóa các fields trong trang Check-out của Woocommerce
(Thao Marky’s Productions) Woocommerce là 1 plugin hỗ trợ cho chúng ta trong việc tạo 1 website bán hàng với đầy đủ các tính năng cần thiết và nâng cao. Tuy nhiên có khá nhiều chức năng mà chúng ta không sử dụng đến.
Trong bài viết này Thao Marky hướng dẫn các bạn thêm/xóa các Fields trong trang check out sử dụng Woocommerce của WordPress
1. Xóa 1 Custom Fields bất kì
Mặc định trang Checkout của Woocommerce sẽ cho ta rất nhiều trường (mục) để khách hàng nhập vào khi Order sản phẩm như:
* Phần thông tin người mua
- lựa chọn quốc gia
- Họ tên
- Tên công ty
- Địa chỉ (2 dòng)
- Thành phố
- Mã Zip Code
- Số điện thoại
* Phần thông tin địa chỉ Ship hàng (nếu khác với địa chỉ người mua)
Phần này cũng giống phần ở trên nhưng bổ sung thêm 1 trường là Order Notes (ghi chú thêm của người mua hoặc sản phẩm)
Để giảm bớt số mục cần phải nhập của Khách hàng (những phần không cần dùng đến), chúng ta nên remove (xóa bỏ) đi trong Code. Ví dụ mình muốn xóa phần Order comments (thông tin thêm về đơn hàng).
Remove Order Notes in Checkout Woocommerce |
Để thực hiện điều này bạn vào file functions.php và Paste đoạn code này vào
/*Remove Custom Fields in Checkout Woocommerce*/ // Hook in add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ ); // Our hooked in function – $fields is passed via the filter! function custom_override_checkout_fields( $fields ) { unset($fields[‘order’][‘order_comments’]); return $fields; }
Để xóa các phần khác ta cũng làm tương tự, ví dụ mình muốn xóa dòng địa chỉ thứ 2 trong phần địa chỉ của cả mục Billing và Shipping ta thêm 2 dòng này vào dưới dòng
unset($fields[‘order’][‘order_comments’]);
unset($fields[‘billing’][‘billing_address_2’]); unset($fields[‘shipping’][‘shipping_address_2’]);
Lưu lại và ra trang checkout để xem kết quả.
2. Thêm 1 Custom Fields mới
Với mỗi website bán hàng thì người bán lại muốn có thêm các mục cần thu thập thông tin từ khách hàng để phục vụ cho việc giao hàng hoặc hậu mãi sau bán hàng. Để thêm 1 mục nào vào trang thanh toán thì ta mở file functions.php ra và làm như sau
/** * Add the field to the checkout **/ add_action(‘woocommerce_after_order_notes’, ‘my_custom_checkout_field’); function my_custom_checkout_field( $checkout ) { echo ‘<div id=”my_custom_checkout_field”><h3>’.__(‘Field Test’).'</h3>’; woocommerce_form_field( ‘my_field_name’, array( ‘type’ => ‘text’, ‘class’ => array(‘my-field-class form-row-wide’), ‘label’ => __(‘Fill in this field’), ‘placeholder’ => __(‘Enter something’), ), $checkout->get_value( ‘my_field_name’ )); echo ‘</div>’; } /** * Process the checkout **/ add_action(‘woocommerce_checkout_process’, ‘my_custom_checkout_field_process’); function my_custom_checkout_field_process() { global $woocommerce; // Check if set, if its not set add an error. if (!$_POST[‘my_field_name’]) $woocommerce->add_error( __(‘Please enter something into this new shiny field.’) ); } /** * 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 ($_POST[‘my_field_name’]) update_post_meta( $order_id, ‘Field Test’, esc_attr($_POST[‘my_field_name’])); }
Lưu lại và ra trang checkout xem kết quả, đã hiển thị 1 Field mới tên là Field Test rồi đúng ko nào?
Insert New Customs Fields in Checkout Woocommerce |
echo ‘<div id=”my_custom_checkout_field”><h3>’.__(‘Field Test‘).'</h3>’; ‘label’ => __(‘Fill in this field‘), ‘placeholder’ => __(‘Enter something‘), if ($_POST[‘my_field_name’]) update_post_meta( $order_id, ‘Field Test‘, esc_attr($_POST[‘my_field_name’]));Tìm trên Google
- Hướng dẫn thêm/xóa các fields trong trang Check-out của Woocommerce
- Remove/Insert Custom Fields in checkout woocommerce
- Thêm Custom Fields mới trong trang thanh toán Woocommerce
- Xóa bớt Custom Fields trong trang thanh toán Woocommerce
- Tùy biến trang thanh toán Woocommerce
- Tùy tiến trang checkout woocommerce
- Thiết kế website bằng WordPress dùng plugin Woocommerce
- How to create website wordpress using woocommerce
Tags: woocommerce