Woocommerce_checkout_fields - WooCommerce Checkout'u özelleştirmek için 20 kod örneği

WooCommerce kontrolünüzü eklenti olmadan özelleştirin mi? Mümkün - birkaç satır PHP ile rahatsanız. Bu yazıda, woocommerce_checkout_fields filtresini kullanarak kullanıma hazır 20 kod snippet'i bulacaksınız. Alanları kaldırma, etiketleri yeniden adlandırma veya yeni seçenekler ekleme gibi gerçek yaşam durumlarını kapsarlar.

Kodlamaya girmiyorsanız, endişelenmeyin - aynı sonucu görsel olarak elde etmek için Esnek Ödeme Alanları eklentisini nasıl kullanacağınızı da göstereceğiz.

Ödeme özelleştirmesi nedir ve dönüşümleri geliştirmeye nasıl yardımcı olur?

Ödemeniz ziyaretçilerin müşteri olduğu yerdir. Ancak gereksiz alanlarla dolu veya esneklikten yoksunsa, sürtünmeye neden olabilir. Ödeme özelleştirilmesi, terk edilmeyi azaltmaya, alımları hızlandırmaya ve daha iyi bir deneyim yaratmaya yardımcı olur.

WooCommerce esnek bir filtre ile birlikte gelir: woocommerce_checkout_fields . Faturalandırma, nakliye veya ek alanları değiştirmek için kullanabilirsiniz. Alan görünürlüğü, sipariş ve içerik üzerinde kontrol isteyen geliştiriciler için mükemmeldir.

Woocommerce_checkout_fields filtresini kullanarak 20 kod örneği

Aşağıda 20 örnek verilmiştir. Bu snippet'leri çocuğunuzun functions.php veya özel bir eklentiye ekleyin.

1. İkinci adres alanını kaldırın

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. Telefon alanını gizleme

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. E -posta alanını isteğe bağlı hale getirin

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. Ad ve soyadı alanları için yer tutucuları değiştirin

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. “Soyad” ı “soyadı” olarak yeniden adlandırın

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. Özel bir metin alanı ekleyin

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. Teslim Talimatları için Textarea ekleyin

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. Özel CSS sınıfını ayarlayın

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. E -posta alanı önceliğini değiştirin

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. Posta kodu alanını kaldırın

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. Soyadı sonrası adını yeniden sıralayın

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. Fatura isteği için bir onay kutusu ekleyin

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. Teslimat süresi için SELECDROGDE ekleyin

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. Doldurma Öncesi Sipariş Yorumları

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. Özel numara alanı ekleyin

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. Bir Tarih Seçici Ekle

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. Telefon doğrulamasını devre dışı bırakın

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. Nakliye Ülke Alanının En Son Görünmesini Sağlayın

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. Gönderme Posta Kodu alanını kaldırın

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. Sipariş detaylarından sonra özel bir alan ekleyin

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

Esnek ödeme alanları kullanarak kodlamadan ödeme nasıl özelleştirilir

Geliştirici değil mi? Sorun değil. Esnek Ödeme Alanları eklentisi, yukarıdakileri - görsel olarak WordPress kontrol panelinizden yapmanızı sağlar.

• Sürükle ve bırak kullanarak alanları ekleyin, kaldırın ve yeniden düzenleyin
  

  

• Etiketleri, yer tutucuları ve varsayılan değerleri düzenleyin
• Alanları gerektiği gibi, isteğe bağlı veya gizli ayarlayın
  

  

• CSS sınıflarını veya doğrulama kurallarını uygulayın
  

  

• Bölüm seçin: faturalandırma, nakliye veya ek bilgi
• Test veya UX amaçları için varsayılan değerler atayın
• PHP düzenlemeden veya özel kod yazmadan hepsi

Geliştirme yükü olmadan sonuçlar.

Esnek Checkut Fields Pro - Gelişmiş Özellikler

Daha fazla güç ve esneklik mi istiyorsunuz? Pro sürüm gelişmiş özellikler ekler:

• Sepet içeriğine veya kullanıcı verilerine dayalı alanları göstermek/gizlemek için koşullu mantık
• Ek Alan Türleri için Destek: Tarih Seçici, Zaman Seçici, Renkli Radyo veya Resimler ve Daha Fazlası
• Kullanıcı rolleri için görünürlük kontrolü - B2B ve B2C kullanıcılarına farklı alanlar görüntüleyin
• Seçilen nakliye veya ödeme yöntemine dayalı alan ekranı
• Alan ayarları başına ek fiyat

Eklenti özelliklerini ürün sayfasında görebilirsiniz.

Özet: Ödeme için hangi yöntem en iyisidir?

woocommerce_checkout_fields kullanmak, WooCommerce kontrolünü özelleştirmenin güçlü bir yoludur - ancak dikkatli kodlama ve test gerektirir. Ayrıca, kod ve tema güncellemeleri ile ilgilenmek gerekir.

Temanızı düzenlediğinizden eminseniz, yukarıdaki 20 örnek en yaygın senaryoları ele almanıza yardımcı olmalıdır.

Ancak herkes için, WooCommerce eklentisi için esnek ödeme alanları, Pro sürümünde daha fazla seçenekle kodsuz, kullanıcı dostu bir alternatif sunar.

Kilit noktalar

• woocommerce_checkout_fields filtresi, ödeme formunu PHP ile özelleştirmenizi sağlar
• Alanları eklemek, kaldırmak, yeniden adlandırmak, yeniden sıralamak veya stil alanları kullanabilirsiniz.
• Esnek ödeme alanları eklentisi de aynısını yapar - ancak kodlamaya gerek kalmadan
• Pro sürümü koşullu mantık, ekstra saha türleri ve saha fiyatlandırma kuralları ekler
• İş akışınıza uyan yöntemi seçin: Kontrol Kodu, Hız eklentisi