Cách tùy chỉnh tiện ích giỏ hàng WooCommerce của Elementor  không chỉ giúp bạn tạo ra một giao diện đẹp mắt, đồng bộ với thương hiệu mà còn trực tiếp nâng cao trải nghiệm người dùng và tăng tỷ lệ chuyển đổi. Việc tối ưu từng chi tiết – từ bố cục, màu sắc, đến cách hiển thị trên thiết bị di động – đều góp phần giảm tỷ lệ rời trang và gia tăng doanh số.

Hãy cùng weboteam khám phá ngay các bước tùy chỉnh chi tiết để tạo trang thanh toán chuyên nghiệp!

Cách thay thế Shortcode WooCommerce bằng Widget thanh toán Elementor

Mặc định, trang thanh toán của WooCommerce trong Elementor chỉ chứa một shortcode đơn giản

, hiển thị thông tin thanh toán mà không có nhiều tùy chỉnh. Để cá nhân hóa trang thanh toán, bạn có thể thay thế shortcode này bằng Widget Thanh Toán của Elementor để có toàn quyền kiểm soát giao diện và trải nghiệm người dùng.Các bước thực hiện:

1. Xóa shortcode thanh toán mặc định

• Mở trang thanh toán trong Elementor.
• Tìm và xóa tiện ích chứa shortcode
  .

2. Thêm Widget Thanh Toán Elementor

• Kéo thả widget Checkout vào trang để hiển thị bản xem trước trực tiếp của quy trình thanh toán.
• Điều chỉnh bố cục, màu sắc, kiểu chữ, và các trường thanh toán theo nhu cầu.

Để xem chính xác cách trang thanh toán hoạt động, hãy thêm một số sản phẩm vào giỏ hàng trước khi mở Elementor. Thực hiện bằng cách:

• Vào cửa hàng và thêm sản phẩm vào giỏ hàng.
• Tải lại trình chỉnh sửa Elementor để cập nhật danh sách sản phẩm.

Sau khi hoàn tất tùy chỉnh, bạn sẽ có một trang thanh toán trực quan, chuyên nghiệp và tối ưu hóa trải nghiệm khách hàng.

Tùy chỉnh cài đặt chung của trang thanh toán

Để bắt đầu tùy chỉnh cài đặt chung của trang thanh toán, trước tiên bạn hãy truy cập trình chỉnh sửa Elementor và mở phần cài đặt của tiện ích “Thanh toán” (Checkout Page) trong thanh bên. Bắt đầu bằng cách khám phá các tùy chọn trong tab “Nội dung” (Content).

1. Với mục “Chi tiết thanh toán và vận chuyển”:

•  Nếu bạn bật tùy chọn “Giao hàng đến địa chỉ thanh toán” trong WooCommerce → Cài đặt → Giao hàng.
• Các trường thanh toán và vận chuyển sẽ hiển thị cùng nhau, bạn có thể chỉnh sửa tiêu đề, căn chỉnh nội dung và cá nhân hóa từng trường bằng cách thay đổi nhãn hoặc văn bản gợi ý.
• Tại mục Thông tin bổ sung, bạn có thể tùy chỉnh nội dung dành cho ghi chú đơn hàng hoặc thông tin bổ sung. Hơn nữa, bạn có thể thay đổi nhãn, căn chỉnh hoặc ẩn hoàn toàn phần này nếu không cần thiết.

2. Trong phần Đơn hàng của bạn cung cấp tổng quan về sản phẩm khách hàng đã chọn:

• Trong bố cục hai cột, phần này xuất hiện ở đầu cột bên phải.
• Trong bố cục một cột, nó hiển thị bên dưới phần thanh toán và vận chuyển.

3. Với phần Phiếu giảm giá, bạn có thể điều chỉnh tiêu đề, căn chỉnh và thậm chí tùy chỉnh văn bản liên kết để áp dụng mã giảm giá, giúp quá trình thanh toán trực quan hơn cho khách hàng. Để cài đặt phần Thanh toán, bạn có thể bạn:

• Điều chỉnh vị trí và căn chỉnh nút đặt hàng.
• Tùy chỉnh nội dung thông báo Điều khoản & Điều kiện. Để hiển thị thông báo này, hãy chọn trang Điều khoản & Điều kiện trong WooCommerce rồi Cài đặt mà không cần rời khỏi Elementor theo các bước sau đây:
  1. Nhấp vào biểu tượng menu ở góc trái Elementor.
  2. Chọn Cài đặt trang web → WooCommerce.
  3. Tìm và đặt trang phù hợp trong trường Điều khoản & Điều kiện.

Cách tiện ích giỏ hàng WooCommerce của elementor

Sau khi thiết lập bố cục, bạn có thể chuyển sang tab Kiểu (Style) trong phần cài đặt tiện ích Thanh toán (Checkout) để tinh chỉnh phong cách thiết kế của trang thanh toán, đảm bảo sự đồng bộ với tổng thể cửa hàng của bạn. Dưới đây là cách tùy chỉnh trang thanh toán WooCommerce bằng Elementor ở mục giao diện mà bạn có thể thiết lập:

1. Cài đặt chung cho các phần

