Trang chủ › Flatsome › Custom lại field số điện thoại tại trang thanh toán

Custom lại field số điện thoại tại trang thanh toán

thietkewebgiarehcm.com
Đã cập nhật vào

Mến chào mọi người nha!

Thì tiếp tục series chia sẻ về custom lại trang thanh toán gọn gàng và tối ưu hơn.

Trước đó mình có viết về thêm ảnh sản phẩm đã đặt tại trang thanh toán rồi. Hôm nay sẽ làm việc với field quan trọng đó là số điện thoại.

Về field số điện thoại mặc định nhập không giới hạn nên thường hay bị spam số sai chẳng hạn. Thì bây giờ code này giúp xử lý việc đấy.

Bỏ code sau vào function.php của theme bạn nhé.!

add_filter('woocommerce_checkout_fields', 'isures_limit_length_checkout_phone');

function isures_limit_length_checkout_phone($fields)
{
    // placeholder number
    $fields['billing']['billing_phone']['placeholder'] = '0933.150.068';
    // Giới hạn ký tự (tính cả 2 dấu chấm ở format bên dưới)
    $fields['billing']['billing_phone']['maxlength'] = 12;
    return $fields;
}

Dòng placeholder là text chìm trong field số điện thoại đấy.

Còn maxlength sẽ là giới hạn ký tự cho field số điện thoại, tính cả 2 dấu chấm mà ta sẽ format ở phía code bên dưới.

add_action('wp_footer', 'isures_format_checkout_phone');

function isures_format_checkout_phone()
{
    if (is_checkout()) {
    ?>
        <script>
            jQuery(document).ready(function($) {
                $('#billing_phone').keydown(function(e) {
                    var key = e.which || e.charCode || e.keyCode || 0;
                    var phone_number = $(this);
                    if (key !== 8 && key !== 9) {
                        if (phone_number.val().length === 4) {
                            phone_number.val(phone_number.val() + '.');
                        }
                        if (phone_number.val().length === 8) {
                            phone_number.val(phone_number.val() + '.');
                        }
                    }
                    return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
                });
            });
        </script>
<?php
    }
}

Code trên cũng bỏ vào function.php luôn.

Ưu tiên bỏ vào child theme để sau update theme sẽ không bị mất code nha mọi người.!

Chúc thành công nha!

5/5 - (1 bình chọn)