Tam WooCommerce özel ödeme alanı geliştirme rehberi: başlangıçtan uygulamaya kadar.

Neden özel ödeme alanlarına ihtiyaç duyulur?

WooCommerce’in varsayılan ödeme sayfası, isim, adres, e-posta gibi temel bilgiler sunar; ancak birçok özel iş senaryosu için bu bilgiler yetersiz kalır. Örneğin, özel kekler satan bir dükkan, “kek üzerindeki dilekler” gibi ek bilgiler toplamak isteyebilir; bir B2B toptan satış sitesi, “şirket vergi numarası” gibi bilgilere ihtiyaç duyabilir; bir etkinlik bilet satış sitesi ise doğrulama amacıyla “katılımcıların kimlik numaralarına” ihtiyaç duyabilir. Bu tür durumlarda, geliştiriciler özel ödeme alanları oluşturarak işlevselliği genişletmeli ve özgün veri toplama ihtiyaçlarını karşılamalıdır.

Özelleştirilmiş alanlar, sadece kullanıcı deneyimini artırmakla kalmaz, ödeme sürecini iş ihtiyaçlarına daha uygun hale getirir; aynı zamanda sonraki müşteri yönetimi, sipariş işleme ve pazarlama faaliyetleri için de kritik veri desteği sağlar. Bu alanların hem arka uçta hem de e-postalarda doğru bir şekilde görüntülenmesi, tüm sipariş sürecinin bilgi bütünlüğünün sağlanmasını garanti eder.

Ayrıntılı Anlatım: Çekirdek Yöntemler ve Hook’lar

WooCommerce, ödeme sayfasını çekirdek kodu değiştirmeden derinlemesine özelleştirmemizi sağlayan güçlü ve esnek bir Hook (Kancalar) sistemi sunar. Özel alanlar oluşturmak esas olarak üç temel adımdan oluşur: Alan eklemek, alanları doğrulamak ve alan verilerini kaydetmek ve görüntülemek. Her adım, belirli bir WooCommerce eylem hook’una veya filtre hook’una karşılık gelir.

Alan eklemek için kullanılan filtre

Alanların eklenmesi esas olarak şu yollarla yapılır: woocommerce_checkout_fields Bu işlev, filtreler aracılığıyla gerçekleştirilir. Bu filtre, ödeme formunun çeşitli bölümlerine (örneğin “Fatura” bölümü, “Teslimat” bölümü veya özelleştirilmiş “Sipariş Ek Bilgileri” bölümü) yeni giriş kutuları, açılır menüler veya onay kutuları eklememizi sağlar.

Geliştiricilerin, mevcut alan dizisini alıp değiştirdikten sonra yeni bir dizi döndüren bir geri çağırma (callback) fonksiyonu yazmaları gerekmektedir. Fonksiyonun içinde, her yeni alanın türü, etiketi, yer tutucu (placeholder), zorunluluk durumu, öncelik (sıralama için) ve CSS sınıfı gibi özellikleri ayrıntılı bir şekilde tanımlanabilir.

UltaHost WordPress Sunucusu

30 gün iade garantisi, sınırsız bant genişliği ve veritabanı kullanımı, ücretsiz DDoS koruması; 3 yıllık abonelikte indirim (50%).

Sayfaya erişin.

Alanları doğrulamak için kullanılan kancalar (hooks)

Kullanıcı ödeme formunu gönderdiğinde, özel alanlardaki verilerin gereklilikleri karşıladığından emin olmamız gerekiyor. Bu durumda şu aracı kullanmamız gerekiyor: woocommerce_checkout_process Eylem kancası (Action Hook). Bu kancanın geri çağırma fonksiyonunda, üzerinden geçen verilere erişebiliriz. $_POST Küresel değişkenler aracılığıyla gönderilen verileri alıp doğruluyoruz.

Örneğin, zorunlu bir alanın boş olup olmadığını kontrol edebilir veya bir telefon numarasının formatının doğru olup olmadığını doğrulayabilirsiniz. Doğrulama başarısız olursa, buna göre işlem yapabilirsiniz. wc_add_notice() Fonksiyon, kullanıcıya bir hata mesajı göstererek ödeme işleminin devam etmesini engeller.

Verileri kaydetmek ve göstermek için kullanılan araçlar/düzenleyiciler

Kullanıcı bir sipariş gönderdikten sonra, özel alanlardaki verilerin siparişin meta verilerine güvenli bir şekilde kaydedilmesi gerekmektedir. Bu, woocommerce_checkout_update_order_meta Eylemi tamamlamak için bir “action hook” kullanılır. Bu hook’un geri çağırma fonksiyonunda (callback function) gerekli işlemleri gerçekleştirebiliriz. update_post_meta() Bu fonksiyon, doğrulamadan geçen form değerlerini ilgili siparişe kaydeder. wp_postmeta Veritabanı tablosunda.

