Xóa bỏ bớt trường không cần thiết ở trang thanh toán WooCommerce

Bạn đang có một website bán hàng WordPress, bạn đang muốn tối ưu lại trang thanh toán để bỏ bớt mấy trường thông tin như tên công ty, Email,… để bớt rườm rà, để tối ưu hơn trong quá trình mua hàng của khách hàng. Vậy trong bài viết này tôi sẽ hướng dẫn các bạn 2 cách để chúng ta có thể bỏ bớt trường thông tin trong trang thanh toán của WooCommerce.

Cách 1: Sử dụng plugin Checkout Field Editor for WooCommerce

Với những bạn nào không muốn đụng vào code thì đây là 1 cách dễ dàng nhất, bạn cần cài đặt 1 plugin Checkout Field Editor for WooCommerce.

Plugin -> Cài mới-> Nhập tên plugin Checkout Field Editor for WooCommerce rồi các bạn cài đặt và kích hoạt plugin.

Sau khi cài đặt và kích hoạt plugin thành công, các bạn cần phải vào cài đặt plugin Checkout Field Editor for WooCommerce, để ẩn các trường thông tin không cần thiết đi

  • CÀI ĐẶT PLUGIN

Tiếp theo bạn bấm vào WooCommerce rồi chọn Checkout Form

Để Xóa bỏ trường không cần thiết trong 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à được.

Còn để sửa đổi nội dung của các trường, bạn bấm vào Edit sau đó sẽ có 1 bảng xuất hiện, bạn cần hiểu các trường đó là nội dung gì, rồi chỉnh sửa là ok

  • Label: Đây là tên trường hiển thị trên trang thanh toán Woocommerce.
  • Placeholder: Chữ chìm trong ô
  • 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 bạn chỉnh sửa xong, các bạn nhớ save để lưu lại là hoàn thành.

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

Đây là cách giành cho các bạn nào không muốn dùng plugin, các bạn cần vào file functions.php trong giao diện

  • Tiếp theo tìm và chọn file functions.php

  • Để xóa bớt một field trong phần thanh toán, bạn chèn code này vào file functions.php của thư mục theme bạn đang dùng.
  • Code này là code mẫu, nếu bạn muốn bỏ thêm các trường khác thì thêm đoạn unset () nữa là được
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
     unset($fields['billing']['billing_postcode']);
     return $fields;
}

Vậy nếu bạn muốn xóa các trường tôi không đề cập ở trên thì làm thế nào.

Đầu tiên bạn cần hiểu dòng unset($fields[‘billing’][‘billing_postcode’]); ở đây bạn thấy 2 giá trị

  • billing: Là Mục Thanh toán
  • billing_postcode: Các ô thông tin

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ỉ 2billing_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ỉ 2billing_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, bây giờ tôi muốn xóa các trường để lại mỗi Tên, Số điện thoại, Địa chỉ nhận hàng thì chỉ cần thêm đoạn code sau vào file functions.php 

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
     unset($fields['billing']['billing_postcode']);
     unset($fields['billing']['billing_state']);
     unset($fields['billing']['billing_address_2']);
	unset($fields['billing']['billing_first_name']);
     unset($fields['billing']['billing_company']);
     unset($fields['billing']['billing_email']);
	unset($fields['billing']['billing_city']);
     unset($fields['billing']['billing_email']);
	unset($fields['billing']['billing_country']);

     return $fields;
}

Và bạn thêm đoạn code này vào css để tránh lỗi không có địa chỉ nhé.

p#billing_country_field {
display: none;
}

Vậy khi thêm đoạn code này vào, chúng ta sẽ có 1 trang thanh toán đơn giản như này, để người mua hàng sẽ đỡ ngại khi phải vào 1 trang thanh toán quá nhiều thông tin cần điền như trước

Vậy trong bài viết này tôi đã hướng dẫn các bạn 2 cách để bỏ bớt trường thông tin ở trang thanh toán, Có ai thắc mắc gì, hãy Comment để được giải đáp nhé. Xin chào

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *