Cara Menyusun Ulang Bidang Checkout WooCommerce

Apakah Anda ingin menyusun ulang bidang checkout WooCommerce di toko online Anda? Kami akan menunjukkan kepada Anda semua cara terbaik untuk menyusun ulang bidang checkout dalam tutorial ini.

WooCommerce memungkinkan Anda untuk menyusun ulang dan mengatur ulang sejumlah elemen di situs web eCommerce Anda untuk meningkatkan tingkat konversi. Di luar itu, bidang checkout juga dapat diatur ulang agar sesuai dengan kebutuhan situs web dan pelanggan Anda.

Namun sebelum kita melalui langkah-langkahnya, mari kita lihat mengapa Anda mungkin perlu mengubahnya.

Mengapa mengubah Urutan Bidang Checkout?

Saat Anda menginstal WooCommerce di toko online Anda, ada beberapa halaman penting yang dibuat oleh plugin secara default. Mereka termasuk keranjang, toko, akun saya, halaman checkout, dan sebagainya. Tetapi ketika datang ke halaman checkout, bidang default mungkin tidak berlaku untuk setiap jenis situs web eCommerce.

Bergantung pada situs web dan pelanggan Anda, Anda mungkin perlu menyusun ulang bidang checkout WooCommerce dari waktu ke waktu. Misalnya, pada halaman checkout default, pelanggan harus memasukkan nama depan diikuti dengan nama belakang. Namun dalam beberapa kasus, Anda mungkin menemukan bahwa memasukkan nama belakang di awal, atau menanyakan alamat penagihan pelanggan terlebih dahulu mungkin lebih tepat.

Oleh karena itu, jika Anda ingin menyesuaikan bidang ini berdasarkan situasi serupa, Anda harus menyusun ulang bidang tersebut.

Bagaimana Cara Menyusun Ulang Bidang Checkout WooCommerce?

Anda dapat menyusun ulang bidang checkout WooCommerce menggunakan 2 cara utama di WordPress:

• Dengan Plugin
• Secara terprogram

Kami akan membahas setiap langkah secara rinci untuk panduan ini. Namun, pastikan Anda telah menyiapkan WooCommerce dengan benar untuk situs web Anda dan menggunakan salah satu tema WooCommerce yang kompatibel sebelum kita mulai.

Susun Ulang Bidang Checkout WooCommerce dengan Plugin

Plugin dapat banyak membantu dalam meningkatkan fungsionalitas situs web Anda. Demikian pula, salah satu cara termudah untuk menyusun ulang bidang WooCommerce adalah dengan menggunakan plugin. Yang harus Anda lakukan adalah menginstal plugin ke situs WordPress Anda dan mengatur ulang bidang checkout melaluinya.

Ada banyak plugin checkout WooCommerce yang dapat Anda gunakan untuk menyesuaikan halaman checkout Anda. Namun, hanya sedikit yang memberi Anda opsi untuk menyusun ulang bidang checkout di WooCommerce.

Untuk tutorial ini, kita akan menggunakan plugin Checkout Manager for WooCommerce karena sangat mudah digunakan. Ini juga salah satu plugin terbaik untuk menyesuaikan halaman checkout dan Anda bahkan dapat menggunakannya untuk menyusun ulang bidang checkout.

Tetapi untuk mulai menggunakan plugin, Anda perlu menginstal dan mengaktifkannya.

1. Instal dan Aktifkan Plugin

Untuk menginstal plugin, buka Plugins > Add New dari dashboard WordPress Anda dan cari kata kunci untuk plugin tersebut. Setelah Anda menemukan plugin, klik Instal Sekarang .

Setelah instalasi selesai, Aktifkan plugin.

Anda juga dapat menginstal plugin secara manual jika Anda ingin menggunakan plugin premium atau plugin yang tidak termasuk dalam repositori WordPress. Plugin perlu diunduh dari pasar dan diunggah ke situs web Anda. Lihat panduan kami untuk menginstal plugin WordPress secara manual untuk informasi lebih lanjut.

2. Susun ulang bidang checkout WooCommerce dari opsi plugin

Setelah plugin diaktifkan, Anda dapat mulai menggunakannya untuk menyusun ulang bidang checkout WooCommerce. Cukup buka WooCommerce > Pengaturan dari dasbor WordPress Anda dan buka tab Checkout .

Halaman checkout biasanya menyertakan detail penagihan dan pengiriman. Kami akan menyusun ulang bidang penagihan terlebih dahulu. Jadi, pilih opsi Penagihan di tab Checkout. Di sini, Anda akan dapat melihat semua bidang untuk detail penagihan.

Sekarang, yang harus Anda lakukan adalah menggunakan drag and drop untuk menyusun ulang bidang rincian tagihan. Cukup seret bidang dan jatuhkan ke posisi di mana Anda ingin menempatkannya di halaman checkout Anda. Anda juga dapat menggunakan panah ke atas dan ke bawah untuk menggeser bidang ke posisi yang diinginkan.

