Cara Menyesuaikan Bidang Checkout WooCommerce

Diterbitkan: 2020-01-09

Proses checkout adalah salah satu langkah terpenting dalam perjalanan pembeli — ini adalah kesempatan terakhir yang Anda miliki untuk meyakinkan pembeli untuk melakukan pembelian. Tetapi 63,23% dari keranjang belanja eCommerce ditinggalkan. Itu banyak pembeli online yang memutuskan untuk membeli suatu produk tetapi berubah pikiran pada detik terakhir.

Ada berbagai faktor yang memengaruhi gerobak yang ditinggalkan (seperti biaya pengiriman dan opsi pembayaran), tetapi halaman checkout itu sendiri juga berperan. Jika terlalu rumit, terlalu panjang, atau memerlukan informasi yang terlalu pribadi, pelanggan mungkin pergi dan membeli produk serupa di tempat lain.

Salah satu cara untuk mengoptimalkan halaman checkout Anda? Bidang checkout yang disesuaikan berdasarkan kebutuhan bisnis dan audiens target Anda. Misalnya: Jika Anda biasanya tidak menjual ke perusahaan, hapus bidang Nama Perusahaan . Jika Anda mengirim kejutan ulang tahun kepada pelanggan, sertakan bidang Tanggal Lahir . Jika Anda menjual produk hewan peliharaan, mungkin masuk akal untuk menanyakan Jenis Hewan Peliharaan .

Dalam artikel ini, kami akan memandu Anda melalui cara menyesuaikan halaman checkout untuk memenuhi kebutuhan audiens target dan bisnis Anda.

Modifikasi bidang pembayaran

WooCommerce menyediakan semua bidang penting untuk halaman checkout Anda. Secara default, ia meminta pelanggan untuk:

  • Detail penagihan
  • Nama depan
  • nama keluarga
  • Nama Perusahaan
  • Negara
  • Alamat
  • Kota/Kota
  • Daerah
  • Kode pos/ZIP
  • Telepon
  • Alamat email
  • Catatan pesanan

Ada banyak cara untuk menyesuaikan halaman, termasuk:

  • Mengedit desain
  • Mengubah teks pada tombol "Tempatkan Pesanan"
  • Menghapus bidang
  • Membuat bidang wajib diisi (atau tidak wajib diisi)
  • Mengubah label bidang input dan teks placeholder
  • Mengumpulkan nomor rekening pelanggan
  • Memverifikasi preferensi pengiriman
  • Mengizinkan pelanggan untuk meminta tanggal atau tenggat waktu pengiriman
  • Menyetel metode kontak pilihan

Ini hanya beberapa penyesuaian yang dapat Anda lakukan; WooCommerce memberikan fleksibilitas yang hampir tak ada habisnya untuk setiap tingkat pengalaman. Jika Anda nyaman mengedit kode, Anda dapat menyesuaikan dengan cuplikan kode. Jika Anda lebih suka struktur yang lebih sedikit, ada berbagai ekstensi dan plugin untuk mengedit bidang checkout.

Sesuaikan bidang checkout menggunakan cuplikan kode

Catatan: Jika Anda tidak terbiasa dengan kode dan menyelesaikan potensi konflik, pilih WooExpert atau Pengembang untuk bantuan. Kami tidak dapat memberikan dukungan untuk penyesuaian berdasarkan Kebijakan Dukungan kami.

Cuplikan kode adalah cara fleksibel bagi pengembang dan pemilik toko untuk menyesuaikan bidang checkout WooCommerce. Berikut daftar tag utama, termasuk kelas dan ID, yang dapat Anda gunakan untuk menyesuaikan desain visual halaman checkout Anda. Tambahkan CSS khusus ke tema anak Anda atau Penyesuai WordPress.

Untuk melihat semua kelas dan pemilih, gunakan inspektur browser Anda di situs web Anda untuk menemukan area yang tepat yang ingin Anda sesuaikan.

 <body class="woocommerce-checkout"> <div class="woocommerce"> <form class="woocommerce-checkout"> <div class="col2-set"> <div class="woocommerce-billing-fields"> <p class="form-row"> <div class="woocommerce-shipping-fields"> <p class="form-row"> <div class="woocommerce-additional-fields"> <div class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table"> <div> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

