Nếu bạn đang sử dụng WordPress và có dùng WooCommerce để làm website bán hàng, thì ít nhiều đã gặp tình trạng Số điện thoại & Email của khách đôi khi không đúng, điền nhầm mà không để ý, dẫn tới việc không thể liên hệ lại với khách được. Nếu sử dụng Website bán hàng tại Việt Nam thì nên kiểm tra SĐT đúng định dạng của Việt Nam thì mới cho đặt hàng, không thì sẽ phải cảnh báo để khách sửa lại.
Dưới đây là đoạn mã code kiểm tra phía client, sử dụng Javascript để kiểm tra đầu vào của số điện thoại và email.




<?php add_action("woocommerce_after_checkout_form", function () { ?> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script> jQuery(document).ready(function($){ $(document).on('click', '#place_order', function(e){ /* Bắt sự kiện click tại nút Đặt hàng */ e.preventDefault(); var phone = $('#billing_phone').val(); email = $('#billing_email').val(); if(phone.length > 0 && !vdh_validatePhone(phone)) { /* Validate số điện thoại */ $('#billing_phone').focus() toastr.error("Thông báo", "Số điện thoại không đúng"); return } if(email.length > 0 && !vdh_validateEmail(email)) { /* Validate email */ $('#billing_email').focus() toastr.error("Thông báo", "Email không đúng"); return } $(this).submit() /* Nếu không có lỗi gì thì Submit form */ }) }) function vdh_validatePhone(phone) { /* Function validate đúng số định dạng điện thoại VN */ phone = phone.replace(/\s+/g, ''); // Xóa khoảng trắng const re = /^(0[3|5|7|8|9])[0-9]{8}$/; return re.test(phone); } function vdh_validateEmail(email) { const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; return re.test(email); } </script> <?php }); ?>
Khi số điện thoại và email được điền đúng thì form đặt hàng sẽ được kích hoạt, lúc này sẽ đảm bảo số điện thoại và email không bị sai. Các bạn có thể tham khảo thêm tính năng tích hợp mã QR vào thanh toán đơn hàng tại đây
Bài viết khác
- Download Theme Flatsome hàng chuẩn và cách kích hoạt (update liên tục)
- Chuyển kích thước font-size trong WordPress Flatsome sang px
- Cài đặt Xampp làm môi trường Website trên máy tính
- Hướng dẫn mua Coin trên sàn Binance (App Mobile)
- Hiển thị địa chỉ thanh toán & thông tin giao hàng trong Thank You Page Woocommerce (khi không đăng nhập)
Bài viết khác