WooCommerce özel ödeme alanlarını detaylı olarak analiz edin: oluşturmadan veri işlemeye kadar tüm uygulamaları.

Çevrimiçi bir mağaza oluştururken, müşterilerin ödeme işlemi sırasındaki deneyimi son derece önemlidir. Standart WooCommerce ödeme formları, fatura adresinin toplanması, doğum günü tebrikleri, özel teslimat tercihleri gibi tüm iş ihtiyaçlarını karşılayamayabilir. Bu durumda, özelleştirilmiş ödeme alanları güçlü bir genişletme aracı haline gelir. Sadece kullanıcı deneyimini daha kişiselleştirmekle kalmaz, aynı zamanda işletmelerin hizmet ve pazarlama stratejilerini optimize etmek için çok önemli iş verileri toplamalarına da olanak tanır.

WordPress’in hook sistemi ve WooCommerce tarafından sağlanan zengin API sayesinde, geliştiriciler ödeme sayfasının çeşitli yerlerine (fatura adresi, teslimat adresi alanlarının ardından hatta tamamen yeni bloklar oluşturarak) metin giriş kutuları, açılır menüler, tek seçimli kutular, çok seçimli kutular gibi farklı türdeki alanları oldukça kolay bir şekilde ekleyebilirler. Bu süreç yalnızca ön uç görünümle sınırlı değildir; daha da önemlisi arka uçtaki veri işleme sürecidir: Kullanıcıların girdiği verilerin doğru ve güvenli bir şekilde siparişe kaydedilmesini sağlamak ve bu verilerin arka uç yönetim arayüzünde, kullanıcı hesap sayfalarında ve sipariş bildirim e-postalarında net bir şekilde görüntülenmesidir.

Özelleştirilmiş ödeme alanlarının uygulanma yöntemi

WooCommerce, ödeme işlemleri sırasında kullanılan alanları işlemek için iki ana kategoriye ait hook’lar (eklentiler) sunar:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaİlki, alanları tanımlamak ve renderlemek için kullanılır; ikincisi ise alan verilerini saklamak için kullanılır.

Tavsiye edilen okuma WordPress Eklenti Geliştirme: Başlangıçtan Uzmanlığa – Kendi Özel Özelliklerinizi Oluşturmayı Adım Adım Öğrenin。

Kancaları kullanarak alan ekleyin.

En temel adım şudur: woocommerce_checkout_fields Filtre kancası, özel alanları ödeme alanları dizisine ekler. Bu dizinin yapısı oldukça açıktır ve alanları “fatura” bölümüne yerleştirmenize olanak tanır.billing“Dağıtım”, “Teslimat”shipping“Sipariş Notları”orderMevcut bölümler gibi, özel bölümler de oluşturulabilir.custom）。

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.

Aşağıdaki kod örneği, “Fatura” bilgi alanının alt kısmına bir “Şirket Vergi Numarası” metin alanı ve bir “Fatura İstemek İster misiniz?” seçim kutusunun nasıl ekleneceğini göstermektedir.

/**
 * 在结账页面添加自定义字段
 */
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {

// 在“账单”字段组中添加一个“公司税号”文本字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __( '公司税号 / VAT Number', 'your-text-domain' ),
        'placeholder'  => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required'     => false, // 非必填
        'class'        => array( 'form-row-wide' ), // 宽度样式
        'clear'        => true, // 清除浮动
        'priority'     => 25, // 显示顺序，数字越小越靠前
    );

// 在“账单”字段组中添加一个“是否需要发票”单选框
    $fields['billing']['billing_invoice_needed'] = array(
        'type'         => 'radio',
        'label'        => __( '是否需要纸质发票？', 'your-text-domain' ),
        'required'     => true,
        'class'        => array( 'form-row-wide' ),
        'clear'        => true,
        'priority'     => 30,
        'options'      => array(
            'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
            'no'  => __( '否，不需要', 'your-text-domain' )
        )
    );

return $fields;
}

Alan verilerini doğrula ve kaydet.

Bir alan ekledikten sonra, kullanıcıların girdiği verilerin ilgili sipariş meta verilerine kaydedildiğinden emin olmanız gerekir. Bu, aşağıdaki adımlar aracılığıyla sağlanır: woocommerce_checkout_update_order_meta Bu işlem, bir “eylem kancası” (action hook) kullanılarak gerçekleştirilir. Kullanıcı bir sipariş gönderdiğinde, WooCommerce bu kancayı tetikler ve bu sırada özel alanların değerlerini alıp kaydedebiliriz.

/**
 * 保存自定义结账字段的值到订单元数据
 */
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {

if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 使用 sanitize_text_field 进行清洁处理，防止恶意代码
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
    }
}

Arka planda ve e-postalarda alan verilerini gösterin.

