WooCommerce'de Ödemeye Tarih Alanı Nasıl Eklenir

Yayınlanan: 2020-12-20

WooCommerce Ödemeye Tarih Alanı Ekle Birçok çevrimiçi mağazanın ödeme sayfasında özel alanlara ihtiyacı vardır. Örneğin, bir pastanenin ödeme sayfasında teslimat tarihi alanına ihtiyacı olabilir.

WooCommerce'in güzelliği, ödeme sayfasına faturalandırma ve nakliye sonrası alanlar veya sipariş ver düğmesinden önce özel alanlar eklemenize izin vermesidir.

WooCommerce Ödemeye Tarih Alanı Ekle

Bu gönderide, WooCommerce ödeme sayfasına nasıl teslimat tarihi alanı ekleyeceğinizi öğreneceksiniz. Fatura alanından sonra ekleyeceğim. Bu alan, müşterilerin siparişleri için teslimat tarihini seçmelerine olanak tanır. Ek olarak, e-posta bildirimleri ve sipariş alındı ​​sayfasında özel alanı nasıl görüntüleyebileceğinizi paylaşacağım.

1. WooCommerce Ödeme Sayfasına Özel Tarih Alanını Ekleme

WooCommerce, kullanacağınız kancalara bağlı olarak çeşitli yerlere özel alanlar eklemenize olanak tanır. Ödeme sayfasında WooCommerce tarafından tanımlanmış birçok eylem vardır. Bu eğitim için, fatura veya teslimat adresi alanlarından sonra alanı ekleyeceğim.

Özel alanı buraya eklemek için woocommerce_after_checkout_billing_form eylemini kullanacağız. Functions.php dosyasına aşağıdaki kodu ekleyin: 

 add_action( 'woocommerce_after_checkout_billing_form', 'njengah_extra_fields_after_billing_address', 10, 1);

function njengah_extra_fields_after_billing_address() {

            _e("Teslimat Tarihi: ", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Teslim Tarihi">

  <?php

}

Bu sonuç: Teslimat tarihi alanı

Müşterilerin sipariş için teslim tarihini seçmesi gerekir. Bu, bu alan için bir takvim eklememiz gerektiği anlamına gelir. Alternatif olarak, bunu basit tutmak için basit bir metin alanıyla deneyebilirsiniz.

jQuery veri seçiciyi kullanacağız. Bu, WordPress wp_enqueue_scripts eylemini kullanarak gerekli JavaScript ve CSS dosyalarını eklememiz gerekeceği anlamına gelir.

 add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address', 10, 1);

işlev display_extra_fields_after_billing_address () {

_e("Teslimat Tarihi: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Teslim Tarihi">

<script>

jQuery(belge).ready(işlev( $ ) {

$( ".add_delivery_date").datepicker( {

minTarih: 0,

} );

} );

</script>

<?php

}

add_action('wp_enqueue_scripts', 'enqueue_datepicker');

function enqueue_datepicker() {

if ( is_checkout() ) {

// Veri seçici komut dosyasını yükleyin (WordPress'te önceden kayıtlı).

wp_enqueue_script('jquery-ui-datepicker');

// Tarih seçici için stile ihtiyacınız var. Basit olması için, Google'ın barındırılan jQuery UI CSS'sine bağladım.

wp_register_style('jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style('jquery-ui');

}

}

Bu sonuç: sahadaki takvim

Kod Nasıl Çalışır?

WooCommerce eylemine display_extra_fields_after_billing_address() işlevini ekledim. İlk olarak “Teslimat Tarihi” etiketini yazdırıyoruz ve tarih seçici için jquery datepicker( ) fonksiyonunu kullanabileceğimiz bir giriş metin tipi alanı ekliyoruz.

Bundan sonra, enqueue_datepicker() işlevini WordPress eylemiyle ekledim. Bu fonksiyonda, wp_enqueue_script() kullanarak jQuery veri seçicisini ve stilini ekledim.

Yukarıdaki kod parçacığını eklediğimizde, fatura adresi alanlarının altında özel alanımızı görüntüleyecektir.

2. E-posta Bildirimlerinde Özel Alanı Görüntüleme

Sonraki adım, müşteri e-postasında görünecek özel alanı eklemektir. Functions.php dosyasına aşağıdaki kodu ekleyin:

 add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order', 10, 1);

function add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

Kod Nasıl Çalışır?

add_order_delivery_date_to_order() işlevini WooCommerce eylemine ekledim. Teslimat tarihini post meta tablosuna ekleyecektir. Müşterinin veri tabanına eklemeden önce tarihi seçtiğini doğrulayacaktır.

Bir müşteri tarihi seçerse, WordPress işlevi add_post_meta add_post_meta() kullanılarak wp_postmeta tablosunda saklanır. Bu işlev, post_id , meta anahtarı ve meta değeri gerektirir. Bizim durumumuzda, post_id olarak Sipariş kimliğini kullandık, meta anahtar _delivery_date olacak ve meta değer müşteri tarafından seçilen Teslimat tarihi olacak.

$_POST değişken verilerinizi temizlemenizi tavsiye ederim. Dizeden satır sonlarını, sekmeleri ve fazladan boşlukları kaldırır.

Teslimat tarihini veritabanına kaydettikten sonra müşteri e-postasında görüntüleyeceğiz. Functions.php dosyasına aşağıdaki kodu ekleyin:

 add_filter('woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails', 10, 3);

function add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} Başka {

$order_id = $order->id;

}

$teslimat_tarihi = get_post_meta( $order_id, '_delivery_date', true);

if ( '' != $teslimat_tarihi ) {

$alanlar[ 'Teslim Tarihi' ] = dizi(

'label' => __( 'Teslimat Tarihi', 'add_extra_fields'),

'değer' => $teslimat_tarihi,

);

}

$alanlarını döndür;

}

3. WooCommerce Teşekkür Sayfasında Özel Alanı Görüntüleme

WooCommerce Order Received sayfasında özel alanını görüntülemek için WooCommerce filtresini woocommerce_order_details_after_order_table . Functions.php dosyasına aşağıdaki kodu ekleyin:

 add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

function add_delivery_date_to_order_received_page ($sipariş) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} Başka {

$order_id = $order->id;

}

