[Hướng dẫn] Cách sửa trang thanh toán woocommerce bằng plugin

Checkout Field Editor (Checkout Manager) for WooCommerce là plugin sẽ giúp bạn chỉnh sửa thông tin trang thanh toán trong Woocommerce một cách dễ dàng. 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 mà khách hàng phải điền có nhiều trường dữ liệu thông tin 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à billing_first_name (tên của bạn) và billing_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ỉ cần điền 1 lần thôi.
• Tương tự cũng có 2 ô địa chỉ là billing_address_1 và billing_address_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ư billing_company (công ty của bạn), billing_state (tiểu bang), billing_postcode (mã bưu chính) và billing_country (quốc gia) cũng là không cần thiết.

Chỉnh sửa trang thanh toán để tối ưu thông tin khách hàng:

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, mình 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.

Cách chỉnh sửa trang thanh toán woocommerce bằng plugin: Checkout Field Editor (Checkout Manager) for Woocommerce

Bước 1: Cài đặt và kích hoạt Plugin WooCommerce Checkout Field Editor.

Bước 2: Để quản lý các trường dữ liệu thông tin trang thanh toán, bạn vào WooCommerce => Checkout Form

Hướng dẫn các tuỳ chỉnh cơ bản:

• 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;
• Add field là nút để thêm trường dữ liệu thông tin mới;
• Remove để xóa trường dữ liệu bạn muốn;
• Enable để kích hoạt;
• Disable để vô hiệu hóa các dòng thông tin không cần thiết.

Phía dưới là các trường dữ liệu hiện đang sử dụng trong Woocommerce. Theo thứ tự từ trên xuống dưới sắp xếp như nào trong đây thì trang thanh toán bên ngoài website của bạn sẽ hiển thị như thế. Bạn có thể kéo – thả để sắp xếp vị trí, thứ tự tùy ý. Nếu muốn Remove, Enable, Disable thì trước hết cần tích chọn vào ô vuông đằng trước mỗi dòng thông tin.

Cá nhân mình hay sử dụng thì mình chỉ giữ lại trường Họ và tên, Số điện thoại, Email và Địa chỉ là chính. Bạn muốn giữ lại trường nào thì bạn enable nó và disable các trường thông tin khác. Sau đó kéo thả sắp xếp vị trí các trường cho phù hợp.

Muốn sửa dòng dữ liệu nào thì bạn click nút Edit tương ứng bên tay phải của dòng đó sẽ hiện ra bảng:

Giải thích các ô dữ liệu của bảng Edit Checkout Field:

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

Đối với các trường thông tin mình đều không để Label, mình chỉ điền vào ô Placeholder. Một lưu ý quan trọng là ở ô class các bạn nên điều là form-row-wide để chiều dài form được full đều và đẹp hơn nhé! Mục Required các bạn tích vào nếu muốn bắt buộc khách phải điền, còn không thì bỏ tích đi là được.

Sau khi sửa xong các trường dữ liệu, bạn cần phải click nút Save changes để lưu lại.

Được rồi, vậy là đã xong. Hãy cùng vào đặt hàng thử và tối ưu thêm cho phù hợp với mục đích bán hàng của mình nhé!