Tùy biến trang checkout WooCommerce với 2 cách đơn giản

  • Được đăng bởi Miliweb

  • 29 Tháng Mười Hai, 2023

WooCommerce là plugin mạnh mẽ giúp bạn xây dựng và quản lý website bán hàng hiệu quả. Dù vậy, plugin này cũng có những hạn chế, đó là trang thanh toán mặc định của nó còn nhiều hạn chế. Người dùng gặp khó khăn khi tùy biến và thay đổi các trường thông tin cần khách hàng nhập vào lúc thanh toán. Vậy nên mình sẽ chia sẻ cách tùy biến trang checkout WooCommerce để bạn có thể cải thiện trải nghiệm khách hàng, từ đó tăng doanh thu.

Lý do bạn nên tùy biến trang checkout WooCommerce

Vì sao nên tùy chỉnh trang checkout WooCommerce

Bạn có thể hiểu nôm na checkout WooCommerce là trang thanh toán của cửa hàng online trên website của bạn khi dùng plugin WooCommerce. Tại đây, khách hàng sẽ nhập thông tin để thanh toán đơn hàng. Vậy nên nó phải đưa ra thông tin đầy đủ về đơn hàng, hình thức thanh toán, phương thức vận chuyển. Sau khi đã thanh toán xong, thông tin đơn hàng sẽ được chuyển qua hệ thống quản lý để xử lý. Nếu bạn biết cách tùy biến trang checkout WooCommerce để khách hàng có được trải nghiệm tốt nhất thì tỷ lệ chuyển đổi cũng sẽ tăng lên.

Những điều bạn sẽ nhận được khi tùy chỉnh trang thanh toán của WooCommerce là:

  • Nâng cao trải nghiệm khách hàng: Trang thanh toán dễ sử dụng giúp khách hàng thấy dễ chịu hơn, không gặp khó khăn trong khâu mua hàng cuối cùng.
  • Tăng doanh thu: Tối ưu trang checkout góp phần rất lớn trong việc tăng tỷ lệ chuyển đổi của website vì khách hàng thao tác dễ dàng hơn.
  • Giảm rủi ro khách bỏ giỏ hàng: Nếu trang payment WooCommerce quá phức tạp và khó sử dụng, khách hàng có thể thoát trang và không mua hàng nữa.
  • Thu thập data chính xác và đầy đủ: Sau khi chỉnh sửa trang thanh toán, bạn có thể lựa chọn những thông tin bạn cần từ khách hàng. Điều này không chỉ giúp xử lý đơn hàng tốt nhất mà còn cần cho việc lưu trữ dữ liệu của khách hàng, tạo ra kho dữ liệu của riêng bạn.
  • Tăng nhận diện thương hiệu: Chỉ bằng việc tùy biến trang checkout WooCommerce, khi thay đổi màu sắc, font chữ, logo, hình ảnh,… bạn có thể đồng bộ nó với thương hiệu của mình giúp tăng độ nhận diện.
  • Dễ dàng thêm nhiều lựa chọn thanh toán: Khi chỉnh sửa WooCommerce payments, bạn thêm được nhiều hình thức thanh toán để khách hàng cũng dễ dàng lựa chọn hơn.

2 cách tùy biến trang Checkout WooCommerce

Tùy biến trang Checkout WooCommerce bằng cách thủ công

Plugin WooCommerce có những tính năng cơ bản để bạn có thể tùy chỉnh trang payment. Hãy sử dụng nó nếu như bạn chỉ thực hiện những thay đổi cơ bản.

Bạn có thể tiến hành theo các bước sau đây:

Bước 1. Thêm mã giảm giá (Coupon)

Vào Dashboard -> WooCommerce -> Setting. Ở tab General, kéo xuống dưới chọn Enable the use of coupon codes. Như vậy là khách hàng có thể điền thêm mã giảm giá lúc thanh toán.

Thêm mã giảm giá trong trang checkout WooCommerce

Bước 2. Thêm mục vận chuyển ở tab Shipping

Mục Calculations, bạn chọn mục Shipping Options rồi tích chọn Enable the shipping calculator on the cart page.