Sadece verileri kaydetmek yeterli değil; satıcıların siparişleri arka planda yönetirken bu bilgilere erişmeleri gerekiyor. Müşterilerin de sipariş onay e-postalarında ve “Hesabım” sayfalarında kendi girdikleri bilgileri görmeleri gerekir.

Arka planda, sipariş düzenleme sayfasında gösterilecek.

Mümkün. woocommerce_admin_order_data_after_billing_address Benzer hook’lar gibi, özel alanların değerlerini arka uç sipariş detay sayfasındaki “Fatura Adresi” veya “Teslimat Adresi” bölümlerinin hemen ardına yazdırır.

Tavsiye edilen okuma WordPress eklenti geliştirmeye başlama kılavuzu: İlk işlevsel uzantınızı sıfırdan oluşturun.。

/**
 * 在后台订单详情页显示自定义字段
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    $invoice_needed = $order->get_meta( '_billing_invoice_needed' );

if ( $vat_number ) {
        echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number).`'</p>';
    }
    if ( $invoice_needed ) {
        $display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
        echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`. esc_html($display_text).`'</p>';
    }
}

Sipariş e-postasında ve teşekkür sayfasında gösterilsin.

Müşterilerin de bu bilgileri görebilmesi için, bunları sipariş e-postalarına ve sipariş onay (teşekkür) sayfalarına eklememiz gerekiyor. woocommerce_email_order_meta_keys Filtre, belirtilen meta veri anahtarlarını otomatik olarak tüm bildirim e-postalarına ekleyebilir. Aynı zamanda, woocommerce_order_details_after_order_table Eylem kancaları, ön taraftaki sipariş detaylarında görüntülenebilir.

/**
 * 将自定义字段添加到订单邮件中
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
    return $keys;
}

/**
 * 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>';
        echo '<table class="shop_table shop_table_responsive additional_info">';
        echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number).`'</td></tr>';
        echo '</table>';
    }
}

Gelişmiş Uygulamalar ve Alan Koşulları Mantığı (Advanced Applications and Field Condition Logic)

Temel alanların eklenmesinin yanı sıra, daha karmaşık etkileşimler kullanıcı deneyimini büyük ölçüde artırabilir; örneğin alanların koşullu olarak gösterilmesi ve mevcut değerlere dayalı doğrulamalar.

Bir alanın koşullu olarak görünmesini sağlamak

JavaScript/jQuery kullanarak, belirli bir alanın değerine (örneğin ülke, eyalet veya bir seçim opsiyonu) göre başka bir alanı dinamik olarak gösterebilir veya gizleyebilirsiniz. Örneğin, kullanıcı “Kağıt fatura istiyorum” seçeneğini seçtiğinde yalnızca “Fatura gönderimine dair notlar” adlı bir metin alanı görüntülenir.

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.

Bu özelliği gerçekleştirmek için, temanın JavaScript dosyasına ilgili kodların eklenmesi gerekmektedir. Alternatif olarak, bu işlem bir eklenti (plugin) aracılığıyla da yapılabilir. wp_enqueue_script Senaryoyu bir kuyruğa ekleyin ve ödeme sayfasında alan değişikliklerini izleyin; hedef alanın görünüm durumunu kontrol edin.

Bir alana özel doğrulama ekleyin.

WooCommerce’de “zorunlu” (required) özellikleri yerleşik olarak bulunsa da…required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Eylem kancaları, özel doğrulama mantığı eklemek için kullanılır.

/**
 * 在结账过程中验证自定义字段
 */
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
    // 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
    if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
        wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
    }
}

Performans optimizasyonu ve en iyi uygulamalar.

Web sitesine çok fazla özel alan eklenmesi veya bunların doğru şekilde işlenmemesi, ödeme sayfasının yükleme hızını ve kullanıcı deneyimini olumsuz etkileyebilir.

Tavsiye edilen okuma WooCommerce Özel Alanlarını Kavrama: Oluşturmadan Gösterime Kadar Kapsamlı Geliştirme Rehberi。

Alan yükleme ve renderleme süreçlerini optimize etmek.

• Seçici Yükleme: Sadece ödeme sayfasında görüntülenen alanlar için gerekli JavaScript betikleri yüklenir.
• Öncelikleri makul bir şekilde ayarlayın: Kullanın. priority Parametrelerin mantıklı bir şekilde sıralanması, gereksiz düzenleme işlemlerinden kaçınmayı sağlar.
• Özetle… class Dizi: Sadece gerekli stil sınıflarını ekleyin, örneğin… form-row-wide 或 form-row-first。

Veri Güvenliği ve Temizliği

