Tùy chỉnh trang thanh toán checkout trong Woocommerce

Tùy chỉnh trang thanh toán checkout trong Woocommerce

Hầu hết các website WordPress đều sử dụng plugin Woocommerce để làm website bán hàng vì tính thuận tiện và phổ biến của nó. Tuy nhiên trang thanh toán checkout mặc đinh của Woocommerce có rất nhiều trường bắt nhập thông tin khi đặt hàng, điều này làm người dùng khó chịu và tốn thời gian. Trong bài viết này CVM hướng dẫn các bạn tối ưu bỏ bớt các trường nhập thông tin tuỳ chỉnh trang thanh toán checkout trong Woocommerce bằng plugin Checkout Field Editor.

Giao diện mặc định trang checkout trong Woocommerce
Giao diện mặc định trang checkout trong Woocommerce

Plugin Checkout Field Editor là gì?

Plugin Checkout Field Editor là một tiện ích mở rộng cho các trang web sử dụng nền tảng WordPress và plugin WooCommerce. Nó cho phép bạn chỉnh sửa và tùy chỉnh các trường thanh toán trong quá trình kiểm tra của WooCommerce một cách dễ dàng.

Khi bạn sử dụng plugin này, bạn có thể thêm, xóa hoặc chỉnh sửa các trường dữ liệu như tên, địa chỉ, số điện thoại, email và bất kỳ trường dữ liệu nào khác mà bạn muốn khách hàng cung cấp trong quá trình thanh toán. Điều này cho phép bạn tùy chỉnh trải nghiệm mua hàng và thu thập thông tin cần thiết cho doanh nghiệp của bạn.

Plugin Checkout Field Editor
Plugin Checkout Field Editor

Plugin Checkout Field Editor cung cấp giao diện trực quan và dễ sử dụng, cho phép bạn tùy chỉnh các trường dữ liệu bằng cách kéo và thả, chỉnh sửa thuộc tính và kiểu dữ liệu, và xác định các trường bắt buộc hoặc tùy chọn. Bạn cũng có thể điều chỉnh vị trí hiển thị của các trường trong quy trình thanh toán.

Với Checkout Field Editor, bạn có thể điều chỉnh quy trình thanh toán để phù hợp với yêu cầu cụ thể của doanh nghiệp của bạn mà không cần thay đổi mã nguồn hoặc tạo một phiên bản WooCommerce tùy chỉnh.

Tuỳ chỉnh trang checkout bằng plugin Checkout Field Editor

Bước 1: Cài đặt plugin Checkout Field Editor

Bạn cài đặt plugin bằng cách vào Dashboard >> Plugins >> Add new, gõ trên thanh tìm kiếm Checkout Field Editor, sau đó cài đặt và kích hoạt. Hoặc tải về trực tiếp từ đây: Checkout Field Editor

Cài đặt plugin Checkout Field Editor
Cài đặt plugin Checkout Field Editor

Bước 2: Cấu hình các trường thông tin

Khi đã kích hoạt xong, bạn vào WooCommerce >> Checkout Form.

cau hinh Checkout Field Editor

Plugin lúc này sẽ hiển thị tất cả thông tin của trang thanh toán, bạn có thẻ chỉnh sửa các thành phần lại

Ví dụ ở đây CVM sẽ ẩn các trường không cần thiết như: billing_last_name, billing_company, billing_country, billing_address_2, billing_city, billing_state, billing_postcode

Các bạn chọn các trường thông tin này và nhấn Remove tếp đó chọn Save Changes

cau hinh Checkout Field Editor 1

Sau khi xoá các trường không thiết các bạn có thể tuỳ chỉnh sắp xếp lại các trường thông tin còn lại sao cho phù hợp bằng cách đưa chuột vào dấu 3 gạch ở đầu kéo thả đến vị trí cần thiết sau đó tiếp tục nhấn Save Changes

cau hinh Checkout Field Editor 2

Sau khi xoá và sắp xếp các trườn thông tin còn lại ta ra ngoài trang Checkout sẽ được giao diện như hình

cau hinh Checkout Field Editor 3

Tuy nhiên độ dài ngắn của các trường vẫn chưa đều nhau nên chúng ta tiếp tục xử lý như sau:

Bạn chọn Edit vào trường thông tin muốn chỉnh

cau hinh Checkout Field Editor 4

Tiếp tục điều chỉnh các thông tin trong trường

cau hinh Checkout Field Editor 5

Các bạn lưu ý các phần sau: 

Class: phần này là css các bạn có thể điền

  • form-row-first: sẽ chia thành 2 cột và trường này ở cột thứ 1
  • form-row-last: trường này ở cột thứ 2
  • form-row-wide: trường thông tin này 1 cột và có độ rộng toàn bộ

Tuỳ vào nhu cầu mà các bạn chọn cho hợp lý, ví dụ bạn chọn trường billing_last_nameclassform-row-first thì trường thông tin sau bạn cần điền classform-row-last để hiển thị cân đối ở ngoài trang Checkout

Phần Required: Nếu các bạn đánh dấu thì trường thôn tin đó bắt buộc người dùng phải nhập

Giao diện trang Checkout sau khi sử dụng plugin Checkout Field Editor
Giao diện trang Checkout sau khi sử dụng plugin Checkout Field Editor

Trên đây CVM đã hướng dẫn các bạn tùy chỉnh trang thanh toán checkout trong Woocommerce bằng plugin Checkout Field Editor, trong quá trình thực hiện có vướng mắc gì hãy liên hệ CVM sẽ hỗ trợ bạn.


Bài viết liên quan

Trang đăng ký tài khoản mặc định của Woocommerce trong WordPress chỉ có trường dữ liệu đó là
Bạn đang sử dụng theme Flatsome kết hợp với plugin Woocommerce làm website bán hàng nhưng ngay cả
Bạn đang sử website WordPress? Khi đăng bài bạn không tìm thấy nút căn đều 2 bên văn
Bạn đang gặp lỗi 502 bad gateway trong WordPress của mình? Lỗi này khá khó chịu vì nó