Làm thế nào để ẩn / hiện trường thanh toán với Woocommerce Đoạn mã này có thể thực sự hữu ích vì một số lý do. Khi bạn cần thực hiện tùy chỉnh nâng cao đối với thanh toán và các trường của nó, hy vọng bạn sẽ cảm thấy có ích.

Trong đoạn mã của ngày hôm nay, chúng tôi sẽ thêm một hộp kiểm mới và một trường “ẩn” mới – sau đó, nếu hộp kiểm được chọn, trường sẽ hiển thị, nếu không nó sẽ lại biến mất.

TRƯỚC: hộp kiểm thanh toán mới không được chọn – do đó trường mới hiển thị

SAU: hộp kiểm thanh toán mới được chọn – do đó trường mới biến mất

Đoạn mã PHP: Hộp kiểm để ẩn / hiện trường thanh toán tùy chỉnh

[code]

add_filter( ‘woocommerce_checkout_fields’ , ‘bbloomer_display_checkbox_and_new_checkout_field’ );

function bbloomer_display_checkbox_and_new_checkout_field( $fields ) {

$fields[‘billing’][‘checkbox_trigger’] = array( ‘type’ => ‘checkbox’, ‘label’ => __(‘Checkbox label’, ‘woocommerce’), ‘class’ => array(‘form-row-wide’), ‘clear’ => true );

$fields[‘billing’][‘new_billing_field’] = array( ‘label’ => __(‘New Billing Field Label’, ‘woocommerce’), ‘placeholder’ => _x(‘New Billing Field Placeholder’, ‘placeholder’, ‘woocommerce’), ‘class’ => array(‘form-row-wide’), ‘clear’ => true );

return $fields;

}

add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_conditionally_hide_show_new_field’, 9999 );

function bbloomer_conditionally_hide_show_new_field() {

wc_enqueue_js( ” jQuery(‘input

checkbox_trigger’).change(function(){

if (! this.checked) { // HIDE IF NOT CHECKED jQuery(‘

new_billing_field_field’).fadeOut();

jQuery(‘

new_billing_field_field input’).val(”);

} else { // SHOW IF CHECKED jQuery(‘

new_billing_field_field’).fadeIn();

}

}).change(); “);

}

[/code]

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

Bạn đang muốn xóa bỏ bớt một số trường không cần thiết trong trang thanh toán của website bán hàng sử dụng WooCommerce? Mặc định trong Woocommerce thì trang thanh toán của nó khá phức tạp đối với người Việt khi nhập thông tin thanh toán. Bạn muốn bỏ bớt các ô như Tên công ty (Company Name), Quốc gia (Country), Mã bưu điện (Postcode / ZIP), Tỉnh/ Thành phố (Town / City),….nhưng Woocommerce lại không hỗ trợ vô hiệu hóa hoặc xóa các field đó đi. Vậy làm cách nào để xóa những field đó đi một cách dễ dàng nhất. Câu trả lời sẽ có trong bài viết này, bạn hãy đọc và làm theo hướng dẫn dưới đây để có thể xóa bỏ bớt các field không cần thiết ở trang thanh toán trong web bán hàng WordPress nhé.

Hướng dẫn xóa bỏ bớt trường không cần thiết trong Woocommerce

Để xóa bỏ các trường không cần thiết trong trang Checkout Woocommerce mình có 2 cách. Trong bài này mình sẽ hướng dẫn các bạn cả 2 cách. Nếu bạn không thích đụng vào code thì có thể dùng plugin còn bạn nào thích đụng vào code thì cũng có cách cho các bạn luôn 🙂

Cách 1: Sử dụng plugin Woo Checkout Field Editor Pro

Với những bạn không thích đụng vào code thì đây là cách nhanh và đơn giản để bạn có thể loại bỏ các field không cần thiết trong trang thanh toán. Có thể bạn cũng xem qua 1 số trang hướng dẫn sử dụng plugin WooCommerce Checkout Manager để xóa bỏ những trường không cần thiết nhưng giờ plugin này đã bị xóa rồi và mình thấy thì nó cũng không hay lắm. Trong bài này mình giới thiệu với các bạn plugin Woo Checkout Field Editor Pro. Cá nhân mình dùng thấy nó khá nhẹ gọn và rất đơn giản mà hiệu quả.

Đầu tiên các bạn cài đặt plugin Woo Checkout Field Editor Pro vào website. Sau đó truy cập menu WooCommerce -> Checkout Form sẽ thấy giao diện của plugin như sau:

– Xóa bỏ trường không cần thiết ngoài trang thanh toán: Bạn tick chọn trường cần bỏ đó rồi click vào Disable sau đó click vào Save changes để lưu thay đổi là xong.