Phần này giúp bạn kiểm soát giao diện tổng thể của trang thanh toán. Bạn có thể:

• Điều chỉnh màu nền áp dụng cho toàn bộ các phần.
• Tinh chỉnh đường viền, khoảng cách giữa các phần để tạo sự hài hòa trong bố cục.

2. Kiểu chữ

Bạn có thể cá nhân hóa màu sắc và kiểu chữ của hầu hết nội dung trên trang thanh toán, bao gồm:

• Tiêu đề, tiêu đề phụ;
• Mô tả, tin nhắn;
• Nút radio, hộp kiểm.

Lưu ý: Kiểu chữ của biểu mẫu sẽ được điều chỉnh riêng trong phần tiếp theo.

3. Biểu mẫu

Tại đây, bạn có thể kiểm soát thiết kế của các trường nhập liệu trong biểu mẫu thanh toán, bao gồm:

• Điều chỉnh khoảng cách giữa các cột và hàng của biểu mẫu.
• Tùy chỉnh kiểu chữ, đường viền, nền cho nhãn và trường nhập.
• Thiết kế nút phiếu giảm giá để phù hợp với phong cách tổng thể của website.

4. Tóm tắt đơn hàng

Tùy chỉnh khu vực Tóm tắt đơn hàng giúp bạn kiểm soát cách hiển thị danh sách sản phẩm trong giỏ hàng:

• Điều chỉnh khoảng cách giữa các hàng.
• Thay đổi màu sắc và kiểu chữ cho các mục sản phẩm và tổng đơn hàng để tạo điểm nhấn.

5. Nút mua hàng

Nút mua hàng là yếu tố quan trọng nhất trên trang thanh toán, vì vậy bạn có thể:

• Tùy chỉnh màu sắc, kiểu chữ, đường viền để thu hút sự chú ý.
• Điều chỉnh khoảng cách, kích thước để nút hiển thị rõ ràng và dễ nhấn.

6. Tùy chỉnh nâng cao

Bạn có thể thêm các điều chỉnh riêng biệt cho từng phần cụ thể trên trang thanh toán, bao gồm: Chi tiết thanh toán; Thông tin bổ sung; Địa chỉ giao hàng; Tóm tắt đơn hàng; Phiếu giảm giá và Sự chi trả.

Ví dụ: Nếu muốn làm nổi bật phần Tóm tắt đơn hàng, bạn có thể thêm đường viền tùy chỉnh hoặc thay đổi màu nền.

Cách tối ưu hóa trang thanh toán cho thiết bị di động

Sau khi hoàn thiện trang thanh toán trên máy tính, bước tiếp theo là kiểm tra và điều chỉnh thiết kế trên thiết bị di động và máy tính bảng để đảm bảo trải nghiệm mượt mà cho mọi khách hàng.

Với Elementor, trang thanh toán của bạn mặc định đã được tối ưu hóa cho chế độ phản hồi. Tuy nhiên, bạn vẫn có thể tinh chỉnh thiết kế bằng các công cụ dành riêng cho thiết bị di động. Chỉ cần tìm biểu tượng thiết bị bên cạnh các cài đặt tương ứng để thực hiện điều chỉnh cho từng loại màn hình.

Ví dụ, bạn có thể:

• Điều chỉnh khoảng cách giữa các thành phần để phù hợp với kích thước màn hình nhỏ hơn.
• Tinh chỉnh kích thước chữ, nút bấm để đảm bảo dễ đọc và dễ thao tác.
• Căn chỉnh lại bố cục để tối ưu hóa không gian hiển thị trên thiết bị di động.

Việc tối ưu trang thanh toán trên mọi thiết bị giúp nâng cao trải nghiệm mua sắm, giảm tỷ lệ rời trang và gia tăng tỷ lệ chuyển đổi.

Cách kiểm tra trang thanh toán WooCommerce hiệu quả

Trước khi áp dụng bất kỳ thay đổi nào trên trang thanh toán, hãy kiểm tra kỹ để tránh ảnh hưởng tiêu cực đến trải nghiệm khách hàng và doanh thu. WooCommerce hỗ trợ nhiều phương thức thử nghiệm, bao gồm chế độ test của các cổng thanh toán như Stripe, PayPal và WooCommerce Payments.

Ngoài ra, bạn có thể sử dụng plugin miễn phí WC Order Test, giúp tạo cổng thanh toán giả lập để kiểm tra quy trình. Để thiết lập, chỉ cần truy cập WooCommerce → Cài đặt → Thanh toán và kích hoạt cổng thử nghiệm.

Hiểu cách tùy chỉnh trang thanh toán WooCommerce bằng Elementor giúp bạn tối ưu trải nghiệm và tăng tỷ lệ chuyển đổi. Sử dụng các công cụ mạnh mẽ của Elementor để điều chỉnh giao diện, màu sắc và bố cục theo thương hiệu. Đừng quên kiểm tra trên cả máy tính và di động trước khi áp dụng. Bắt đầu ngay để có trang thanh toán chuyên nghiệp và hiệu quả!

>>>Tham khảo thêm kiến thức hữu ích về Elementor