Selain itu, Anda juga memiliki opsi posisi untuk setiap bidang. Bidang dapat ditempatkan di sisi kiri atau kanan layar atau dengan area bidang yang luas. Bidang bahkan dapat disembunyikan jika diperlukan dengan mengaktifkan sakelar pada kolom Dinonaktifkan.

Setelah Anda menyusun ulang semua bidang checkout untuk toko WooCommerce Anda, klik Simpan perubahan . Saat Anda memuat ulang halaman checkout, Anda akan dapat melihat bidang yang baru dipesan.

Dengan cara yang sama, Anda juga dapat menyusun ulang bidang detail pengiriman. Cukup pilih opsi pengiriman dari tab Checkout dan atur ulang bidangnya lagi. Setelah Anda mengatur ulang semua bidang yang diperlukan, Anda akan dapat melihat bahwa mereka juga diurutkan ulang di halaman checkout frontend.

Susun Ulang Bidang Checkout WooCommerce Secara Terprogram

Anda juga dapat menyusun ulang bidang checkout WooCommerce menggunakan cuplikan kode jika Anda tidak ingin menambahkan plugin tambahan apa pun ke situs web Anda. Tetapi pendekatan ini hanya cocok untuk Anda jika Anda memiliki pengetahuan tingkat lanjut dalam pemrograman.

Selain itu, cuplikan kode ditambahkan di file functions.php situs web Anda dan Anda mungkin kehilangannya saat memperbarui tema WordPress Anda. Jadi, Anda harus membuat tema anak untuk menambahkan cuplikan. Jika Anda memerlukan bantuan, Anda bahkan dapat menggunakan salah satu plugin tema anak terbaik untuk WordPress untuk membuatnya.

Namun, kami juga menyarankan Anda membuat cadangan situs WordPress Anda sebelum menambahkan cuplikan kode. File functions.php adalah salah satu file inti situs web Anda dan setiap perubahan yang tidak diinginkan dapat mengakibatkan lebih banyak masalah. Sekarang, mari kita lanjutkan prosesnya.

1. Akses file functions.php di Editor Tema

Anda harus menambahkan potongan kode di file functions.php dari editor tema. Untuk mengaksesnya, buka Appearance > Theme Editor dari dashboard WordPress Anda. Kemudian, pilih file functions.php dari sisi kanan layar Anda di file tema.

Sekarang, Anda dapat mulai menambahkan cuplikan kode setelah Anda menggulir ke bagian bawah editor dan memperbarui file . Kami telah menggunakan tema Divi untuk tutorial ini. Jadi mungkin terlihat sedikit berbeda dari editor Anda tergantung pada tema yang Anda gunakan.

2. Tambahkan Cuplikan Kode

Ada sejumlah cuplikan kode yang dapat Anda tambahkan ke situs web Anda untuk menyusun ulang bidang checkout WooCommerce. Tetapi pertama-tama, Anda perlu memahami bahwa bidang dibagi menjadi 4 kelompok:

• Alamat penagihan – penagihan
• Alamat pengiriman – pengiriman
• Login akun – akun
• Informasi tambahan – pesan

Selanjutnya, masing-masing bidang dalam kelompok ini memiliki prioritas khusus. Anda juga perlu mengetahui prioritas mereka jika Anda ingin menyusun ulang bidang.

Anda dapat menemukan bidang dalam daftar berikut di bawah ini. Nomor yang diwakili setelah bidang adalah prioritas mereka.

• Penagihan
  • billing_first_name – 10
  • billing_last_name – 20
  • billing_company – 30
  • billing_address_1 – 40
  • billing_address_2 – 50
  • billing_city – 60
  • billing_postcode – 70
  • billing_country – 80
  • billing_state – 90
  • billing_email – 100
  • billing_phone – 110
• Pengiriman
  • shipping_first_name – 10
  • shipping_last_name – 20
  • shipping_company – 30
  • shipping_address_1 – 40
  • shipping_address_2 – 50
  • shipping_city – 60
  • shipping_postcode – 70
  • shipping_country – 80
  • shipping_state – 90
• Akun
  • account_password (tidak ada prioritas)
• Memesan
  • order_comments (tidak ada prioritas)

Sekarang, mari kita lihat beberapa contoh:

2.1. Pindahkan Bidang ke Atas

Jika Anda ingin memindahkan bidang checkout untuk menampilkannya di bagian atas, atau baris pertama, Anda dapat menggunakan cuplikan kode berikut.

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_email_top' );

function quadlayers_email_top( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 5;
kembalikan $checkout_fields;
}

Secara default, nama depan memiliki prioritas paling atas dengan 10. Jadi, jika Anda ingin menyusun ulang bidang ke atas, pastikan saja prioritas bidangnya kurang dari 10 .

Dalam kasus kami, prioritas bidang email adalah 5. Inilah sebabnya mengapa ditempatkan di bagian atas di bidang checkout.

2.2. Pindahkan Bidang ke Grup Lain