– Sửa đổi thuộc tính của trường: Để sửa đổi thuộc tính bạn click vào mục Edit tương ứng với trường đó rồi sẽ thấy bảng cài đặt hiện lên như sau:

Ở đây bạn chỉ cần để ý đến các mục:

• Label: Đây là tên trường hiển thị trên trang thanh toán Woocommerce.
• Class: Ở đây bạn có thể đặt tên class cho trường đó để sau có thể tùy chỉnh css riêng.
• Required: Tick vào nếu trường đó là bắt buộc khách hàng phải nhập thông tin vào.
• Clear Row: Tick chọn nếu muốn trường đó nằm 1 mình 1 hàng.
• Enabled: Bật hoặc tắt trường đó. Tick vào nó để bật hiển thị trên trang thanh toán (checkout).

Sau khi tùy chỉnh xong bạn click vào Edit Field để hoàn thành. Sau khi chỉnh sửa xong bạn nhớ phải click vào Save changes để lưu lại toàn bộ các thay đổi.

Như vậy sau khi bạn loại bỏ các trường không cần thiết đi thì trang thanh toán của Woocommerce chỉ còn đơn giản như này thôi.

Có thể bạn quan tâm: Xóa bỏ /product-category/ trong Url danh mục sản phẩm Woocommerce

Cách 2: Sử dụng code chèn vào file functions.php

Cách này dành cho bạn nào không thích dùng plugin nhé. Để xóa 1 trường trong phần thanh toán bạn chèn code dưới vào file functions.php trong theme bạn đang sử dụng.

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) {

 unset($fields['billing']['billing_state']);
 return $fields;

}

Ở đây, nếu bạn muốn xóa một trường nào đó trong trang thanh toán thì bạn chỉ cần viết thêm 1 dòng unset(……..) nữa là xong.

Như trong dòng code trên bạn thấy dòng code unset($fields[‘billing’][‘billing_state’]); chứ? Ở đây bạn chỉ cần để ý đến 2 giá trị đó là billing và giá trị billing_state . Bây giờ dựa vào danh sách các giá trị dưới đây bạn lựa chọn thay thế nó để xóa những field bạn không muốn hiển thị.

Mục Thanh toán (Billing): billing

• Họ ( First Name): billing_first_name
• Tên (Last Name): billing_last_name
• Tên công ty (Company Name): billing_company
• Địa chỉ (Address): billing_address_1
• Địa chỉ 2: billing_address_2
• Tỉnh/Thành phố (Town/City): billing_city
• Mã bưu điện (Postcode): billing_postcode
• Quốc gia (Country): billing_country
• Bang/Hạt (State): billing_state
• Địa chỉ email (Email Address): billing_email
• Số điện thoại (Phone): billing_phone

Mục Vận chuyển (Shipping): shipping

• Họ ( First Name): billing_first_name
• Tên (Last Name): billing_last_name
• Tên công ty (Company Name): billing_company
• Địa chỉ (Address): billing_address_1
• Địa chỉ 2: billing_address_2
• Tỉnh/Thành phố (Town/City): billing_city
• Mã bưu điện (Postcode): billing_postcode
• Quốc gia (Country): billing_country
• Bang/Hạt (State): billing_state

Mục Thêm thông tin ghi chú (Additional Infomation): order

• Ô thêm ghi chú: order_comments

Như vậy dựa theo hướng dẫn ở trên mình muốn xóa bỏ các trường Tên công ty, Quốc gia, Địa chỉ 2, Tỉnh/Thành phố, Bang/Hạt, Mã bưu điện thì chỉ cần thêm đoạn code sau:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); function custom_override_checkout_fields( $fields ) {

 unset($fields['billing']['billing_company']);
 unset($fields['billing']['billing_country']);
 unset($fields['billing']['billing_address_2']);

unset($fields['billing']['billing_city']); unset($fields['billing']['billing_state']); unset($fields['billing']['billing_postcode']);

 return $fields;

}

Sau khi thêm đoạn code trên và lưu lại file functions.php là đã có thể xóa bỏ được những trường không cần thiết và bạn sẽ được trang thanh toán gọn gàng và dễ dàng cho khách hàng như sau:

Như vậy là xong rồi nhé. Nếu hay nhớ like và share ủng hộ blog nhé. Và nhớ theo dõi các bài viết tiếp của Nguyễn Hùng nhé 🙂

Internet là nơi mình học được những gì về Wordpress, SEO, SEM, MMO và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng nó sẽ hữu ích với bạn.