Cara menggunakan Kait Pembayaran WooCommerce

Diterbitkan: 2020-06-23

Dalam panduan ini, Anda akan belajar cara menggunakan kait pembayaran di WooCommerce . Kami akan melihat beberapa kait utama dan memberi Anda beberapa contoh tentang apa yang dapat Anda lakukan dengannya. Jadi, bersiaplah untuk menyesuaikan halaman checkout Anda dan tingkatkan tingkat konversi Anda.

Apa itu hook WooCommerce?

Hooks adalah fungsi hebat yang memungkinkan Anda mengubah atau menambahkan kode tanpa harus memodifikasi file inti. Hooks memberikan banyak fleksibilitas dan pengembang menggunakannya untuk mengubah fungsionalitas default WooCommerce.

Ada dua jenis kait yang berbeda:

  • Kait tindakan memungkinkan Anda menambahkan kode khusus untuk melakukan tindakan tertentu saat suatu peristiwa terjadi.
  • Kait filter mengubah perilaku variabel atau fungsi yang ada.

Berkat kait WooCommerce, pengembang dapat membuat solusi yang sangat disesuaikan dengan cara yang sangat praktis dan fleksibel. Beberapa kait paling penting di WooCommerce adalah kait checkout. Dan jika Anda memiliki toko online, Anda harus menggunakannya untuk menyesuaikan pembayaran dan meningkatkan tingkat konversi Anda.

Kait Pembayaran WooCommerce

Kait checkout hanyalah salah satu jenis dari beberapa kait yang didukung WooCommerce dan mereka berjalan di halaman checkout. Anda dapat menggunakan kait checkout ini untuk mengedit catatan, menambahkan beberapa konten sebelum bidang penagihan, sebelum peninjauan pesanan atau setelah formulir pembayaran, menerapkan beberapa logika untuk menaikkan harga atau membatasi pengguna berdasarkan peran, dan banyak lagi.

Kait WooCommerce bekerja persis seperti kait asli WordPress. Jadi, jika Anda terbiasa dengan hook WordPress, menguasai hook WooCommerce akan mudah.

Sebelum kita mulai

Sebelum melompat ke hook, kami sarankan Anda membuat tema anak. Ada banyak alat yang bisa Anda gunakan. Anda dapat melihat daftar plugin tema anak terbaik untuk WordPress atau panduan terperinci kami tentang cara membuat tema anak dengan plugin atau secara manual.

Jika ini pertama kalinya Anda menggunakan hook, Anda cukup menyalin skrip ini dan menempelkannya langsung di file functions.php dari Tema Anak Anda. Di akhir posting, Anda akan menemukan beberapa contoh hal yang dapat Anda lakukan dengan kait checkout untuk memberi Anda beberapa ide.

Bagaimana cara menggunakan Kait Checkout WooCommerce?

Seperti yang kita lihat sebelumnya, ada kait tindakan WooCommerce dan kait filter dan keduanya memiliki sintaks yang serupa.

Ini adalah contoh kait tindakan:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
fungsi QuadLayers_callback_function(){
    # tambahkan kode Anda di sini
}

Di mana woocommerce_after_checkout_billing_form adalah pengaitnya dan QuadLayers_callback_function adalah fungsi yang kami buat untuk menambahkan skrip khusus kami.

Kait filter, di sisi lain, bekerja dengan cara yang sama tetapi mereka perlu menerima dan mengembalikan parameter dalam fungsi. Sebagai contoh:

 add_filter('woocommerce_breadcrumb_defaults','quadlayers_change_breadcrumb');
fungsi quadlayers_change_breadcrumb( $konten) {
$konten .= "QuadLayers";
kembalikan $konten;
}

Daftar kait checkout untuk WooCommerce

Ada banyak kait WooCommerce yang dapat Anda gunakan di halaman checkout. Beberapa yang utama adalah:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

Semuanya memiliki nama yang cukup jelas. Jika Anda ingin melihat daftar lengkap hook WooCoommerce, lihat dokumentasi ini. Dan untuk melihat cara kerja setiap kait, lihat posting ini.

Misalnya, Anda ingin menambahkan beberapa konten setelah formulir penagihan dan sebelum judul bagian pengiriman. Anda akan menggunakan sesuatu seperti ini:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
fungsi QuadLayers_callback_function(){
echo 'ini dia isi teks atau html';
}

Dalam hal ini, kami hanya menambahkan beberapa teks, tetapi Anda dapat menambahkan struktur HTML yang kompleks dan membuat logika kustom Anda dengan fungsi PHP. Mari kita lihat beberapa contoh untuk memberi Anda beberapa ide tentang cara memanfaatkan hook checkout WooCommerce sebaik-baiknya.

Cara menyesuaikan halaman checkout dengan kait WooCommerce

Di sini, kami akan menunjukkan kepada Anda beberapa contoh tentang apa yang dapat Anda lakukan untuk menyesuaikan halaman checkout menggunakan kait WooCommerce di situs Anda.

Tambahkan gambar ke ulasan pesanan

Anda dapat menambahkan gambar ke halaman tinjauan pesanan. Dalam hal ini, kami telah menambahkan kode QR tetapi Anda dapat menyertakan gambar lain, GIF animasi, atau gambar latar belakang.

 add_action('woocommerce_review_order_before_payment','example_callback');
fungsi contoh_panggilan balik() {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
}
Tambahkan kode QR dalam peninjauan pesanan.
Tambahkan kode QR ke tinjauan pesanan .

Ubah remah roti di halaman checkout

