Cara Menambahkan Bidang Tanggal ke Checkout Di WooCommerce

Diterbitkan: 2020-12-20

WooCommerce Tambahkan Bidang Tanggal ke Checkout Banyak toko online membutuhkan bidang khusus di halaman checkout. Misalnya, toko kue mungkin memerlukan bidang tanggal pengiriman di halaman pembayaran.

Keindahan WooCommerce adalah memungkinkan Anda untuk menambahkan bidang khusus pada halaman checkout, seperti setelah bidang penagihan dan pengiriman, atau sebelum tombol tempatkan pesanan.

WooCommerce Tambahkan Bidang Tanggal ke Checkout

Dalam posting ini, Anda akan belajar cara menambahkan bidang tanggal pengiriman di halaman checkout WooCommerce. Saya akan menambahkannya setelah bidang penagihan. Bidang ini akan memungkinkan pelanggan untuk memilih tanggal pengiriman pesanan mereka. Selain itu, saya akan membagikan bagaimana Anda dapat menampilkan bidang khusus pada pemberitahuan email dan halaman pesanan yang diterima.

1. Menambahkan Bidang Tanggal Kustom di Halaman Pembayaran WooCommerce

WooCommerce memungkinkan Anda untuk menambahkan bidang khusus ke berbagai tempat tergantung pada kait yang akan Anda gunakan. Ada banyak tindakan yang ditentukan oleh WooCommerce di halaman checkout. Untuk tutorial ini, saya akan menambahkan field setelah field billing atau alamat pengiriman.

Untuk menambahkan bidang khusus di sini, kami akan menggunakan tindakan woocommerce_after_checkout_billing_form . Tambahkan kode berikut di file functions.php: 

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

function njengah_extra_fields_after_billing_address() {

            _e("Tanggal Pengiriman: ", "tambah_bidang_tambahan");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Tanggal Pengiriman">

  <?php

}

Ini adalah hasilnya: Bidang tanggal pengiriman

Pelanggan harus memilih tanggal pengiriman untuk pesanan. Ini berarti bahwa kita perlu menambahkan kalender untuk bidang ini. Atau, Anda dapat mencoba ini dengan bidang teks sederhana agar tetap sederhana.

Kami akan menggunakan datepicker jQuery. Ini berarti bahwa kita perlu menyertakan file JavaScript dan CSS yang diperlukan dengan menggunakan tindakan wp_enqueue_scripts WordPress.

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

function display_extra_fields_after_billing_address() {

_e("Tanggal Pengiriman: ", "tambah_bidang_tambahan");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Tanggal Pengiriman">

<skrip>

jQuery(dokumen).siap(fungsi( $) {

$( ".tambahkan_tanggal_pengiriman").datepicker( {

minTanggal: 0,

} );

} );

</skrip>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

fungsi enqueue_datepicker() {

jika ( is_checkout() ) {

// Muat skrip datepicker (sudah terdaftar di WordPress).

wp_enqueue_script('jquery-ui-datepicker');

// Anda membutuhkan gaya untuk pemilih tanggal. Untuk kesederhanaan, saya telah menautkan ke CSS UI jQuery yang dihosting Google.

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

wp_enqueue_style('jquery-ui');

}

}

Ini adalah hasilnya: kalender di lapangan

Cara Kerja Kode

Saya telah melampirkan fungsi display_extra_fields_after_billing_address() ke tindakan WooCommerce. Pertama, kita mencetak label “Tanggal Pengiriman” dan menambahkan satu bidang jenis teks input untuk pemilih tanggal, yang dapat kita gunakan fungsi jquery datepicker( ).

Setelah itu, saya telah melampirkan fungsi enqueue_datepicker() dengan tindakan WordPress. Dalam fungsi ini, saya telah menambahkan datepicker jQuery dan gayanya menggunakan wp_enqueue_script() .

Setelah kami menambahkan potongan kode di atas, itu akan menampilkan bidang khusus kami di bawah bidang alamat penagihan.

2. Menampilkan Bidang Kustom di Notifikasi Email

Langkah selanjutnya adalah menambahkan bidang kustom untuk muncul di email pelanggan. Tambahkan kode berikut ke file functions.php:

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

fungsi 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'] ) );

}

}

Cara Kerja Kode

Saya telah melampirkan fungsi add_order_delivery_date_to_order() ke tindakan WooCommerce. Ini akan menambahkan tanggal pengiriman ke tabel meta pos. Ini akan memverifikasi bahwa pelanggan telah memilih tanggal sebelum menambahkannya ke database.

Jika pelanggan memilih tanggal, maka akan disimpan di tabel wp_postmeta menggunakan fungsi WordPress add_post_meta() . Fungsi ini membutuhkan post_id , kunci meta & nilai meta. Dalam kasus kami, kami telah menggunakan Order id sebagai post_id kami, kunci meta adalah _delivery_date & nilai meta akan menjadi tanggal Pengiriman yang dipilih pelanggan.

Saya sarankan Anda membersihkan data variabel $_POST Anda. Ini menghapus jeda baris, tab, dan spasi ekstra dari string.

Setelah menyimpan tanggal Pengiriman di database, kami akan menampilkannya di email pelanggan. Tambahkan kode berikut di file functions.php:

 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', ">=" ) ) {

$pesan_id = $pesanan->get_id();

} kalau tidak {

$pesan_id = $pesanan->id;

}

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

