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

Emre Nogay · · WooCommerce
WooCommerce Numara Formatı Değiştirme

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.

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

Eklemeniz gereken kod bloğu:


add_filter('woocommerce_checkout_fields', function ($fields){
    $fields['billing']['billing_phone']['custom_attributes'] = [
        "maxlength" => "12"
    ];

    return $fields;
});

add_action('wp_footer', function(){
    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;
});

WooCommerce Telefon Numarası Formatı Değiştirme

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.

Yorumlar

"WooCommerce Telefon Numarası Formatını Değiştirme" yazısı için 2 yorum bulundu

@Mustafa bey kodu kontrol ettim bir hatası yok. Siz nasıl bi hata alıyosunuz? functions.php dosyasına, diğer kodları kesmeyecek şekilde eklemeniz gerek.

Yanıtla

Kolay gelsin. Bu kod hata vermekte.

Yanıtla
Bir cevap yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İnternet bağlantınız kesintiye uğradı.