Thêm mục vận chuyển cho trang checkout WooCommerce

Mục Shipping destination, bạn tích chọn Default to customer shipping address là đặt địa chỉ giao hàng mặc định hoặc tích chọn Default to customer billing address là đặt địa chỉ thanh toán mặc định. Bạn chỉ có thể chọn một trong hai. Để lưu lại, bạn chọn Save Changes là đã có thể hiện thị mục vận chuyển trên trang checkout của WooCommerce.

Tùy Biến Vận Chuyển Trong Trang Checkout Woocommerce

Bước 3. Thiết lập quản lý tài khoản & quyền riêng tư

Ở tab Accounts & Privacy bạn cần lựa chọn 2 mục dưới đây:

  • Guest checkout: Nhớ chọn cả 2 ô để khách hàng có thể thêm hoặc xóa thanh toán và thông tin đăng nhập hiện tại
  • Account creation: Bạn chọn ô Allow customers to create an account during checkout, khách hàng sẽ có thể đăng ký trước khi thanh toán hoặc tạo tài khoản. Bạn chọn ô When creating an account, send the new user a link to set their password thì khi khách hàng tạo tài khoản xong sẽ nhận được một link để thêm password.

Tùy Biến Account Creation Trong Trang Checkout Woocommerce

Kế tiếp, bạn kéo xuống dưới cho đến khi thấy phần Privacy policy. Tại đây, bạn nhập thông tin vào ô Checkout Privacy Policy. Như vậy, phần chính sách bảo mật sẽ được hiển thị và khách hàng có thể nhìn thấy lúc thanh toán. Còn nếu bạn không muốn hiển thị chính sách này tại khu vực thanh toán thì không cần điền.

Tùy Biến Privacy Polycy Trong Trang Checkout Woocommerce

Tùy biến trang Checkout WooCommerce bằng plugin Checkout Field Editor

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

Trên thanh menu bên trái trong trang quản trị WordPress, bạn nhấp vào Plugin -> Cài mới

Cài plugin tùy biến trang checkout WooCommerce

Trong ô tìm kiếm bên trên góc phải màn hình, nhập Checkout Field Editor rồi bấm phím Enter. Tại plugin hiện lên bên dưới, bạn chọn Cài đặt -> Kích hoạt

cài đặt plugin checkout field editor

kích hoạt plugin checkout field editor

Sau khi kích hoạt xong plugin, bạn vào WooCommerce, chọn Checkout Form. Lúc này, tất cả trường của form thanh toán đều có ở đây.

Tùy chỉnh trong checkout form của WooCommerce

Bạn có thể tùy chỉnh chúng như sau:

Phần Bill Fields là các trường của phần thanh toán

  • Add field: Thêm một trường mới vào trong phần thanh toán
  • Remove: Xóa một trường ra khỏi phần thanh toán và trang Checkout Editor
  • Disable: Ẩn một trường trong phần thanh toán
  • Enable: Hiện một trường trong phần thanh toán
  • Reset to default fields: Khôi phục về mặc định tất cả các thiết lập
  • Save changes: Lưu thiết lập đã thực hiện.

Phần Shipping Fields là các trường của phần giao hàng, cụ thể như hình dưới.

Shipping Fields gồm các trường giao hàng

Phần Additional Fields chứa một số trường bổ sung khác.

Additional Fields trong trang Checkout WooCommerce

Bước 2. Tùy biến trang Checkout WooCommerce

Ẩn hoặc hiển thị một trường: Bạn đánh dấu các trường cần thay đổi, chọn Enable nếu muốn hiển thị, Disable nếu muốn ẩn rồi chọn Save changes.

Cách ẩn/hiện trường trong trang checkout WooCommerce

Bỏ các trường bắt buộc:
  • Chọn trường muốn bỏ bắt buộc, bấm Edit

Chọn trường cần bỏ bắt buộc trong trang checkout WooCommerce

  • Tích bỏ chọn Required, bấm Edit Field ở phía dưới

Edit checkout field WooCommerce

  • Chọn Save Exchanges để lưu lại