$teslimat_tarihi = get_post_meta( $order_id, '_delivery_date', true);

if ( '' != $teslimat_tarihi ) {

yankı '<p><strong>' . __( 'Teslim Tarihi', 'add_extra_fields' ) . ':</strong> ' . $teslimat_tarihi;

}

}

Bu sonuç: teşekkür sayfasındaki teslim tarihi

Kod Nasıl Çalışır?

WooCommerce filtresine add_delivery_date_to_order_received_page() öğesini ekledim. Bu işlevin parametresi, sipariş kimliğini getirmek için kullanılır. wp_postmeta tablosundan seçilen teslimat tarihini almak için sipariş kimliği gereklidir.

Bu sonuç:

Tam Kod Snippet'i

Öğreticiyi takip ederken sorun yaşamanız durumunda, tam kod parçacığını burada bulabilirsiniz. Bunu function.php dosyasına yapıştırın:

 /*

Eklenti Adı: WooCommerce ödeme sayfasında Alanlar ekleyin.

Açıklama: WooCommerce ödeme sayfasında fazladan alanların nasıl ekleneceğine dair basit bir demo eklentisi.

*/

add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address', 10, 1);

işlev display_extra_fields_after_billing_address () {

_e("Teslimat Tarihi: ", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Teslim Tarihi">

<script>

jQuery(belge).ready(işlev($) {

$(".add_delivery_date").datepicker({

minTarih: 0,

});

});

</script>

<?php

}

add_action('wp_enqueue_scripts', 'enqueue_datepicker');

function enqueue_datepicker() {

if ( is_checkout() ) {

// Veri seçici komut dosyasını yükleyin (WordPress'te önceden kayıtlı).

wp_enqueue_script('jquery-ui-datepicker');

// Tarih seçici için stile ihtiyacınız var. Basit olması için, Google'ın barındırılan jQuery UI CSS'sine bağladım.

wp_register_style('jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style('jquery-ui');

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order', 10, 1);

function add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

add_filter('woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails', 10, 3);

function add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} Başka {

$order_id = $order->id;

}

$teslimat_tarihi = get_post_meta( $order_id, '_delivery_date', true);

if ( '' != $teslimat_tarihi ) {

$alanlar[ 'Teslim Tarihi' ] = dizi(

'label' => __( 'Teslimat Tarihi', 'add_extra_fields'),

'değer' => $teslimat_tarihi,

);

}

$alanlarını döndür;

}

add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

function add_delivery_date_to_order_received_page ($sipariş) {

if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {

$order_id = $order->get_id();

} Başka {

$order_id = $order->id;

}

$teslimat_tarihi = get_post_meta( $order_id, '_delivery_date', true);

if ( '' != $teslimat_tarihi ) {

yankı '<p><strong>' . __( 'Teslim Tarihi', 'add_extra_fields' ) . ':</strong> ' . $teslimat_tarihi;

}

}

Bu kadar!

Çözüm

Özetle, ödeme sayfasına özel bir tarih alanı eklemeyi, bunu e-posta bildirimlerinde görüntülemeyi ve teşekkür sayfasında görüntülemeyi öğrendiniz. Ancak, düzenleme koduna aşina değilseniz, bir ödeme özelleştirme eklentisi kullanabilirsiniz. Bir güncelleme sırasında değişikliklerinizin kaybolmaması için bir alt tema kullanmanızı öneririm.

Benzer Makaleler

  1. Satın Alma Alanına Seçim Alanı Nasıl Eklenir WooCommerc
  2. WooCommerce Checkout Alan Yer Tutucusu Nasıl Kurulur
  3. WooCommerce'de Fiyatsız Ürünler Nasıl Gizlenir
  4. WooCommerce'de Resimsiz Ürünler Nasıl Gizlenir
  5. Herhangi Bir Sekme Nasıl Gizlenir Hesap Sayfam WooCommerce
  6. Sepeti Güncelle Düğmesini Gizleme WooCommerce Sepet Sayfası
  7. WooCommerce'de Stoktaki Miktar Nasıl Gizlenir
  8. Checkout WooCommerce'de Hesap Nasıl Oluşturulur
  9. Gerekli WooCommerce Ödeme Alanları Nasıl Düzenlenir
  10. WooCommerce Koşullu Ödeme Alanları Nasıl Oluşturulur
  11. WooCommerce Ödeme Sayfası Şablonu Nasıl Düzenlenir
  12. WooCommerce KDV Numarası Ödeme Sayfası Nasıl Eklenir
  13. WooCommerce Ödeme Sayfasına Gizli Alan Nasıl Eklenir
  14. Birincil Menü Vitrin WooCommerce Nasıl Taşınır
  15. Ücretsiz Gönderim Varsa Kargo Ücretlerini Gizleme WooCommerce
  16. WooCommerce Fatura Ödeme Sayfası Nasıl Eklenir
  17. WooCommerce Ödeme Formuna Ekstra Alan Nasıl Eklenir
  18. WooCommerce Checkout Varsayılan Ülkesi Nasıl Eklenir
  19. WooCommerce Başlığı Ürün Açıklaması Nasıl Gizlenir