Misalnya, jika Anda ingin mengubah warna latar belakang kotak input teks dan memberinya sudut membulat, Anda harus menambahkan:

 input[type="text"] { border-radius: 10px !important; background-color: #222 !important; }

Hapus bidang pembayaran:

Ini cukup mudah, tetapi hati-hati , karena perubahan ini dapat menyebabkan konflik dengan ekstensi dan plugin lain.

Tambahkan kode berikut ke file functions.php tema anak Anda. Perhatikan bahwa menempelkan seluruh kode akan menghapus semua bidang dari halaman checkout, jadi pastikan untuk menyertakan hanya bidang yang ingin Anda hapus.

 /** Remove all possible fields **/ function wc_remove_checkout_fields( $fields ) { // Billing fields unset( $fields['billing']['billing_company'] ); unset( $fields['billing']['billing_email'] ); unset( $fields['billing']['billing_phone'] ); unset( $fields['billing']['billing_state'] ); unset( $fields['billing']['billing_first_name'] ); unset( $fields['billing']['billing_last_name'] ); unset( $fields['billing']['billing_address_1'] ); unset( $fields['billing']['billing_address_2'] ); unset( $fields['billing']['billing_city'] ); unset( $fields['billing']['billing_postcode'] ); // Shipping fields unset( $fields['shipping']['shipping_company'] ); unset( $fields['shipping']['shipping_phone'] ); unset( $fields['shipping']['shipping_state'] ); unset( $fields['shipping']['shipping_first_name'] ); unset( $fields['shipping']['shipping_last_name'] ); unset( $fields['shipping']['shipping_address_1'] ); unset( $fields['shipping']['shipping_address_2'] ); unset( $fields['shipping']['shipping_city'] ); unset( $fields['shipping']['shipping_postcode'] ); // Order fields unset( $fields['order']['order_comments'] ); return $fields; } add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Catatan: Bidang Negara wajib diisi . Jika Anda menghapusnya, pesanan tidak dapat diselesaikan dan formulir checkout Anda akan memberikan kesalahan berikut: "Silakan masukkan alamat untuk melanjutkan."

Jadikan bidang wajib tidak wajib diisi:

Pada contoh di bawah, kami akan mengedit bidang Telepon Penagihan . Tambahkan kode ini ke file functions.php tema anak Anda.

 add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field'); function wc_unrequire_wc_phone_field( $fields ) { $fields['billing_phone']['required'] = false; return $fields; }

Atau, jika Anda ingin membuat kolom wajib diisi, ubah teks “false” menjadi “ true .”

Ubah label bidang input dan placeholder:

Tambahkan kode berikut ke file functions.php tema anak Anda dan sesuaikan agar sesuai dengan kebutuhan Anda.

 add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields'); function custom_override_checkout_fields($fields) { unset($fields['billing']['billing_address_2']); $fields['billing']['billing_company']['placeholder'] = 'Business Name'; $fields['billing']['billing_company']['label'] = 'Business Name'; $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name'; $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name'; $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; $fields['billing']['billing_last_name']['placeholder'] = 'Last Name'; $fields['billing']['billing_email']['placeholder'] = 'Email Address '; $fields['billing']['billing_phone']['placeholder'] = 'Phone '; return $fields; }

Sesuaikan bidang checkout dengan plugin

WooCommerce menyediakan beberapa ekstensi luar biasa untuk mengedit bidang checkout tanpa menyentuh sebaris kode.

Editor Bidang Checkout

Ekstensi Editor Bidang Checkout memungkinkan Anda untuk menambah dan menghapus bidang checkout, atau memperbarui jenis, label, dan nilai placeholder dengan beberapa klik. Anda juga dapat menandai setiap bidang checkout sebagai "wajib" atau "tidak wajib".

tangkapan layar opsi Editor Bidang Checkout

Saat menambahkan bidang baru, Anda dapat memilih dari jenis berikut:

  • Teks – input teks standar
  • Kata sandi – masukan teks kata sandi
  • Textarea – Bidang area teks
  • Pilih – Kotak dropdown/pilih
  • Multi-pilih – Kotak multi-pilih
  • Radio – Satu set input radio
  • Kotak centang – Bidang kotak centang
  • Pemilih tanggal – Bidang teks dengan pemilih tanggal terlampir
  • Heading – Sebuah heading, untuk mengatur halaman yang lebih panjang

Jika produk Anda biasanya diberikan sebagai hadiah, Anda dapat menawarkan beberapa pilihan kemasan. Anda dapat menggunakan tombol radio untuk memungkinkan pelanggan memilih antara kemasan biasa, kemasan bertema ulang tahun, atau kemasan bertema ulang tahun. Anda dapat membuat bidang ini wajib diisi, mengatur label ke “Pilih jenis paket Anda”, dan atur placeholder ke “polos.”

Untuk membantu penyesuaian lanjutan, Editor Bidang Checkout menyediakan dokumentasi yang berguna.

Pengaya Pembayaran WooCommerce

Ekstensi Add-On WooCommerce Checkout memberi Anda fleksibilitas untuk menawarkan add-on gratis atau berbayar saat checkout, seperti pemenuhan terburu-buru, pembungkusan kado, atau peningkatan penjualan seperti stiker atau asuransi. Anda dapat menambahkan beberapa jenis bidang ke halaman checkout Anda, termasuk bidang teks, area teks, dropdown, pilihan ganda, tombol radio, kotak centang, kotak centang multi, dan unggahan file.

Pengaya checkout ditampilkan di halaman checkout

Di dasbor, Anda juga dapat mengurutkan dan memfilter pesanan berdasarkan opsi yang Anda buat. Ini mungkin berguna jika Anda ingin memprioritaskan pesanan berdasarkan tanggal pengiriman atau hanya menampilkan pesanan dengan pemrosesan yang dipercepat. Atau Anda mungkin ingin mengemas pesanan yang dibungkus kado sekaligus.

Pembayaran Satu Halaman WooCommerce

Ingin menyederhanakan proses checkout Anda lebih jauh? Ekstensi WooCommerce One Page Checkout mengubah halaman apa pun menjadi halaman checkout.

Menurut sebuah studi oleh Baymard Institute, satu dari empat pembeli meninggalkan kereta di kuartal terakhir karena proses pembayaran yang panjang atau rumit. WooCommerce One Page Checkout mengatasi hal ini dengan mengizinkan pelanggan menambahkan produk ke keranjang mereka dan mengirimkan pembayaran semuanya di halaman yang sama.

Anda bahkan dapat menambahkan bidang pembayaran ke laman landas , yang sangat membantu jika Anda adalah bisnis berbasis layanan.

Login Sosial WooCommerce

Memaksa pelanggan untuk membuat akun di situs web Anda merupakan penghalang potensial untuk membeli. Memberi mereka kemampuan untuk menggunakan profil media sosial yang ada untuk membuat akun membantu meruntuhkan penghalang ini.

Prompt login Sosial WooCommerce di halaman login pelanggan

Ekstensi Login Sosial WooCommerce membuat proses ini semudah dan seaman mungkin. Pelanggan dapat masuk ke situs Anda menggunakan akun Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Instagram, Disqus, Yahoo, atau VK alih-alih membuat informasi login baru.

Mulai menyesuaikan

Proses checkout dapat memiliki dampak yang signifikan pada tingkat konversi Anda sehingga Anda harus membuat perubahan dengan hati-hati, dengan tujuan tertentu dalam pikiran.

Untungnya, WooCommerce memberi Anda fleksibilitas untuk menyesuaikan proses checkout Anda untuk melayani pelanggan online Anda dengan sebaik-baiknya. Apakah Anda perlu membuat perubahan visual atau menambah dan menghapus bidang checkout, Anda memiliki banyak solusi untuk dipilih.