Cara menambahkan bidang khusus ke halaman checkout WooCommerce
Diterbitkan: 2020-07-21Apakah Anda ingin menyesuaikan checkout Anda ? Dalam panduan ini, kami akan menunjukkan cara menambahkan bidang khusus ke halaman checkout di WooCommerce untuk membawa toko Anda ke tingkat berikutnya.
Mengapa menyesuaikan checkout WooCommerce?
Di QuadLayers, kita sebelumnya telah melihat cara menyesuaikan halaman toko di WooCommerce. Hari ini, kita akan melihat bagaimana melakukan hal yang sama dan menyertakan bidang khusus di kasir. Checkout adalah salah satu halaman terpenting untuk setiap toko online . Ini adalah tempat Anda ingin membawa pembeli Anda sehingga mereka menyelesaikan pembelian dan Anda menutup penjualan. Jadi, untuk meningkatkan tingkat konversi dan pendapatan Anda, mengoptimalkan pembayaran dengan bidang khusus adalah suatu keharusan.
Bagaimana halaman checkout yang sempurna? Itu sangat tergantung pada bisnis Anda. Misalnya, checkout untuk produk fisik berbeda dengan checkout untuk produk digital. Anda memilih checkout satu halaman atau multi-halaman, menampilkan atau menyembunyikan bidang, menggunakan warna yang berbeda, dan sebagainya. Namun, yang paling penting adalah checkout Anda menghasilkan kepercayaan pada pengguna, tidak memiliki gangguan, dan dioptimalkan sehingga pembelanja menghabiskan waktu sesedikit mungkin.
Bagaimana cara menambahkan bidang khusus ke halaman checkout WooCommerce?
Ada dua cara utama untuk menambahkan atau menyembunyikan bidang khusus pada halaman checkout di WooCommerce:
- Dengan plugin
- Secara terprogram
Jika Anda tidak memiliki keterampilan pengkodean, kami sarankan Anda memeriksa plugin ini:
- WooCommerce Direct Checkout : Ini adalah alat yang sangat baik untuk menyederhanakan proses checkout dan mengarahkan pengguna dari halaman produk ke checkout. Ini memiliki versi gratis dan paket premium yang dimulai dari 19 USD.
- WooCommerce Checkout Manager : Dengan lebih dari 90.000 instalasi aktif, Checkout Manager adalah plugin yang bagus untuk meningkatkan tingkat konversi Anda. Ini memungkinkan Anda untuk menambah, menyesuaikan, dan menghapus bidang pada halaman checkout. Ini adalah alat freemium dengan versi gratis dan paket pro mulai dari 19 USD.
Plugin checkout tersebut adalah pilihan yang sangat baik dan akan menyelesaikan pekerjaan dengan lancar. Namun, jika Anda tidak ingin menginstal plugin apa pun, Anda dapat mengkodekan solusi Anda. Dalam panduan ini, kami akan fokus pada bagaimana Anda dapat menambahkan bidang khusus ke halaman checkout WooCommerce dengan beberapa pengkodean . 
Tambahkan bidang khusus ke checkout WooCommerce secara terprogram
Di bagian ini, Anda akan mempelajari cara menambahkan bidang khusus ke halaman checkout WooCommerce secara terprogram . Kami akan menunjukkan kepada Anda cara memasukkan:
- Teks
- kotak centang
- Jenis masukan radio
Ada bidang khusus lain yang dapat Anda tambahkan, tetapi perlu diketahui bahwa bidang tersebut mungkin memerlukan beberapa jenis validasi. Jadi, dalam tutorial ini, kita akan fokus pada 3 tipe tersebut dan melewatkan bidang yang memerlukan validasi nilai yang dimasukkan. Selain itu, kami akan menampilkan bidang khusus di daftar pesanan backend dan template email.
CATATAN : Ingatlah bahwa jika Anda ingin menambahkan bidang lain ke proyek Anda, Anda harus menerapkan validasi keamanan.
Jadi, untuk menambahkan bidang khusus ke halaman checkout WooCommerce, ada dua opsi:
- Anda dapat mengkodekan skrip Anda dalam tema anak
- Buat plugin khusus
Untuk membangun solusi yang lebih skalabel dan terorganisir dengan baik, kami akan membuat plugin khusus . Selain itu, tidak seperti pendekatan tema anak, plugin khusus juga dapat menjadi titik awal pengembangan lebih lanjut. Namun, jika Anda lebih suka menggunakan tema anak, kami sarankan Anda membaca panduan ini.
Tambahkan bidang khusus ke checkout WooCommerce dengan plugin khusus
Plugin khusus yang akan kita buat akan memiliki tiga file.
- Utama
- Paling depan
- bagian belakang
File utama bertindak sebagai pintu masuk gerbang ke file front-end, yang akan kita gunakan untuk skrip front-end kita. Juga, kami akan menyertakan file ketiga, di mana skrip backend berada. Perlu dicatat bahwa file front-end ini akan menjadi file dasar utama dan harus dipindahkan ke file hierarki tingkat rendah (seperti file backend kami) jika Anda menambahkan lebih banyak kelas. Jadi sekarang, mari kita lihat cara menambahkan bidang khusus ke halaman checkout WooCommerce menggunakan plugin khusus .
1. Buka IDE favorit Anda dan buat folder dengan tiga file:
QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (File depan) /__/__class_qlccf_back.php (File backend) /__QuadLayers_checkout_fields.php (File utama)
2. File Utama
File utamanya adalah QuadLayers_checkout_fields.php :
<?php
/**
* @link https://quadlayers.com/
* @sejak 1.0.0
* Nama Plugin: QuadLayers Checkout Custom Fields
* URI Plugin: https://quadlayers.com/
* Deskripsi: Plugin untuk membuat bidang khusus di halaman checkout WooCommerce, mencetak dalam pesanan backend dan templat email
* Versi: 1.0.0
* Pengarang: Sebastopolys
* Penulis URI: https://quadlayers.com/
* Domain Teks: qlccf
*/
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('run_init')){
kelas akhir run_init{
menjalankan fungsi statis publik (){
kembali include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
}
}
run_init::run();
}
kalau tidak{
echo "<h3>ERROR - Kelas run_init yang ada di QuadLayers_checkout_fields.php !</h3>";
}
Anda dapat mengubah informasi plugin, fungsi, dan nama file dan menempatkannya sendiri. Tapi kami sarankan Anda menyalin dan menempelkan skrip terlebih dahulu tanpa mengedit apa pun sehingga Anda lebih memahami cara kerjanya.
3. File Kelas Ujung Depan
File ujung depan adalah class_qlccf_base.php . Di sinilah kelas utama hidup, dan di mana Anda dapat memasukkan kelas dan fungsi dalam jumlah tak terbatas. Kelas abstrak tidak dapat dipakai, sehingga harus diwarisi oleh beberapa kelas lain. Inilah file ujung depan dan penjelasan terperinci setelah kode:
<?php
if(!defined('ABSPATH')){die('-1');}
elseif(!class_exists('base_class')){
kelas abstrak base_class{
public const VERS = '1.1.0';// <-- Versi plugin
public const PREFIX = 'qlccf';// <-- Awalan plugin
public const PLDIR = __DIR__ ;// <-- Plugin Dir path
public const PLPAT = __FILE__ ;// <-- Jalur File
fungsi publik add_base_hooks(){
add_action( 'woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout' ));
add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
add_action( 'woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function' ));
}
//masukkan kotak centang di checkout woocommerce - kait: after_order_notes
fungsi publik quadlayers_subscribe_checkout( $checkout ) {
woocommerce_form_field( 'pelanggan', array(
'ketik' => 'kotak centang',
//'wajib' => benar,
'class' => array('custom-field form-row-wide'),
'label' => ' Berlangganan newsletter kami.'
), $checkout->get_value( 'suscriptor' ) );
}
// Sisipkan teks di checkout woocommerce - kait: after_billing_form
fungsi publik quadlayers_email_checkout($checkout2){
woocommerce_form_field( 'altmail', array(
'ketik' => 'email',
//'wajib' => benar,
'class' => array('custom-field form-row-wide'),
'label' => 'Email alternatif.'
), $checkout2->get_value( 'altmail' ) );
}
// Masukkan bidang khusus radio di checkout woocommerce - kait: before_order_notes
fungsi publik quadlayers_radio_checkout($checkout3){
woocommerce_form_field( 'umpan', array(
'ketik' => 'radio',
//'wajib' => benar,
'class' => array('custom-field form-row-wide'),
'label' => ' Bagaimana Anda menemukan kami?.',
'pilihan' => array(
'Google' => 'Google',
'Teman' => 'Teman',
'Facebook' => 'Facebook',
'Youtube' => 'YoutTube',
'Lainnya' => 'Lainnya'
)
));
}
// simpan semua nilai bidang khusus
fungsi publik quadlayers_save_function( $order_id ){
if ( ! kosong( $_POST['suscriptor'] ) ) {
update_post_meta( $order_id, 'suscriptor', sanitize_text_field( $_POST['suscriptor'] ) );
}
if ( ! kosong( $_POST['altmail'] ) ) {
update_post_meta( $order_id, 'altmail',sanitize_text_field( $_POST['altmail'] ) );
}
if ( ! kosong( $_POST['feed'] ) ) {
update_post_meta( $order_id, 'feed',sanitize_text_field( $_POST['feed'] ) );
}
}
}// Sertakan kelas backend
include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
kalau tidak{
echo "<h3>INITIALISATION ERROR - Kelas base_class yang ada !</h3>";
}
Setelah mendeklarasikan kelas, kita mendefinisikan beberapa konstanta yang dapat kita gunakan nanti. Kemudian, kami menyertakan semua kait WooCommerce yang akan kami gunakan dalam satu metode, yang kami sebut add_base_hooks() .
Karena kelas abstrak tidak dapat dipakai, kami menjalankan metode ini dari file backend kami sehingga menjalankan semua kait yang dideklarasikan di sini. Kami menggunakan masing-masing kait untuk tugas yang berbeda, menetapkan salah satu metode berikut untuk masing-masingnya. Yaitu kait ini: woocommerce_after_order_notes dalam metode add_base_hooks() kami menjalankan metode quadlayers_subscribe_checkout() , keduanya didefinisikan dalam kelas base_class .
Perhatikan bagaimana kami menggunakan beberapa fungsi WordPress dan WooCommerce: woocommerce_form_field() Ini menampilkan bidang khusus dalam formulir checkout WooCommerce. update_post_meta() Fungsi asli WordPress ini banyak digunakan untuk memperbarui metadata database posting, produk, dan jenis posting kustom lainnya. Selanjutnya, jenis kolom input yang tersedia adalah:
| teks | Pilih | radio |
| kata sandi | tanggal Waktu | datetime-lokal |
| tanggal | bulan | waktu |
| pekan | nomor | surel |
| url | telp |
4. File Backend, class_qlccf_back.php
Di sinilah kelas qlccf_back_class mewarisi base_class sebelumnya didefinisikan dalam class_qlccf_base.php file :
<?php
if(!defined('ABSPATH')){die('-1');}
if(!class_exists('qlccf_back_class')):
kelas qlccf_back_class memperluas base_class{
fungsi publik __construct(){
induk::add_base_hooks();
jika(is_admin()):
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
add_filter( 'manage_edit-shop_order_columns', array($this,'qlccf_email'));
add_action( 'manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
add_action( 'woocommerce_email_order_meta',array($this,'qlccf_email_template'));
berakhir jika;
}
# tampilkan nilai bidang khusus dalam daftar pesanan backend
fungsi publik qlccf_column_content($column){
global $postingan;
if ( 'pelanggan' === $column ) { # Kotak centang
$pesanan = wc_get_order( $post->ID );
$c_meta = $order->get_meta('suscriptor');
if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
lain:$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
berakhir jika;
echo '<img src="'.$img_url.'"/>';
}
elseif('altmail' === $column ){ # Surat alternatif
$pesanan = wc_get_order( $post->ID );
$e_meta = $pesanan->get_meta('altmail');
echo $e_meta;
}
kalau tidak{}
}
# Setel kolom kotak centang
fungsi publik qlccf_checkbox($columns){
$columns['suscriptor'] = __( 'Suscriptor');
kembalikan $kolom;
}
# Setel kolom surat alt
fungsi publik qlccf_email($columns1){
$columns1['altmail'] = __( 'Surat Alternatif');
kembalikan $columns1;
}
# Sertakan bidang Alt Mail di tamplate email WC
fungsi publik qlccf_email_template($order_obj){
$is_set = get_post_meta( $order_obj->get_order_number());
// kembali jika tidak ada bidang khusus yang disetel
jika( kosong( $is_set ) )
kembali;
// ok, kami melanjutkan dan menggemakan bidang khusus
$alt_email = get_post_meta( $order_obj->get_order_number(), 'altmail', true );
echo '<h2>Bidang khusus saya</h2><p>Email alternatif:'.$alt_email.'</p>';
}
}
$run=kelas qlccf_back_baru;
berakhir jika;
Dalam file ini, kami mendefinisikan konstruktor untuk menjalankan hook front-end yang telah kami nyatakan di file kami yang lain. Kemudian, kami menambahkan kait yang diperlukan untuk menampilkan bidang khusus di daftar pesanan backend dan template email WooCommerce menggunakan if() bersyarat dan fungsi WordPress is_admin() untuk menerapkannya hanya jika pengguna berada di layar backend admin. manage_shop_order_posts_custom_column() menyisipkan kolom dalam daftar pesanan, sehingga kita dapat menampilkan bidang dalam fungsi qlccf_column_content() kita.
Setelah kami terhubung ke loop WooCommerce, kami memeriksa apakah nama bidang milik salah satu bidang khusus kami dan jika ya, kami mencetaknya. Menggunakan if()else bersyarat, kita dapat memeriksa semua bidang khusus kita dalam fungsi yang sama.
Setelah itu, kami membuat kotak centang dan kolom kolom teks kustom di daftar pesanan backend. Kita perlu mengatur kolom kustom kita untuk menampilkan bidang WooCommerce kustom kita setelah pelanggan menyelesaikan proses checkout dan pesanan dibuat.
Terakhir, dalam metode terakhir, kami menggunakan kait woocommerce_email_order_meta untuk menampilkan bidang teks khusus kami di template email admin. Fungsi WordPress & WooCommerce yang digunakan:
wc_get_order() : Mendapatkan objek pesanan saat ini dengan semua data terlampir padanya
get_meta() : Untuk mendapatkan metadata pesanan
get_post_meta() : Mendapatkan nilai bidang khusus kami yang disimpan dalam database
get_order_number() : Untuk mendapatkan nomor id dari pesanan saat ini 
Membungkus
Secara keseluruhan, menyesuaikan halaman checkout adalah suatu keharusan untuk setiap toko online. Dalam panduan ini, kami telah menunjukkan kepada Anda cara menambahkan bidang khusus ke halaman checkout WooCommerce secara terprogram dengan sedikit pengkodean. Anda telah mempelajari cara membuat plugin khusus selangkah demi selangkah untuk mengoptimalkan proses pembayaran.
Selain itu, jika Anda ingin menyesuaikan halaman checkout dan membawanya ke tingkat berikutnya, kami sarankan Anda memeriksa panduan langkah demi langkah ini.
Sudahkah Anda mencoba metode ini? Dapatkah Anda memikirkan cara untuk memperbaikinya? Silakan bagikan pengalaman Anda dengan kami di bagian komentar di bawah!
Jika Anda ingin meningkatkan konversi Anda di WooCommerce, kami sarankan Anda melihat panduan ini:
- Tombol Beli Cepat Terbaik untuk WooCommerce
- Cara mengoptimalkan pembayaran di WooCommerce
- Bagaimana cara mengedit halaman toko di WooCommerce melalui pengkodean?