lưu thay đổi bỏ bắt buộc cho trường trang thanh toán WooCommerce

  • Lúc này, các trường được bỏ bắt buộc sẽ hiển thị (tùy chọn), khách hàng có thể nhập thông tin vào đây hoặc không đều được.

Bỏ bắt buộc cho trường trong trang checkout WooCommerce

Khôi phục thiết lập về mặc định:

Nếu bạn muốn phục hồi các thiết lập về mặc định ban đầu, chỉ cần chọn Reset to default fields và bấm OK.

Khôi phục thiết lập mặc định của trang checkout WooCommerce

Thêm một trường mới:

Để thêm một trường mới, bạn vào Add field

Thêm trường mới cho trang checkout

Tiếp theo, bạn điền các thông tin cho trường như sau:

  • Name: Tên mặc định là billing_. Bạn cần điền thêm tên vào sau dấu _ này. Lưu ý rằng tên phải viết liền không dấu, có chứa chữ hoặc số đều được nhưng không được trùng với tên của các trường khác.
  • Type: Bạn chọn Text.
  • Label: Là tên hiển thị phía trên mục để nhập.
  • Validation: Bạn có thể chọn kiểu dữ liệu nhập tại đây, gồm có email, phone, postcode, state. Ví dụ như nếu bạn chọn dạng email thì khi khách hàng nhập không phải là mail sẽ bị báo lỗi.
  • Required: Thiết lập bắt buộc.
  • Enabled: Hiển thị tại form thanh toán.
  • Display in Emails: Hiển thị ở trong mail gửi về.
  • Display in Order Detail Pages: Hiển thị ở trang chi tiết về đơn hàng.

Điền thông tin trường trong trang checkout

Sau khi hoàn tất, bạn chọn Edit Field rồi chọn Save Changes.

Thêm trường mới trong tùy biến trang checkout WooComerce

Lúc này, bạn sẽ nhận được kết quả như sau:

Kết quả thêm trường mới trong trang checkout woocommerce

Kết Quả Tùy Biến Trang Checkout Woocommerce Với 2 Cách đơn Giản

Nhìn chung, cá nhân mình đánh giá việc tùy biến trang Checkout WooCommerce là điều cần làm và rất quan trong trong việc nâng cao trải nghiệm khách hàng, tăng doanh thu. Việc này cũng rất đơn giản, chỉ cần bạn làm theo các bước hướng dẫn của mình ở trên là được.

Giải đáp các câu hỏi thường gặp

Giải đáp thắc mắc khi tùy chỉnh trang checkout WooCommerce

Xoay quanh việc tùy biến trang Checkout WooCommerce vẫn còn một số câu hỏi thắc mắc. Mình sẽ giải đáp những câu thường gặp nhất dưới đây nhé:

  1. Làm sao giữ được các tùy biến trang Checkout khi WooCommerce được cập nhật: Hãy dùng child theme hoặc WooCommerce Customizer.
  2. Không có kiến thức lập trình thì tùy biến trang Checkout được không: Hoàn toàn được, hãy dùng cách sử dụng plugin tùy biến như Checkout Field Editor.
  3. Ngoài Checkout Field Editor còn plugin tùy biến nào được phát triển sẵn không: Có, các plugin tính năng tương tự có thể kể đến WooCommerce Custom Checkout Fields, YITH WooCommerce Checkout Manager, WooCommerce Checkout Manager, Advanced Checkout Fields for WooCommerce,…
  4. Nên sử dụng cách thủ công hay dùng plugin khi tùy biến trang Checkout WooCommerce: Nếu bạn có kiến thức và thời gian, muốn thực hiện nhiều tùy chỉnh phức tạp và mong muốn tối ưu hoàn toàn trang thanh toán thì chọn cách thủ công (thuê lập trình viên nếu muốn tối ưu nhất). Còn nếu bạn muốn tùy biến trang này nhanh chóng, dễ dàng, không tốn phí thì hãy chỉnh sửa thông qua plugin.
Chia sẽ bài viết:

Bài viết liên quan