jika ( '' != $tanggal_pengiriman ) {

$fields[ 'Tanggal Pengiriman' ] = array(

'label' => __( 'Tanggal Pengiriman', 'tambahkan_bidang_tambahan' ),

'nilai' => $tanggal_pengiriman,

);

}

kembalikan $bidang;

}

3. Menampilkan Bidang Kustom di Halaman Terima Kasih WooCommerce

Untuk menampilkan bidang khusus pada halaman Menerima Pesanan WooCommerce, kami akan menggunakan filter woocommerce_order_details_after_order_table . Tambahkan kode berikut di file functions.php:

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

fungsi add_delivery_date_to_order_received_page ( $order ) {

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

$pesan_id = $pesanan->get_id();

} kalau tidak {

$pesan_id = $pesanan->id;

}

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

jika ( '' != $tanggal_pengiriman ) {

gema '<p><strong>' . __( 'Tanggal Pengiriman', 'tambahkan_bidang_tambahan') . ':</strong> ' . $tanggal_pengiriman;

}

}

Ini adalah hasilnya: tanggal pengiriman di halaman terima kasih

Cara Kerja Kode

Saya telah melampirkan add_delivery_date_to_order_received_page() ke filter WooCommerce. Parameter fungsi ini digunakan untuk mengambil id pesanan. ID pesanan diperlukan untuk mengambil tanggal pengiriman yang dipilih dari tabel wp_postmeta .

Ini adalah hasilnya:

Cuplikan Kode Lengkap

Jika Anda mengalami masalah dalam mengikuti tutorial, berikut adalah cuplikan kode lengkapnya. Tempelkan di file functions.php:

 /*

Nama Plugin: Tambahkan Bidang di halaman checkout WooCommerce.

Deskripsi: Plugin demo sederhana tentang cara menambahkan bidang tambahan di halaman checkout WooCommerce.

*/

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

function display_extra_fields_after_billing_address() {

_e("Tanggal Pengiriman: ", "tambah_bidang_tambahan");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Tanggal Pengiriman">

<skrip>

jQuery(dokumen).siap(fungsi($) {

$(".add_delivery_date").datepicker({

minTanggal: 0,

});

});

</skrip>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

fungsi enqueue_datepicker() {

jika ( is_checkout() ) {

// Muat skrip datepicker (sudah terdaftar di WordPress).

wp_enqueue_script('jquery-ui-datepicker');

// Anda membutuhkan gaya untuk pemilih tanggal. Untuk kesederhanaan, saya telah menautkan ke CSS UI jQuery yang dihosting Google.

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);

fungsi 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', ">=" ) ) {

$pesan_id = $pesanan->get_id();

} kalau tidak {

$pesan_id = $pesanan->id;

}

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

jika ( '' != $tanggal_pengiriman ) {

$fields[ 'Tanggal Pengiriman' ] = array(

'label' => __( 'Tanggal Pengiriman', 'tambahkan_bidang_tambahan' ),

'nilai' => $tanggal_pengiriman,

);

}

kembalikan $bidang;

}

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

fungsi add_delivery_date_to_order_received_page ( $order ) {

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

$pesan_id = $pesanan->get_id();

} kalau tidak {

$pesan_id = $pesanan->id;

}

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

jika ( '' != $tanggal_pengiriman ) {

gema '<p><strong>' . __( 'Tanggal Pengiriman', 'tambahkan_bidang_tambahan') . ':</strong> ' . $tanggal_pengiriman;

}

}

Itu dia!

Kesimpulan

Singkatnya, Anda telah mempelajari cara menambahkan bidang tanggal khusus ke kasir, menampilkannya di pemberitahuan email, dan menampilkannya di halaman terima kasih. Namun, jika Anda tidak terbiasa dengan kode pengeditan, Anda dapat menggunakan plugin penyesuai checkout. Saya sarankan menggunakan tema anak agar perubahan Anda tidak hilang selama pembaruan.

Artikel Serupa

  1. Cara Menambahkan Bidang Pilihan ke Checkout WooCommerc
  2. Cara Mengatur Placeholder Bidang Checkout WooCommerce
  3. Cara Menyembunyikan Produk Tanpa Harga di WooCommerce
  4. Cara Menyembunyikan Produk Tanpa Gambar Di WooCommerce
  5. Cara Menyembunyikan Tab Apa Pun Halaman Akun Saya WooCommerce
  6. Cara Menyembunyikan Tombol Keranjang Pembaruan Halaman Keranjang WooCommerce
  7. Cara Menyembunyikan Jumlah Stok Di WooCommerce
  8. Cara Membuat Akun di Checkout WooCommerce
  9. Cara Mengedit Bidang Checkout WooCommerce yang Diperlukan
  10. Cara Membuat Bidang Checkout Bersyarat WooCommerce
  11. Cara Mengedit Template Halaman Checkout WooCommerce
  12. Cara Menambahkan Halaman Pembayaran Nomor PPN WooCommerce
  13. Cara Menambahkan Bidang Tersembunyi di Halaman Checkout WooCommerce
  14. Cara Memindahkan Menu Utama Storefront WooCommerce
  15. Cara Menyembunyikan Tarif Pengiriman jika Pengiriman Gratis Tersedia WooCommerce
  16. Cara Menambahkan Halaman Checkout Faktur WooCommerce
  17. Cara Menambahkan Bidang Ekstra di Formulir Pembayaran WooCommerce
  18. Cara Menambahkan Negara Default Checkout WooCommerce
  19. Cara Menyembunyikan Judul Deskripsi Produk WooCommerce