Kaydettikten sonra, bu verileri genellikle üç farklı yerde göstermemiz gerekiyor: Yönetici arayüzündeki sipariş detay sayfası, kullanıcıların aldığı sipariş onay e-postası ve müşteri hesabındaki sipariş görünümü. Bu işlemler sırasıyla yönetim arayüzü, e-posta şablonları ve ön uç hesap sayfalarının özelleştirilmesini içerir.

Pratik Uygulama: “Hediye Notu” alanı ekleyin

Aşağıda, çevrimiçi bir çiçekçiye “Hediye Notu” metin kutusunun nasıl ekleneceğini gösteren tam bir örnek vereceğiz. Bu alan, sipariş bilgileri bölümünde yer alacak; seçmeli bir alandır ve içeriği hem arka planda hem de gönderilen e-postada saklanacaktır.

Adım 1: Alanları ödeme sayfasına ekleyin.

Öncelikle, kullanmamız gereken şeyler… woocommerce_checkout_fields Bu yeni alanı kaydetmek için bir filtre kullanacağız. Onu “Sipariş Notları” alanının hemen ardına ekleyeceğiz. İşte uygulama için gerekli kod; bu kod, alt konuya eklenmelidir. functions.php Dosyaya eklenir veya özel bir işlev eklentisi aracılığıyla eklenir.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Bu kod, bir… (The code creates a…) textarea “Hediye İyi Dilek Mesajı” etiketli bir alan türüdür ve ilgili yer tutucular ile CSS sınıfları ayarlanmıştır.priority Parametreler, bunların görüntülenme yerini kontrol eder.

Adım 2: Alan verilerini siparişe kaydetme

Bundan sonra, sipariş oluşturulurken kullanıcıların yazdığı mesajları kaydetmemiz gerekiyor. woocommerce_checkout_update_order_meta Bunu gerçekleştirmek için bir “kancaya” (hook) ihtiyaç var.

hosting.com Paylaşımlı Barındırma

AMD EPYC CPU'lar, NVMe SSD depolama ve LiteSpeed ile yüksek performans, 7/24, 7x7 uzman şirket içi destek, SSL, kaba kuvvet, kötü amaçlı yazılım ve DDoS koruması dahil gelişmiş güvenlik önlemleri, 73%'ye kadar tasarruf

Sayfaya erişin.

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Burada, kontrol ediyoruz. $_POST['gift_message'] Bir değer var mı? Eğer varsa, o değer kullanılmalıdır. sanitize_textarea_field() Fonksiyon güvenli bir şekilde temizlendikten sonra, devam edilir. update_post_meta() Bunu “sipariş meta verileri” olarak kaydedin; meta anahtar adı ise… _gift_message。

Adım 3: Verileri arka planda ve e-postalarda gösterin