Anda dapat mencegah pengguna menavigasi kembali ke halaman beranda dengan mengedit remah roti. Dalam contoh ini, kami akan menunjukkan cara mengubah teks Beranda di remah roti untuk Store .

 add_filter( 'woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb' );
function 'quadlayers_change_breadcrumb'( $default ) {
    $default['home'] = 'Toko';
    kembalikan $default;
}
Kait checkout WooCommerce - pembayaran remah roti
Edit remah roti halaman checkout.

Tampilkan lencana kepercayaan di sebelah tombol Tempatkan Pesanan

Kait checkout WooCommerce menawarkan beberapa opsi hebat untuk membangun kepercayaan dan memberi pelanggan ketenangan pikiran saat mereka akan membeli. Dengan menunjukkan lencana kepercayaan tepat di sebelah tombol Tempatkan pesanan , Anda dapat meningkatkan rasio konversi, dan membangun kepercayaan di sekitar merek Anda.

 add_action( 'woocommerce_review_order_after_submit', 'quadlayers_trust_badges' );
fungsi quadlayers_trust_badges() {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>Saya menambahkan lencana kepercayaan di atas dengan kait WooCommerce</i></div>';
}
Kait checkout WooCommerce - lencana-kepercayaan-checkout
Tampilkan lencana kepercayaan di halaman checkout WooCommerce.

Edit bidang checkout yang ada

Cara terbaik untuk menyesuaikan halaman checkout sepenuhnya adalah dengan mengedit label dan placeholder bidang. Dalam contoh ini, kita akan mengedit label untuk nama depan dan tempat penampung catatan pesanan menggunakan kait woocommerce_checkout_fields .

 add_filter( 'woocommerce_checkout_fields' , 'quadlayers_labels_placeholders', 9999 ); 
function quadlayers_labels_placeholder( $f ) { 	
	$f['billing']['billing_first_name']['label'] = 'Siapa nama Anda?';
	$f['order']['order_comments']['placeholder'] = 'Apa yang Anda pikirkan?'; 
	kembali $f; 
}
Kait checkout WooCommerce - placeholder-checkout
Ganti placeholder dan label formulir checkout WooCommerce.

Tambahkan bidang checkout khusus

Akhirnya, inilah contoh yang lebih kompleks. Kami akan menunjukkan cara membuat bidang khusus baru yang memungkinkan pelanggan berlangganan buletin Anda saat pembayaran. Untuk itu, kita akan menggunakan dua kait: satu untuk menampilkan bidang untuk berlangganan, dan satu lagi untuk menyimpan status tombol dalam database (apakah sudah dicentang atau tidak).

 add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );
add_action( 'woocommerce_checkout_update_order_meta', 'quadlayers_save_function' );

// masukkan kotak centang di checkout woocommerce 
function quadlayers_subscribe_checkout( $checkout ) { 
	woocommerce_form_field( 'berlangganan', array(
		'ketik' => 'kotak centang',
		'class' => array('misha-field form-row-wide'),
		'label' => ' Berlangganan newsletter kami.',
		), $checkout->get_value( 'berlangganan' ) ); 
}
// simpan nilai bidang
fungsi quadlayers_save_function( $order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['subscribed'] ) && $_POST['subscribed'] == 1 )
		update_post_meta( $order_id, 'berlangganan', 1 ); 
}
Kait checkout WooCommerce - pembayaran berlangganan
Tambahkan kotak centang di halaman checkout WooCommerce.

Sesuaikan halaman checkout dengan plugin

Jika Anda tidak nyaman menggunakan kait, Anda juga dapat menyesuaikan halaman checkout menggunakan plugin. Ada banyak alat di luar sana tetapi kami merekomendasikan dua ini:

  • Manajer Checkout untuk WooCommerce : Dengan lebih dari 70.000 instalasi aktif, ini adalah salah satu plugin checkout paling populer untuk WooCommerce. Manajer Checkout memungkinkan Anda untuk menyesuaikan, menambah, mengedit, dan menghapus bidang pada halaman checkout. Ini memiliki versi gratis dan 3 paket premium mulai dari 20 USD.
  • Checkout Langsung untuk WooCommerce : Dengan alat freemium ini, Anda dapat menyederhanakan proses checkout dan meningkatkan tingkat konversi Anda. Anda dapat mempersingkat proses pembelian dengan mengarahkan pelanggan Anda dari halaman produk langsung ke kasir. Direct Checkout memiliki versi gratis dan paket premium mulai dari 20 USD (pembayaran satu kali).

Untuk informasi lebih lanjut tentang cara menggunakan plugin ini dan meningkatkan halaman checkout, lihat panduan terperinci kami.

Kesimpulan

Secara keseluruhan, dengan kait WooCommerce Anda dapat menyesuaikan halaman checkout Anda dan meningkatkan tingkat konversi. Di sini, kami telah menunjukkan kepada Anda beberapa contoh cara menggunakan kait ini untuk mempersonalisasi berbagai bagian pembayaran Anda. Namun, masih banyak lagi yang bisa Anda lakukan! Jadi, kami mendorong Anda untuk bermain-main dengan mereka dan melepaskan kreativitas Anda.

Untuk lebih banyak contoh dan informasi tentang cara menyesuaikan halaman checkout WooCommerce, lihat panduan langkah demi langkah ini.

Beri tahu kami di bagian komentar di bawah jika Anda memiliki pertanyaan. Dan jika Anda menikmati membaca, silakan bagikan posting ini di media sosial!