WooCommerce: Hiển thị các lỗi Required Field (bắt buộc nhập) trong Checkout

Hiển thị các lỗi Required Field (bắt buộc nhập) trong Checkout? Không chỉ riêng các trang web bán hàng, ngay cả các trang web thông thường việc cung cấp thông tin “Khách” là điều hết sức cần thiết. Tuy nhiên, làm thế nào để đặt lệnh bắt buộc phải điền thông tin vào thì mới cho thực hiện bước tiếp theo? Đừng lo lắng! WooCommerce giúp ta giải quyết vấn đề đó.

Hệ thống sẽ thông báo lỗi trên trang thanh toán chứ? Đương nhiên rồi, khi bạn cố gắng đặt hàng mà chưa đầy đủ thông tin hệ thống sẽ hiển thị tên đầu trang thông báo về mục nào bạn chưa hoàn thành, khi bạn cuộn xuống để điền lại, tại mục đó cũng sẽ hiển thị lỗi cho bạn và bạn có thể dễ dàng tìm thấy nó mà ko cần phải nhớ tên lỗi hiển thị ở đầu trang.

Cũng khá hiểu cho những người mới bắt đầu làm quen với nó, vậy các bạn hãy xem hình bên dưới:

WooCommerce: Hiển thị các lỗi Required Field (bắt buộc nhập) trong Checkout

Trong hình trên, khi chúng ta đã điền các thông tin khác nhưng không điền vào ô “Last name” và “Street address” thì trên trang sẽ xuất hiện 2 dòng thông báo lỗi “màu đỏ” (bắt buộc nhập). Hoặc khi bạn đã nhập nhưng sai định dạng, chúng cũng sẽ báo lỗi.

Đoạn PHP: Hiển thị các lỗi Required Field (bắt buộc nhập) trong Checkout.

Phần 1 (PHP): In các lỗi Required Field (bắt buộc nhập) trong Checkout.

Phần đầu tiên là thay thế PHP. Về cơ bản, chúng tôi tìm kiếm tất cả các trường có Label và ô bắt buộc, và giữa Label và ô bắt buộc nhập chúng tôi thêm một khoảng có chứa lỗi thường là dòng nhắc nhở “màu đỏ” tương tự như ví dụ ở hình trên.

Mặc định, sẽ được đặt là display: none, được hiển thị dưới dạng ẩn khi khách hàng chưa nhấn nút “xác nhận”.

[code]

add_filter( ‘woocommerce_form_field’, ‘bbloomer_checkout_fields_in_label_error’, 10, 4 );

function bbloomer_checkout_fields_in_label_error( $field, $key, $args, $value ) {
if ( strpos( $field, ‘</label>’ ) !== false && $args[‘required’] ) {
$error = ‘<span class=”error” style=”display:none”>’;
$error .= sprintf( __( ‘%s is a required field.’, ‘woocommerce’ ), $args[‘label’] );
$error .= ‘</span>’;
$field = substr_replace( $field, $error, strpos( $field, ‘</label>’ ), 0);
}
return $field;
}

[/code]

Phần 2 (PHP): Hiển thị các lỗi Required Field (bắt buộc nhập) trong Checkout.

Bây giờ các đoạn đó đã được in trên trang, chúng tôi cần hiển thị chúng trong trường hợp người dùng đặt hàng nhưng quên điền vào trường bắt buộc.

Điều này thường được thực hiện thông qua xác thực JavaScript… nhưng WooCommerce đã làm điều đó cho chúng ta.

WooCommerce JS thêm một lớp CSS có tên là “woocommerce-invalid-Requi-field” vào một trường bắt buộc chưa được điền.

Mỗi trường sẽ nhận được lớp này và tạo ra lỗi. Vì vậy, rất may, chúng ta không cần JS để hiển thị các đoạn ẩn đó, chúng ta có thể chỉ cần thiết đặt các lớp!

[code]

.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
color: #e2401c;
display: block !important;
font-weight: bold;
}

[/code]

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).

Dịch vụ thiết kế website chuyên nghiệp tại Web MTP

Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!

Website: https://webmtp.com/

Hotline: 0931 912 379

WooCommerce: Thêm số điện thoại người nhận hàng trong Checkout

Viết bình luận





Mời bạn xem nhiều bài hấp dẫn khác

Phương pháp SEO tăng thứ hạng của website trên Google

Tìm hiểu phương pháp chọn từ khóa chuẩn SEO

Plugin giúp bảo mật website WordPress

Tăng trust website hiệu quả bằng 100 backlink chất lượng đến từ Google

Cách chăm sóc website hiệu quả

Cách tạo nút gọi trên website WordPress

Mời bạn đọc thêm

Phương pháp SEO tăng thứ hạng của website trên Google

Tìm hiểu phương pháp chọn từ khóa chuẩn SEO

Plugin giúp bảo mật website WordPress

Tăng trust website hiệu quả bằng 100 backlink chất lượng đến từ Google

Cách chăm sóc website hiệu quả

Cách tạo nút gọi trên website WordPress