Veriler kaydedildikten sonra, onların görünür olmasını sağlamamız gerekiyor. Aşağıdaki kod, bu alanın yönetici arayüzündeki sipariş detayları sayfasında ve müşteri e-postalarında nasıl gösterileceğini göstermektedir.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message)`.'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

İlk fonksiyon, mesajı arka plandaki siparişin fatura adresinin altına görüntüler. İkinci fonksiyon ise mesajı, WooCommerce tarafından gönderilen sipariş onay e-postasına yeni bir veri satırı olarak ekler.

İleri Düzey Teknikler ve Dikkat Edilmesi Gereken Hususlar

Temel yöntemleri öğrendikten sonra, daha karmaşık kullanım senaryolarını ve optimizasyon çözümlerini keşfedebiliriz; böylece özel alanları (custom fields) daha güçlü ve kullanışlı hale getirebiliriz.

Koşullara göre alanları göstermek için bir mekanizma oluşturun.

Bazen, bir alanın görüntülenip görüntülenmeyeceği başka bir alanın değerine bağlıdır. Örneğin, “Fatura İstiyorum” seçeneği seçildiğinde “Fatura Başlığı” alanı görüntülenir. Bu tür durumlar, ön uç etkileşimlerini gerçekleştirmek için JavaScript kullanımını gerektirir. Tetikleyici alanlara (örneğin onay kutularına) bir işlem ekleyebiliriz… change Olay dinleyicileri kullanarak hedef alanların görünümünü veya gizlenmesini dinamik olarak kontrol edin. Aynı zamanda, sunucu tarafındaki doğrulama işlemlerinde de buna uygun işlemler yapılmalıdır.

Alan verilerinin güvenliği ve temizlenmesi

Güvenlik son derece önemlidir. Kullanıcı girdileriyle çalışırken, her zaman doğrulama ve temizleme işlemleri yapılmalıdır. Metin kutuları için… sanitize_text_field() 或 sanitize_textarea_field()E-posta için kullanılacak: sanitize_email()Verileri ön tarafa (frontend) gönderirken, mutlaka şu yöntemi kullanın: esc_html() 或 wp_kses_post() Bu fonksiyonlar, çapraz sitelik betik (XSS) saldırılarını önlemek için kullanılır ve metinlerdeki özel karakterlerin doğru şekilde işlenmesini sağlar.

InterServer Paylaşımlı Barındırma

Paylaşımlı hosting aylık $2.50 USD, ilk ay $0.1 USD promosyon kodu tryinterserver, 461 bulut uygulaması komut dosyası, tek tıklamayla yükleme.

Sayfaya erişin.

Üçüncü parti eklentiler ve temalarla uyumluluk

Özel alanlar eklerken, bazı temalar veya diğer eklentilerin (özellikle ödeme optimizasyonu eklentileri) stilleri veya betikleriyle çakışmalar olabilir. Geliştirmelerin her zaman bir alt tema (sub-theme) içinde yapılması ve özel alanların bulunduğu konteyner elemanlarına benzersiz CSS sınıf adları eklenmesi önerilir. Resmi dağıtımdan önce, farklı temalar ve yaygın olarak kullanılan eklentilerin etkinleştirildiği çeşitli senaryolarda testler yapılmalıdır. Tarayıcı geliştirici araçlarını kullanarak eleman ve betik hatalarını kontrol etmek, uyumluluk sorunlarını gidermede önemli bir yöntemdir.

Özetle.

Bu rehber sayesinde, ihtiyaçları anlamaktan başlayarak adım adım WooCommerce’ın özelleştirilmiş ödeme alanlarının geliştirme sürecine derinlemesine daldık. Nasıl kullanılacağını öğrendik… woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Bu üç temel araç, alanların eklenmesini, doğrulanmasını ve kaydedilmesini sağlar. Ayrıca, “hediye notu” örneği üzerinden alanların oluşturulmasından verilerin gösterilmesine kadar olan tüm süreci adım adım gösterir. Son olarak, koşullu alanlar, güvenlik işlemleri ve uyumluluk gibi ileri düzey konular ele alınmaktadır.

Bu becerileri öğrendiğinizde, çeşitli e-ticaret işletmelerinin özgün veri toplama ihtiyaçlarına esnek bir şekilde yanıt verebilir, daha profesyonel ve kişiselleştirilmiş bir WooCommerce mağazası oluşturabilir ve böylece dönüşüm oranlarını ve müşteri memnuniyetini artırabilirsiniz.

Sıkça Sorulan Sorular.

Özel alanların verileri nerede saklanır?

Özel alanlardaki veriler genellikle “sipariş meta verileri” olarak WordPress veritabanında saklanır. wp_postmeta Tabloda. Her bir veri, ilgili siparişin ID’sini içermektedir.post_idAyrıca, tanımladığınız meta anahtarlar (örneğin…) _gift_messageWooCommerce sipariş nesnesinin metotlarını kullanarak değerler ve meta-değerler ekleyebilirsiniz. $order->get_meta(‘_gift_message’) Veya WordPress fonksiyonları get_post_meta() Bu verileri elde etmek için…

Özel alanlara nasıl ön uç doğrulama (örneğin format doğrulama) eklenir?

Bunun dışında… woocommerce_checkout_process Sunucu tarafında doğrulama yapmanın yanı sıra, alanlara HTML5 yerel özellikleri ekleyerek temel doğrulamalar da yapabilirsiniz. Örneğin: pattern Regular ifadeler için kullanılır.type=”email” E-posta formatı için kullanılır. Daha karmaşık gerçek zamanlı doğrulamalar için, alanları izlemek amacıyla JavaScript/jQuery kodu yazılması gerekmektedir. blur 或 input Olay: Değerlerin kurallara uyup uymadığını kontrol edin ve anında geri bildirim verin.

Kullanıcı kayıt sayfasına özel alanlar ekleyebilir miyiz?

Tabii ki, ancak süreç biraz farklı. WooCommerce’un ödeme sayfası için özel olarak tasarlanmış olan ödeme alanı eklentileri (hook’ları) vardır. “Hesabım” kayıt sayfasına yeni alanlar eklemek istiyorsanız, WordPress ve WooCommerce tarafından sağlanan diğer eklentileri ve eklenti mekanizmalarını (hook’ları) kullanmanız gerekecektir. woocommerce_register_form Bir alan ekleyelim.woocommerce_created_customer Bu özellik, alan verilerini kullanıcı meta verilerine kaydetmek için tasarlanmıştır. Prensibi ödeme işlemiyle ilgili alanlarla benzerdir; ancak hedef buton ve veri depolama yeri (kullanıcı meta verileri) farklıdır.

Neden özel alanlarım gösterilmiyor?

Öncelikle, kodunuzun doğru bir şekilde eklenip eklenmediğini kontrol edin. functions.php Ayrıca herhangi bir dilbilgisi hatası da yok. İkincisi, alan dizisinin anahtarlarının doğru olup olmadığını kontrol edin; örneğin, bunları bir yere eklediyseniz… $fields[‘order’] Yine de. $fields[‘billing’] Bir kısmı… Tekrar kontrol edin; başka eklentilerin veya temaların kodlarının alanlarınızı geçersiz kıldığı veya sildiği olup olmadığını gözden geçirin. Son olarak, web sitesinin ve tarayıcının önbelleğini temizlemeyi deneyin; çünkü eski CSS/JS dosyaları görünümü etkileyebilir.