Hướng dẫn checkout field editor

Ai cũng biết Woocommerce là plugin nổi tiếng nhất giúp xây dựng một trang bán hàng chuyên nghiệp với Wordpress. Tuy nhiên WooCommerce cũng có một số điểm không phù hợp với người Việt Nam. Đặc biệt là phần thông tin thanh toán của khách hàng có nhiều trường dữ liệu dư thừa, ví dụ:

  • Mặc định plugin Woocommerce chia phần họ tên của khách hàng thành 2 phần tách biệt là First Name (tên của bạn) và Last Name (họ của bạn). Điều này là không phù hợp với thói quen của người Việt Nam. Để tiết kiệm thời gian cũng như tạo ra sự tiện lợi cho khách hàng thì chúng ta chỉ cần để 1 trường dữ liệu duy nhất là Họ và Tên để khách hàng chỉ phải điền 1 lần thôi.
  • Tương tự cũng có 2 ô địa chỉ là Address 1Address 2, trong khi chúng ta chỉ cần 1 ô địa chỉ là đủ.
  • Ngoài ra, mặc định Woocommerce cũng có trường dữ liệu như Company (công ty của bạn), State (tiểu bang), Postcode (mã bưu chính) và Country (quốc gia) cũng là không cần thiết.

Với một trang bán hàng thông thường thì chúng ta chỉ cần thu thập những dữ liệu sau:

  • Họ và tên của khách hàng;
  • Số điện thoại liên hệ;
  • Địa chỉ email (để tạo tài khoản);
  • Địa chỉ chi tiết nơi nhận hàng;

Khi đó những trường dữ liệu dư thừa hoặc không phù hợp nên được ẩn đi. Có 2 lợi ích rõ ràng:

  • Một là để phần điền thông tin trông gọn gàng, vừa đủ, tiết kiệm thời gian nhập liệu cho khách hàng.
  • Hai là để tối ưu cơ sở dữ liệu. Database không phải lưu trữ những thứ không cần thiết.

Để làm việc này các bạn có nhiều cách, chẳng hạn như thêm các đoạn code vào file function.php của theme hoặc sửa trực tiếp tại thư mục plugin. Tuy nhiên tác động bằng code thì sau này mỗi khi update plugin hoặc theme thì các tùy chỉnh của bạn sẽ trở về mặc định. Hơn nữa không phải ai cũng giỏi về code nên trong bài viết này tôi sẽ hướng dẫn các bạn chỉnh sửa các trường dữ liệu khách hàng bằng cách sử dụng plugin.

Plugin các bạn cần là Woo Checkout Field Editor Pro.

Điều kiện để plugin hoạt động đương nhiên là bạn phải có Woocommerce rồi.

Hướng dẫn sử dụng Woo Checkout Field Editor Pro

Bước 1: Cài đặt và kích hoạt WooCommerce Checkout Field Editor (Manager) Pro. Xem hướng dẫn tại đây nếu bạn chưa biết!

Hướng dẫn checkout field editor
Woo Checkout Field Editor Pro

Bước 2: Bạn vào WooCommerce => Checkout Form để quản lý các trường dữ liệu.

Hướng dẫn checkout field editor
WooCommerce Checkout Field Editor Pro

  • Mặc định bạn đang ở phần Billing Fields (thông tin thanh toán);
  • Shipping Fields là phần thông tin vận chuyển;
  • Additional Fields là thông tin thêm;
  • Nút Add field để thêm trường dữ liệu mới;
  • Remove để xóa;
  • Enable để kích hoạt;
  • Disable để vô hiệu hóa.

Phía dưới là các trường dữ liệu hiện đang sử dụng. Theo thứ tự từ trên xuống dưới trong đây sắp xếp như nào thì bên ngoài trang thanh toán sẽ hiển thị như thế. Bạn có thể kéo – thả để sắp xếp tùy ý.

Muốn sửa phần nào thì bạn click nút Edit tương ứng bên tay phải sẽ hiện ra bảng:

Hướng dẫn checkout field editor

Ý nghĩa của các ô dữ liệu:

  • Name là tên (hoặc ID) lưu trong cơ sở dữ liệu.
  • Type là thể loại/định dạng cho phép nhập liệu (ví dụ text là văn bản, tel là số điện thoại, email là thư điện tử,…)
  • Label là tên hiển thị.
  • Placeholder là nội dung gợi ý cho khách hàng điền thông tin.
  • Class là thuộc tính CSS của vùng nhập liệu (bạn sử dụng form-row-wide nếu muốn đó là 1 dòng duy nhất, muốn chia thành 2 cột thì cột bên trái sử dụng form-row-first và cột bên phải sử dụng form-row-last để chia)
  • Validation là điều kiện/quy tắc bắt buộc. Bạn có 2 lựa chọn: phone là định dạng số điện thoại, email là định dạng thư điện tử. Tức là nếu dữ liệu khách hàng nhập vào đây không đúng định dạng thì sẽ xảy ra lỗi. Điều này nhằm hạn chế khách hàng khai báo thông tin linh tinh.
  • Required nếu có thì không được bỏ trống.

Bước 3: Sau khi sửa xong bạn phải click nút Save changes để lưu lại.