Tuần trước, tôi thử mua áo từ một cửa hàng trực tuyến. Chọn mẫu, size, màu ưng ý và tiến hành thanh toán. Trang checkout quá dài và chia thành nhiều trang. Mỗi khi tưởng đã xong, lại phải điền thêm thông tin. Sau 10 phút, tôi bực mình và chuyển sang trang khác.
Dù trải nghiệm của bạn có thể khác, bạn chắc hẳn đã từng gặp bất tiện khiến mình từ bỏ mua hàng trực tuyến. Khách hàng của bạn cũng vậy. Vì vậy, tạo trải nghiệm thanh toán tuyệt vời rất quan trọng cho doanh số. Bài viết này cung cấp mọi thứ bạn cần biết về tùy chỉnh trang thanh toán WooCommerce để nhanh hơn, mượt mà hơn và tốt hơn cho người mua.
TL;DR: Toàn bộ trang WooCommerce dễ dàng tùy chỉnh bằng plugin xây dựng trang như SeedProd hoặc Elementor. Nhưng trước khi thay đổi, hãy sao lưu trang WordPress bằng BlogVault. Sao lưu thời gian thực của BlogVault được thiết kế riêng cho trang WooCommerce. Sao lưu và khôi phục chỉ vài cú nhấp chuột, đảm bảo an toàn tuyệt đối cho trang web.
Trang thanh toán WooCommerce mặc định trông như thế nào?
Trang thanh toán mặc định không tồi, chỉ chưa thực sự tốt. Nó được thiết kế chung chung để hoạt động với nhiều loại sản phẩm. Vì vậy, chúng ta sẽ nói về cách tùy chỉnh, nhưng không bác bỏ trang mặc định. Đó là điểm khởi đầu tuyệt vời, hãy điều chỉnh dựa trên hiểu biết về sản phẩm, khách hàng và hành vi của họ.
Mở trang web ở tab ẩn danh, thêm sản phẩm vào giỏ, tiến hành thanh toán và xem trang mặc định:
Mặc định, trang yêu cầu thông tin thanh toán cơ bản: tên, địa chỉ, số điện thoại. Cũng có chi tiết đơn hàng và phương thức thanh toán. Đây là tối thiểu nhưng chưa tạo trải nghiệm tốt nhất. Bài viết sẽ chỉ cách chỉnh sửa trang checkout theo nhiều cách.
Lưu ý: Trước khi chỉnh sửa, hãy có vài sản phẩm trong giỏ. Đây là cách tuyệt vời để thấy tác động của thay đổi lên trang checkout.
Cách tùy chỉnh trang checkout WooCommerce dễ dàng với Elementor
Bạn có thể chỉnh sửa trang mặc định hoặc dùng mẫu có sẵn. Thử các mẫu bằng cách nhấn Mẫu (Template) ở thanh bên. Nếu muốn chỉnh sửa trang mặc định, phần này dành cho bạn. Cách nhanh nhất là dùng trình xây dựng trang. Chúng tôi dùng Elementor phổ biến, các trình xây dựng khác hoạt động tương tự. Elementor dễ cài đặt, sử dụng và có nhiều widget chuyên biệt cho WooCommerce.
Để chỉnh sửa trang checkout, chỉ cần widget Checkout của Elementor. Thay shortcode woocommerce_checkout bằng widget, bạn sẽ có trang checkout hoàn toàn tùy chỉnh. Nó hoạt động tốt cùng widget Cart của Elementor, làm cho thiết kế dễ dàng. Lưu ý: cần bản Pro của Elementor để dùng các widget này. Nếu bạn quyết định đầu tư, các bước sau:
- Cài đặt và kích hoạt Elementor: Trên bảng điều khiển WordPress, vào Plugin > Thêm mới. Tìm Elementor, nhấn Cài đặt và Kích hoạt. Sẽ cài Elementor Pro.
- Thêm khóa cấp phép: Nhấn Elementor ở thanh bên. Chọn Giấy phép, thêm khóa, nhấn Kích hoạt. Plugin sẵn sàng sử dụng.
- Mở trang checkout trong trình soạn thảo Elementor: Di chuột qua Trang > Tất cả trang. Di chuột qua Trang Checkout > Chỉnh sửa. Ở trên cùng, nhấn Chỉnh sửa với Elementor. Đợi giây lát để mở trong trình soạn thảo.
- Làm quen với chỉnh sửa Elementor: Elementor làm việc theo các khu vực ngang (sections) tùy chỉnh số cột. Nhấn + để thêm khu vực, chọn số cột và bố cục. Kéo thả phần tử từ thanh bên vào cột. Tùy chỉnh từng phần tử từ thanh bên. Cài đặt hiện ra khi chọn từng phần tử.
- Thay shortcode checkout bằng widget Checkout: Xóa shortcode, thêm widget Checkout từ thư viện bên trái. Sẽ thấy bản xem trước trang checkout Elementor.
- Tùy chỉnh trang checkout: Khám phá nhiều cài đặt của Widget Checkout Elementor ở thanh bên.
Một số cài đặt bạn có thể thay đổi:
- Chung (General): Chọn bố cục 1 hoặc 2 cột, thậm chí làm một cột dính (sticky).
- Thay đổi biểu mẫu thanh toán hoặc vận chuyển: Chỉnh sửa tiêu đề, placeholder và từng trường của các biểu mẫu.
- Thông tin bổ sung: Cung cấp khu vực đặc biệt để khách hàng thêm hướng dẫn hoặc thông tin cho đơn hàng.
- Cài đặt mã giảm giá: Tùy chỉnh căn chỉnh và chữ in cho mã giảm giá.
Chỉnh sửa thêm bằng cách nhấn Kiểu dáng (Style):
- Nút mua hàng: Thay đổi màu sắc, văn bản, khoảng cách cho nút mua hàng.
- Tóm tắt đơn hàng: Chọn chữ in và khoảng cách cho danh sách sản phẩm.
- Chữ in (Typography): Tùy chỉnh tất cả văn bản trừ biểu mẫu.
- Biểu mẫu (Forms): Tùy chỉnh chữ in và màu sắc biểu mẫu. Dùng cài đặt Khoảng cách hàng (Rows Gap) để tăng khoảng cách.
- Xem lại trang ở chế độ Mobile: Thiết kế đáp ứng rất quan trọng, dùng chế độ xem tích hợp của Elementor để xem trang trên các kích thước màn hình khác nhau.
Chỉnh sửa trang checkout mới chỉ bề mặt. Elementor và WooCommerce là tổ hợp mạnh mẽ để làm cho cửa hàng của bạn nổi bật.
Chúng ta đã nói về việc tùy chỉnh toàn bộ trang checkout với Elementor. Nhưng nếu không muốn dùng plugin như Elementor và thích dùng trình soạn thảo tích hợp? Hãy đọc tiếp để xem cách làm.
Cách tùy chỉnh thiết kế trang checkout với trình soạn thảo tích hợp
Phần này nói về cách dùng trình soạn thảo Gutenberg để thay đổi trang checkout WooCommerce. Để mở trang trong trình soạn thảo, di chuột qua Trang Checkout > nhấn Chỉnh sửa.
Điều này dẫn đến Trình soạn thảo Khối Gutenberg. Trình soạn thảo làm việc theo các khối ngang của các loại nội dung khác nhau. Bạn có thể thêm văn bản, hình ảnh, tiêu đề bằng cách thêm khối từ thư viện bên trái. Mỗi khối tùy chỉnh riêng biệt. Thư viện khối ở thanh bên, nhấn + góc trên bên trái. Thay đổi cài đặt khối bằng cách nhấn nút bánh răng góc trên bên phải của tab khối.
Bạn cũng sẽ thấy shortcode trên trang thực tế. Shortcode là cách WooCommerce đưa các trường checkout vào trang. Nó trông như sau:
woocommerce_checkout
Không xóa shortcode này. Bạn có thể thêm hình ảnh hoặc văn bản bên dưới và bên trên shortcode. Sau này chúng ta sẽ nói về chỉnh sửa các trường đó. Hiện tại, hãy nói về cách thay đổi thiết kế chung. Các bước:
Thêm văn bản
- Thêm widget Đoạn văn (Paragraph): Thêm văn bản dưới và trên shortcode. Bạn sẽ thấy chữ "Gõ/chọn khối". Kéo thả widget Đoạn văn hoặc bắt đầu gõ văn bản mong muốn. Nhấn đúp để chuyển khối khác.
- Tùy chỉnh văn bản: Chỉnh sửa chữ in và màu sắc trong tab khối bên phải. Chỉ cần chọn văn bản hoặc khối.
Để thêm tiêu đề, thêm widget Tiêu đề (Header) và chỉnh sửa tương tự. Có nhiều kích thước H1, H2, v.v. để chọn.
Thêm hình ảnh
- Thêm widget Hình ảnh (Image): Nhấn + góc trên bên trái, gõ Image trong thanh tìm kiếm. Chọn loại widget Hình ảnh và nhấn, hoặc kéo thả vào cột.
- Chọn hình ảnh: Chọn từ thư viện media bằng cách nhấn Thư viện media, hoặc Tải lên để chọn file từ máy tính. Có thể thêm chú thích.
Thêm nút bấm
- Thêm widget Nút (Button): Tìm trong thanh tìm kiếm thư viện khối.
- Tùy chỉnh nút: Thay đổi nhãn, căn chỉnh, chữ in nhãn trong cửa sổ bật lên. Cũng đổi màu, viền, kích thước trong cài đặt khối.
- Gán liên kết cho nút: Nhấn nút URL trong cửa sổ bật lên, dán liên kết trang muốn liên kết.
Khám phá các widget khác trong trình soạn thảo khối để tùy chỉnh toàn bộ trang. Chúng tôi cũng khuyên xem trước trang bằng cách nhấn Xem trước (Preview) góc trên bên phải. Khi xong, nhấn Cập nhật (Update).
Mặc dù Gutenberg làm được nhiều việc, nhưng không thể thay đổi các trường cụ thể. Phần tiếp theo sẽ nói về cách làm những thay đổi đó.
Cách tùy chỉnh các trường trang checkout
Thay đổi các trường trang checkout có tác động lớn hơn bạn nghĩ. Nó thực sự định nghĩa trải nghiệm cho khách hàng. Có hai cách: dùng plugin quản lý trường hoặc thủ công. Chúng ta sẽ nói về cả hai.
Tùy chỉnh trường trang với tiện ích mở rộng
Chúng tôi dùng plugin Checkout Field Manager cho WooCommerce. Bạn phải mua tiện ích mở rộng. Sau khi mua, các bước bắt đầu:
- Cài đặt và kích hoạt plugin: Trên wp-admin, di chuột qua Plugin > Thêm mới. Nhấn Tải plugin lên > Chọn file > chọn thư mục zip vừa tải. Nhấn Cài đặt ngay và Kích hoạt.
- Chỉnh sửa hoặc thêm trường trong Cài đặt WooCommerce: Di chuột qua WooCommerce > Checkout. Nhấn Thanh toán, Vận chuyển và Bổ sung ở trên cùng, quản lý tất cả trường như sau:
- Vô hiệu hóa trường: Tắt các trường không cần thiết bằng cách bật cột Vô hiệu hóa (Disabled).
- Bắt buộc một số trường: Bật Bắt buộc (Required) để làm cho một số trường bắt buộc.
- Chỉnh sửa giao diện trường: Thay đổi căn chỉnh trái, phải hoặc rộng bằng menu thả xuống cột Vị trí (Positions).
- Chỉnh sửa nội dung hiện có: Nhấn Chỉnh sửa cuối trường liên quan, cửa sổ bật lên hiện ra. Thay đổi Tên, Loại, Nhãn, Mô tả, v.v. Sau đó nhấn Lưu.
- Thêm trường mới: Nhấn + Thêm trường mới góc trên bên trái. Điền chi tiết như ý. Nhấn Lưu.
- Lưu thay đổi: Khi xong, nhấn Lưu góc dưới bên trái.
Tùy chỉnh trường trang với mã code
Nếu bạn rành code, có thể thêm code vào file functions.php của theme. Khi sửa theme bằng code, nên tạo child theme trước và sửa child theme. Điều này bảo toàn thay đổi khi theme cập nhật.
Lưu ý: Checkout Field Manager (tiện ích mở rộng trước) ghi đè thay đổi trong functions.php. Vì vậy không thể dùng song song.
Cũng quan trọng: hiểu cách WooCommerce tải các trường trang. WooCommerce đưa trường qua bộ lọc (filter). Cho phép thêm code tùy chỉnh để thay đổi trường. Với trang checkout WooCommerce, bộ lọc là:
$this->checkout_fields = apply_filters(‘woocommerce_checkout_fields’, $this->checkout_fields);
Điều này có nghĩa là hook vào woocommerce_checkout_fields có thể ghi đè code hiện có. Hook là các đoạn code sửa đổi file lõi WordPress. Trang web có một số hook có sẵn:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- Woocommerce_checkout_after_order_review
- Woocommerce_after_checkout_form
Ngoài ra, có danh sách hook dài WooCommerce cung cấp. Bạn có thể xem danh sách hook trên Business Bloomer giúp hình dung các hook. Bây giờ nói về cách thay đổi trường.
Thay đổi placeholder trong trường order_comments
// Hook vào
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Hàm hook – $fields truyền qua filter
function custom_override_checkout_fields( $fields )
$fields[‘order’][‘order_comments’][‘placeholder’] = ‘My new placeholder’
return $fields
}
Thay đổi nhãn trường order_comments
// Hook vào
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Hàm hook – $fields truyền qua filter!
function custom_override_checkout_fields( $fields )
$fields[‘order’][‘order_comments’][‘placeholder’] = ‘My new placeholder’
$fields[‘order’][‘order_comments’][‘label’] = ‘My new label’
return $fields;
}
Xóa một trường
// Hook vào
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Hàm hook – $fields truyền qua filter!
function custom_override_checkout_fields( $fields ) {
unset($fields[‘order’][‘order_comments’])
return $fields;
}
Có bài viết WooCommerce về dùng code tùy chỉnh trường checkout.
Bây giờ nói về cách thay đổi bố cục trang Checkout.
Cách thay đổi bố cục trang checkout
Bạn có thể tùy chỉnh bố cục trang WooCommerce bằng cách thêm action hook. Dưới đây là một số cách:
Dùng plugin quản lý snippet
Bắt đầu với phương pháp dễ hơn: thêm bằng plugin quản lý snippet.
- Cài đặt và Kích hoạt Plugin Quản lý Snippet: Dùng Code Snippets. Tìm trong thư mục plugin. Di chuột qua Plugin > Thêm mới. Tìm Code Snippets > nhấn Cài đặt và Kích hoạt.
- Sao chép hook: Đi đến thư viện hook WooCommerce, sao chép code hoặc tạo hook tùy chỉnh trong trình soạn thảo văn bản và sao chép. Ví dụ, muốn thêm phần Điều khoản & Điều kiện ở dưới cùng, sao chép code sau.
- Thêm code: Di chuột qua Code Snippets bên trái > Thêm mới. Đặt tên nhận diện hook. Chọn tab functions. Dán code dưới cùng. Đảm bảo chọn Chạy Snippet Mọi nơi (Run Snippet Everywhere) > nhấn Lưu thay đổi và Kích hoạt. Đã thêm hook thành công.
Thêm code thủ công
Nếu muốn thêm vào file functions.php của theme, các bước:
- Mở trình soạn thảo file theme: Di chuột qua Giao diện (Appearance) thanh bên > nhấn Trình soạn thảo file Theme.
- Sao chép code hook: Sao chép từ thư viện WooCommerce hoặc tạo tùy chỉnh trên trình soạn thảo văn bản và sao chép. Như phần trước, nếu muốn thêm phần T&C, đây là code bạn sao chép. Có thêm trong thư viện hook WooCommerce.
- Chỉnh sửa file functions.php: Bên phải, cuộn menu file đến functions.php. Dán code sao chép > nhấn Cập nhật File. Chúc mừng. Đã thêm hook vào theme.
Plugin và tiện ích mở rộng bổ sung cho trang checkout
Dưới đây là một số tiện ích mở rộng khuyên dùng vì chắc chắn giúp tạo trải nghiệm checkout tuyệt vời:
- WooCommerce Checkout Addons: Cho phép khách hàng thêm dịch vụ bổ sung như gói quà.
- WooCommerce One Page Checkout: Biến bất kỳ trang nào thành trang checkout, khách hàng chọn và mua ngay trên cùng một trang.
- WooCommerce Social Login: Khách hàng đăng nhập bằng mạng xã hội thay vì email/số điện thoại.
- YITH WooCommerce Order Tracking: Quản lý thông tin vận chuyển dễ dàng, khách hàng theo dõi đơn hàng.
- YITH Advanced Refund System for WooCommerce: Thiết lập hệ thống hoàn tiền.
Tại sao nên tùy chỉnh trang checkout WooCommerce?
Mục tiêu chính của trang checkout là khuyến khích khách hàng mua hàng. Đây là lý do trang checkout tùy chỉnh làm được điều đó:
- Nhanh hơn cho khách hàng: Loại bỏ trường không cần thiết, quy trình mua nhanh hơn, khách ít bỏ giỏ hàng hơn. Quá trình càng lâu, động lực mua càng giảm.
- Bán thêm sản phẩm (Upsell): Dùng trang checkout bán sản phẩm khác liên quan hoặc khách quan tâm. Cơ hội cho thấy sản phẩm họ cần nhưng không biết bạn bán.
- Tạo cảm giác an toàn: Thêm lời đánh giá (testimonials) giúp khách tin tưởng. Minh bạch về lý do yêu cầu thông tin nhất định.
Các cách tốt nhất để tùy chỉnh trang checkout WooCommerce
- Dễ dàng tạo tài khoản: Làm cho quá trình tạo tài khoản không gây khó khăn. Rút ngắn thời gian từ thêm giỏ hàng đến thanh toán. Xóa trường không cần thiết như "Công ty". Nếu có thể, làm thành tùy chọn.
- Thêm yếu tố uy tín: Xây dựng niềm tin tiền khách an toàn.
- Thêm yếu tố bằng chứng xã hội: Khuyến khích khách chia sẻ trải nghiệm mua sắm trên mạng xã hội.
- Chi phí minh bạch: Không có phí phát sinh không cần thiết. Rõ ràng tiền đi đâu. Ví dụ: chỉ thêm phí vận chuyển ngoài giá sản phẩm.
- Cung cấp đủ tùy chọn thanh toán: Cân bằng giữa quá nhiều và quá ít tùy chọn. Dùng cổng thanh toán phổ biến với đối tượng mục tiêu. Chúng tôi có bài viết thêm Stripe hoặc PayPal cho WooCommerce.
Tóm lại
Trang checkout WooCommerce mặc định cơ bản nhưng có thể tùy chỉnh. Mọi khía cạnh đều có thể chỉnh sửa để tạo trải nghiệm mua sắm tuyệt vời. Nhưng trước khi thay đổi, bắt buộc sao lưu trang bằng BlogVault. Đây là bảo hiểm khi có sự cố hoặc vô tình làm trải nghiệm tệ hơn. BlogVault không chỉ sao lưu thời gian thực mà khôi phục cực kỳ dễ dàng.
Câu hỏi thường gặp
Action hook là gì?
Action hook giúp thêm đoạn code vào file lõi ảnh hưởng cách trang web hoạt động. WordPress có thư viện hook khổng lồ để dùng hoặc tự tạo hook tùy chỉnh.
Làm sao chỉnh sửa văn bản trên trang Checkout WooCommerce?
Dùng trình soạn thảo WordPress tích hợp hoặc plugin xây dựng trang để chỉnh sửa font và văn bản. Khuyên dùng SeedProd – dễ dùng, có bản miễn phí và trả phí.
Đâu là nơi thêm hook và filter?
Nên thêm hook và filter vào file functions.php của child theme. Child theme có giao diện giống theme cha nhưng cho phép chỉnh sửa code. Xác định child theme: Giao diện > Theme > tìm theme không có ảnh đại diện. Nếu chưa có, xem bài viết tạo child theme.