• Her zaman temizleyin ve doğrulayın: Kaydetmeden önce…update_post_metaGösterme (Display) ve gösterim (Presentation)echoKullanıcı verilerinden önce, mutlaka şunu kullanın: sanitize_text_field(), esc_html(), wp_kses_post() Bu işlemler, `eval()` ve benzeri fonksiyonlar aracılığıyla yapılır ve bu da çapraz sitelik betik (XSS) saldırılarını önlemenin anahtarıdır.
• Doğru veri türlerini kullanın: Sayısal veya belirli bir biçime sahip veriler için uygun veri türlerini seçmeyi düşünmelisiniz. sanitize_key() Veya doğrulama ve temizleme için özelleştirilmiş bir düzenleme ifadesi (regular expression) kullanın.

Özetle.

WooCommerce’te özel ödeme sayfası alanları oluşturmak, satıcılar ile müşteriler arasındaki bilgi akışını güçlendiren etkili bir özelliktir. Bu özellik, işlemin kritik aşamalarında her iki tarafın da gerekli bilgilere kolayca erişmesini sağlar. woocommerce_checkout_fields Hooklar, ön uç alanlarını tanımlamak ve bunları kullanmak için kullanılır. woocommerce_checkout_update_order_meta Veriler, güvenli bir şekilde saklanır ve ardından çeşitli yönetim araçları ile e-posta filtreleri aracılığıyla arka planda, e-postalarda ve kullanıcı arayüzlerinde sunulur. Bu süreç, tam bir veri işleme döngüsünü oluşturur. Bu temel yöntemleri öğrendikten sonra, koşullu gösterimler ve özelleştirilmiş doğrulama gibi ileri düzey tekniklerle birleştirerek, geliştiriciler son derece kişiselleştirilmiş, kullanıcı dostu ve veri güvenliği açısından sağlam ödeme süreçleri oluşturabilirler. Böylece, çeşitli e-ticaret ihtiyaçlarını karşılayabilir, mağazanın profesyonelliğini ve müşteri memnuniyetini artırabilirler.

Sıkça Sorulan Sorular.

Özelleştirilmiş alanların verileri nerede saklanır?

Özelleştirilmiş alanlardaki veriler, “Sipariş Metaverisi” olarak kaydedilir. Kullanıldığında… update_post_meta( $order_id, ‘_field_key’, $value ); Kaydedildiğinde, veriler WordPress’e saklanır. wp_postmeta Veritabanı tablosunda, siparişler (özelleştirilmiş bir makale türü) ile ilgili bilgiler bulunmaktadır. post_id İlişkilendirme. Anahtar adları genellikle bir alt çizgiyle başlar ve bu, onların gizli meta veriler olduğunu gösterir.

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.

Kullanıcı kaydı sırasında özel alanların (kullanıcı tarafından belirlenen alanların) kullanıcı hesabına da nasıl kaydedileceği?

Eğer ödeme sırasında hesap oluşturulmasına izin veriyorsanız ve “Şirket Adı” gibi alanların da kullanıcı bilgileri olarak kaydedilmesini istiyorsanız, sipariş meta verilerini kaydederken aynı zamanda kullanıcı meta verilerini de güncellemeniz gerekmektedir. Bunu yapmak için uygun araçları veya algoritmaları kullanabilirsiniz. update_user_meta( $customer_id, ‘billing_company’, $value );Dikkat edin; bu genellikle kullanıcının doğru kullanıcı ID’sini elde etmek için kullanıcı kaydı veya giriş işlemleri sırasında yapılmalıdır.

Neden özel alanlarım e-postada doğru bir şekilde gösterilmiyor?

Eğer bir alanın değeri e-postada gösterilmiyorsa, en yaygın neden bunun yapılmasının unutulmasıdır. woocommerce_email_order_meta_keys Filtre, anahtar adlarını e-posta değişkenlerine ekler. Ayrıca, e-posta şablonunda özel meta verilerin görüntülenmesi için gerekli kodlar bulunmayabilir. Alan anahtar adlarınızın doğru bir şekilde filtre dizisine eklendiğinden emin olun ve e-posta şablonunuzun (örneğin…) uygun şekilde yapılandırıldığından emin olun. email-order-details.phpGenel meta verilerin görüntülenmesini destekler.

Ödeme sayfasının farklı yerlerine alan blokları ekleyebilir miyiz?

Tabii ki. Varsayılan seçeneklerin dışında… billing、shipping、order Gruplandırma işlemi için… woocommerce_checkout_fields Filtre içinde yepyeni bir grup oluşturun, örneğin… custom_sectionArdından, kullanın. woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Eylem kancaları (action hooks) ile birleştirilerek… do_action(‘woocommerce_checkout_’ . $section); Bu yeni gruplanmış alanları sayfanın istediğiniz herhangi bir yerine renderlemek için, WooCommerce ödeme şablonunun yapısına dair belirli bir bilgiye sahip olmanız gerekmektedir.