WooCommerce Telefon Numarası Formatını Değiştirme

2020.06.20

Bir müşterime WooCommerce için eklenti kodlarken, numara formatı’nın sabit olmaması nedeni ile eklentimde açık oluştuğunu farkettim. Sitenize alışveriş için giren müşteri, fatura/teslimat adresi doldururken, numara girdiği alanı 539-261-44-55 şeklinde bi yapı ile sabitledim, sizlerle de paylaşmak istedim. Verdiğim kodu sitenize eklerseniz;

• Müşteriniz en fazla 10 hane uzunluğunda numara girebilir.
• 539-654-2156 şeklinde araya kısa çizgiler eklenir. (Evet tüm temalarla uyumlu)

Sipariş oluşturan müşteri en fazla 10 hane girebiliyor ve ilk 6 hanenin 3er numara arasına 1 adet kesik çizgi ekleniyor. Aşağıda verdiğim kod bloğunu, kullandığınız temanın functions.php dosyasına eklemeniz gerek. Bunu yapmak için;

1. Admin paneline girin
2. Menüde “görünüm” seçeneği altındaki “tema düzenleyici” sekmesine geçin.
3. Açılan sayfada sağ taraftan, “functions.php” isimli dosyayı bulup açın.
4. Farklı bir kodu kesmeyecek şekilde,boş bir yere benim aşağıda verdiğim kodu ekleyin.
5. Kaydedip kapatın.

Eklemeniz gereken kod bloğu:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields )
{
    $fields['billing']['billing_phone']['custom_attributes'] = array("maxlength" => "12" );
    return $fields;
}
//emrenogay.com

add_action('wp_footer', 'format_checkout_billing_phone');
function format_checkout_billing_phone() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
        ?>
        <script type="text/javascript">
            jQuery( function($){
                $('#billing_phone').on( 'input focusout', function() {
                    var p = $(this).val();

                    p = p.replace(/[^0-9]/g, '');
                    p = p.replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
                    $(this).val(p);
                });
            });
        </script>
    <?php
    endif;
}

Yukarıdaki görselde, numara formatının örnek bir görseli bulunuyor.

Ek Detay Bilgi

Sitenize bilmediğiniz bir şeyi eklemeyin. Bu kod bloğunun ne içerdiği konusuna gelecek olursak, WordPress fonksiyonları’nın işleyişlerini bozmadan müdahale edebilmek için hook adı verilen yapılar kullanılır. RegEx (JavaScript), biraz PHP ve WordPress fonksiyonlarını kullanarak bu işlemi mümkün kıldım.

Yardıma ihtiyacınız olursa yorum yazarak belirtebilirsiniz size yardımcı olmaktan mutluluk duyarım.