Menggunakan cuplikan kode untuk menyusun ulang bidang checkout WooCommerce tidak terbatas hanya untuk memindahkan bidang ke atas. Anda dapat memodifikasi atau membuat lebih banyak cuplikan kode untuk memindahkan bidang ke grup lain juga.

Sebagai contoh, mari kita perhatikan cuplikan berikut:

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_billing_email_another_group' );
fungsi quadlayers_billing_email_another_group( $checkout_fields ){
// 1. Kami menetapkan array bidang ke grup lain di sini
$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];
// 2. Hapus bidang dari lokasi sebelumnya
unset( $checkout_fields['billing']['billing_email'] );
kembalikan $checkout_fields;
}

Seperti yang Anda lihat, email penagihan telah dipindahkan ke grup informasi tambahan. Demikian pula, Anda dapat mengubah kode sesuai dengan kebutuhan situs web Anda dan menggunakannya untuk memindahkan bidang dalam grup yang berbeda juga.

Jika Anda memerlukan bantuan lebih lanjut, bahkan WooCommerce telah menyediakan panduan terperinci untuk mengedit bidang checkout menggunakan kode. Cukup klik di sini untuk melihatnya.

Bonus: Aktifkan Pembayaran Langsung di WooCommerce

Karena Anda sekarang sudah familiar dengan proses untuk menyusun ulang bidang checkout WooCommerce, mungkin lebih baik untuk mempersingkat proses checkout untuk situs web Anda juga. Dan jika Anda ingin menyederhanakan prosesnya, melewatkan halaman keranjang adalah salah satu praktik terbaik. Dengan cara ini, pelanggan dapat diarahkan ke halaman checkout secara langsung jika mereka ingin membeli beberapa produk saja.

Untuk mengaktifkan checkout langsung, kami akan menggunakan plugin Direct Checkout for WooCommerce . Ini adalah plugin sederhana yang memungkinkan pelanggan Anda melewati halaman keranjang dan mengarahkan mereka ke halaman checkout. Tetapi untuk mulai menggunakan plugin, Anda harus menginstal dan mengaktifkannya terlebih dahulu.

Jadi, buka Plugins > Add New dari dashboard WordPress Anda sekali lagi dan cari plugin. Kemudian, klik Instal Sekarang dan aktifkan plugin segera setelah instalasi selesai.

Sekarang, Anda harus menyesuaikan beberapa pengaturan default WooCommerce. Mereka dapat ditemukan di WooCommerce> Pengaturan di bawah tab Produk dari dasbor WordPress Anda. Di sini, pilih opsi Umum dan Anda akan dapat melihat opsi umum untuk produk WooCommerce.

Kemudian, navigasikan ke perilaku tambahkan ke troli dan centang kedua opsi agar tidak mengganggu pengaturan plugin.

Setelah itu, buka tab Direct Checkout dan pilih opsi General di sini juga. Sekarang, atur Added to cart redirect ke sebagai Checkout dari menu dropdown. Terakhir, simpan perubahannya .

Itu saja, pelanggan akan diarahkan ke halaman checkout alih-alih halaman keranjang di situs web Anda. Kami juga memiliki panduan terperinci untuk melewati halaman keranjang jika Anda memerlukan informasi lebih lanjut.

Kesimpulan

Ini adalah berbagai cara di mana Anda dapat menyusun ulang bidang checkout WooCommerce di situs web Anda. Ini adalah penyesuaian yang sangat baik yang dapat Anda terapkan ke halaman checkout Anda untuk kepuasan pelanggan Anda. Dan tergantung pada situs web Anda, mungkin lebih mudah bagi Anda juga.

Untuk meringkas , kami telah meninjau dua cara terbaik untuk menyusun ulang bidang checkout. Mereka:

• Menggunakan plugin
• Secara terprogram

Menggunakan plugin adalah salah satu cara tercepat untuk menyusun ulang bidang. Anda hanya perlu menyesuaikan beberapa opsi dari dasbor WooCommerce Anda dan menyusun ulang bidang. Namun, jika Anda menginginkan pendekatan yang lebih maju dan memiliki pengetahuan teknis, Anda juga dapat menyusun ulang menggunakan cuplikan kode.

Selain itu, kami juga menyertakan tutorial singkat untuk menyederhanakan proses checkout dengan melewatkan halaman keranjang. Jika Anda ingin lebih meningkatkan halaman checkout Anda, kami juga memiliki panduan terperinci untuk mengoptimalkan checkout WooCommerce, membuat checkout satu halaman, mengubah teks lanjutkan ke checkout, dan seterusnya.

Kami berharap tutorial ini bermanfaat bagi Anda. Berikut beberapa artikel lainnya yang mungkin menarik bagi Anda:

• Cara Mengubah Pesan Kesalahan Pembayaran WooCommerce
• Plugin Checkout Satu Halaman WooCommerce Terbaik (Gratis dan Berbayar)
• Cara menambahkan bidang bersyarat ke checkout WooCommerce

Jadi, bisakah Anda menyusun ulang kolom checkout sekarang? Apakah Anda memiliki masalah? Beri tahu kami di komentar!