Thêm trường tùy chỉnh bổ sung vào trang thanh toán WooCommerce

Thêm trường tùy chỉnh bổ sung vào trang thanh toán WooCommerce – Sẽ có lúc bạn thực sự cần thêm trường thanh toán tùy chỉnh WooCommerce vào trang thanh toán theo yêu cầu, đây là công việc nặng nề thực sự. Vì vậy, chúng tôi đã tạo ra bài này để giúp bạn. Hướng dẫn này chính xác giúp bạn nhận thức cách thêm trường tùy chỉnh vào trang thanh toán.

Có nhiều lựa chọn thay thế để sửa đổi trang thanh toán: plugin bên thứ ba, tiện ích mở rộng WooCommerce, phát triển tùy chỉnh. Hãy xem tùy chọn có sẵn để tối ưu hóa thanh toán.

Trường thanh toán tùy chỉnh WooCommerce rất quan trọng ở việc lắp ráp để có thêm dữ liệu từ người mua trước khi họ hoàn tất đơn đặt hàng. Tôi cũng đã giải thích cách bạn tự động tùy chỉnh trường bổ sung như xóa địa chỉ thanh toán, thêm / chỉnh sửa trường thanh toán tùy chỉnh rồi lưu trường tùy chỉnh này vào cơ sở dữ liệu ở Trường thanh toán tùy chỉnh WooCommerce: Chỉnh sửa, xóa trường, email.

Giờ, hãy bắt đầu với hướng dẫn.

Để thêm trường tùy chỉnh vào trang thanh toán. Thực hiện theo phương pháp hoàn toàn khác nhau này:

• Sử dụng Plugin
• Mã hóa

Bằng cách sử dụng Plugin WooCommerce Checkout Manager:

Tải xuống plugin WooCommerce Checkout Manager này, cài đặt nó.

Tiếp đó, Vào Bảng điều khiển quản trị> WooCheckout .

Kết quả hiển thị danh sách tất cả trường từ trang thanh toán đến trang giỏ hàng. Cuộn qua trang rồi xuống phía dưới.

Giờ tìm thấy Thêm lĩnh vực mới Mục như hình dưới đây.

Điền vào giá trị rồi nhấn nút Lưu Thay đổi ở góc trên bên phải.

Giờ nếu bạn truy cập trang Checkout, bạn sẽ thấy trường mới:

Thông qua mã hóa

Phương pháp này thêm trường tùy chỉnh vào trang thanh toán bằng mã được cung cấp. Để bắt đầu với mã hóa, nên thực hiện bước tiếp theo được khai báo dưới đây.

Đầu tiên, cần thực hiện hành động đối với tệp tin.php, tiếp đó sẽ sử dụng mã này để bắt đầu tùy chỉnh trang thanh toán:

Khi đã thêm mã này, trang thanh toán sẽ xuất hiện dưới dạng:

Để xác thực dữ liệu trường tùy chỉnh bằng mã được đưa ra dưới đây:

Giờ chúng tôi đã thêm trường thay thế vào trang thanh toán cùng với kiểm tra xác thực, chúng tôi muốn xác nhận rằng chi tiết được khách hàng nhập vào trường tùy chỉnh, có được lưu hay không.

Điều này được thực hiện nhờ sử dụng mã dưới đây:

Với điều này, chúng tôi đã thêm trường tùy chỉnh vào website WooCommerce chúng tôi sở hữu.

Bạn cũng được chỉnh sửa trường thanh toán WooCommerce nhờ sử dụng plugin WooCommerce Custom Checkout Field Editor.

Xem thêm: Cách tạo một trang web WordPress đa ngôn ngữ

Tùy chỉnh hình thức giao hàng trong trang thanh toán WooCommerce

Vì trang thanh toán thường tăng gấp đôi làm tài nguyên thu thập dữ liệu, nhiều chủ website thường muốn tùy chỉnh trang thanh toán rồi thêm trường tùy chỉnh vào trang thanh toán WooCommerce của họ. Điều này thường liên quan đến việc thêm/ xóa trường khỏi trang.

Để tùy chỉnh trường thanh toán, WooCommerce cung cấp bộ lọc xử lý nhóm trường chính trên trang. Cụ thể, bộ lọc này gồm WooCommerce_checkout_fields (đối với trường thanh toán), WooCommerce_billing_fields (đối với trường liên quan đến thanh toán), WooCommerce_shipping_fields (đối với trường liên quan đến vận chuyển). Bây giờ vì hướng dẫn này liên quan đến trường thanh toán, tôi sẽ chủ yếu làm việc với bộ lọc WooCommerce_checkout_fields.

Tin tốt: Thật dễ dàng để tùy chỉnh trang thanh toán WooCommerce để đảm bảo trang hoàn thành mục đích. Với hướng dẫn ngắn này, tôi sẽ đề cập đến cả trường bổ sung cùng trường loại bỏ.

Xóa trường khỏi Trang Thanh toán WooCommerce

Bắt đầu với ảnh chụp màn hình sau trang thanh toán;

Với mục đích này, tôi sẽ trình bày cách loại bỏ trường Tên, Họ.

Đây là đoạn mã:

Ở đoạn mã trên, bạn thấy hàm custom_fields_WooCommerce. Hàm này lấy đối số $ trường lấy trường thanh toán cần được loại bỏ hoặc xóa unset. Ở đoạn trích, tôi đã bỏ đặt tên và họ.

Đây là cách thanh toán sẽ chăm sóc đoạn trích này:

Thêm các lĩnh vực vào trang thanh toán WooCommerce

Tương tự như loại bỏ trường, thêm trường vào trang thanh toán WooCommerce là vấn đề đơn giản. Đối với điều này, thêm đoạn mã sau:

Đoạn mã trên chứa cả nhãn và giữ chỗ trường mới. Giờ, có những yêu cầu để thiết lập lĩnh vực bắt buộc. Điều này được quan tâm bởi đối số được yêu cầu được đặt thành TRUE. điều này sẽ khiến dấu sao màu đỏ xuất hiện ở cuối tên trường.

Nếu đối số bắt buộc được đặt thành FALSE, trường được đặt thành TÙY CHỌN:

Giá trị trường hiển thị tại trang Đặt hàng WooCommerce

Đoạn mã sau sẽ hiển thị giá trị trường ở trang đặt hàng. Đối với điều này, sử dụng đoạn mã sau:

Đoạn mã này sẽ hiển thị trường ở trang đặt hàng WooCommerce.

Thanh toán WooCommerce là trang rất chức năng yêu cầu thông tin cần thiết rồi tiếp đó giúp khách truy cập thông qua việc bán hàng. Vì trang này thiết kế nhanh, không rắc rối, nên trường ở trang rất cơ bản.

Ở nhiều trường hợp, chủ website WooCommerce thường sử dụng trang thanh toán làm địa điểm thu thập dữ liệu khách hàng thay thế. Kết hợp với trang đích cùng chiến thuật thu thập dữ liệu khác, điều này đồng ý chủ website truy cập dữ liệu khách hàng chất lượng rất cao.

Kết luận

Như bạn thấy tùy chỉnh trang thanh toán WooCommerce là cách tuyệt vời để hợp lý hóa trải nghiệm người dùng cho khách truy cập. Thêm/ xóa trường khỏi trang thanh toán là vấn đề dễ dàng khi thêm đoạn mã. Nếu bạn cần trợ giúp về quy trình, hãy bỏ bình luận, tôi sẽ liên lạc lại với bạn.

Nguồn nhận mẫu website miễn phí tại đây : https://taowebsite.com.vn/mau-website/.