Cara menyesuaikan formulir pendaftaran WooCommerce

Apakah Anda ingin mengedit formulir pendaftaran dan mendapatkan lebih banyak prospek? Dalam panduan ini, kami akan menunjukkan kepada Anda berbagai cara untuk menyesuaikan formulir pendaftaran WooCommerce dengan dan tanpa plugin.

Pendaftaran online adalah salah satu bagian terpenting dari toko online Anda. Ini adalah prosedur standar untuk membiarkan pelanggan Anda membuat akun baru untuk membeli dari toko Anda. Untuk menghindari drop-off, Anda harus memastikan bahwa formulir pendaftaran Anda disesuaikan dengan toko Anda dan hanya memiliki bidang yang diperlukan.

Mengapa Menyesuaikan Formulir Pendaftaran WooCommerce Default?

Ketika pelanggan mendaftarkan akun baru di toko online Anda, Anda menerima beberapa informasi tentang mereka seperti email, nama, alamat penagihan, dan banyak lagi. Namun, formulir pendaftaran WooCommerce default hanya meminta alamat email untuk mendaftarkan akun baru. Ini mungkin membuat proses lebih cepat bagi pelanggan, tetapi ini juga merupakan kesempatan yang sia-sia untuk mengenal pembeli Anda lebih baik.

Jika pelanggan perlu memberikan informasi tambahan, mereka perlu menambahkannya saat checkout atau dari halaman “Akun Saya”. Ini bisa menjadi prosedur yang sangat berulang dan panjang bagi pembeli Anda dan bahkan mungkin membuat mereka kehilangan minat pada toko online Anda.

Kabar baiknya adalah Anda dapat menghindari ini dengan menambahkan semua bidang yang diperlukan ke formulir pendaftaran dengan informasi yang ingin Anda dapatkan. Dengan cara ini, Anda akan mendapatkan informasi secara langsung dan pelanggan tidak perlu memperbarui detail mereka di lain waktu sehingga lebih nyaman bagi Anda dan pengguna Anda.

Sekarang mari kita lihat berbagai metode untuk mengedit formulir pendaftaran WooCommerce .

Cara Menyesuaikan Formulir Pendaftaran WooCommerce

Ada 3 cara utama untuk menyesuaikan formulir pendaftaran WooCommerce Anda:

1. Dari Dasbor WooCommerce
2. Dengan plugin
3. Secara terprogram

Mari kita lihat masing-masing metode. Sebelum Anda mulai, pastikan Anda telah mengatur WooCommerce dengan benar di toko Anda.

1. Sesuaikan Formulir Pendaftaran WooCommerce dari Dasbor WooCommerce

Secara default, Anda dapat mengedit formulir pendaftaran Anda dari dasbor WooCommerce. Buka WooCommerce > Pengaturan dan buka tab Akun dan Privasi . Di sini, Anda dapat mengubah beberapa opsi saat pelanggan membuat akun baru di toko Anda.

Misalnya, Anda dapat mengaktifkan opsi untuk secara otomatis menghasilkan nama pengguna dan kata sandi selama pembuatan akun. Opsi ini diaktifkan secara default, tetapi Anda dapat menonaktifkannya.

Ada juga beberapa opsi lain untuk memungkinkan pelanggan membuat akun di kasir atau halaman Akun Saya, memungkinkan pembeli untuk memesan tanpa akun, dan sebagainya. Cukup centang opsi yang ingin Anda aktifkan lalu simpan perubahannya .

Seperti yang Anda lihat, opsi default ini cukup terbatas untuk mengedit formulir pendaftaran WooCommerce Anda. Jika Anda ingin menambahkan lebih banyak bidang atau membuat perubahan yang lebih besar, Anda harus menggunakan metode lain.

2. Sesuaikan Formulir Pendaftaran WooCommerce menggunakan Plugin

Salah satu cara terbaik untuk menyesuaikan formulir pendaftaran WooCommerce Anda dengan mudah adalah dengan menggunakan plugin khusus. Ada beberapa alat di luar sana. Untuk tutorial ini, kami akan mendemonstrasikan cara mengedit formulir pendaftaran menggunakan plugin Pendaftaran Pengguna .

Pendaftaran Pengguna adalah plugin freemium yang memungkinkan Anda membuat formulir pendaftaran khusus Anda sendiri dan 100% responsif. Anda harus mendapatkan add-on WooCommerce yang tersedia dalam paket premium mereka.

2.1. Instal dan aktifkan Plugin dan Add-on WooCommerce

Untuk mulai menggunakan plugin, Anda perlu menginstal dan mengaktifkannya, jadi Anda harus berlangganan paket premium mereka yang terintegrasi dengan WooCommerce.

Setelah itu, di dasbor WooCommerce Anda, buka Plugin > Add New dan klik Upload Plugin.

Tekan Pilih File , pilih file zip plugin yang telah Anda unduh setelah pembelian, dan klik Instal Sekarang untuk menginstal plugin.

Setelah instalasi, aktifkan plugin. Buka Plugin > Plugin Terpasang dan klik Aktifkan di sebelah ekstensi Pendaftaran Pengguna WooCommerce .

Jika Anda tidak terbiasa dengan proses pemasangan dengan cara ini, lihat panduan kami tentang cara memasang plugin secara manual.

2.2. Buat formulir Pendaftaran WooCommerce Anda

Untuk mulai membuat formulir pendaftaran WooCommerce khusus Anda, buka Pendaftaran Pengguna > Tambah Baru .

Kami akan memanggil formulir pendaftaran baru kami " Pendaftaran WooCommerce ", tetapi Anda dapat memberikan nama apa pun yang Anda inginkan.

Secara default, formulir hanya meminta email dan kata sandi pengguna, tetapi Anda dapat menambahkan bidang lain seperti alamat penagihan dan pengiriman, negara, kode pos, nomor telepon, dan sebagainya. Cukup seret dan lepas ke formulir Anda dan setelah Anda puas dengan formulir pendaftaran WooCommerce baru Anda, klik Buat Formulir untuk menyimpannya.

2.3. Ganti Halaman Registrasi WooCommerce Default

Setelah Anda membuat formulir pendaftaran, Anda perlu mengganti formulir pendaftaran default di halaman pendaftaran. Untuk melakukan ini, buka WooCommerce > Pengaturan dan buka tab Akun dan Privasi .

Pilih opsi untuk mengizinkan pelanggan membuat akun di halaman “Akun Saya” .

Lalu, masuk ke User Registration > Settings, buka tab WooCommerce dan pilih form registrasi yang baru saja kamu buat pada opsi Select Registration Form .

Setelah itu, beberapa bidang akan muncul dan Anda perlu mencentang opsi untuk mengganti halaman login dan registrasi default WooCommerce . Untuk menyelesaikan proses, simpan perubahan .

Sekarang saatnya untuk melihat formulir pendaftaran baru Anda di bagian depan. Buka halaman pendaftaran dan pratinjau untuk melihat formulir pendaftaran WooCommerce Anda yang baru disesuaikan .

3. Sesuaikan Formulir Pendaftaran WooCommerce Secara Terprogram

Jika Anda tidak ingin menggunakan plugin premium dan memiliki keterampilan pemrograman, metode ini cocok untuk Anda. Anda dapat mengedit formulir pendaftaran WooCommerce dengan hampir semua cara menggunakan cuplikan kode.

Sebelum Anda melangkah lebih jauh, kami sarankan Anda membuat cadangan situs WordPress Anda dan membuat tema anak. Anda akan mengubah file tema dengan cuplikan ini dan jika terjadi kesalahan, mereka dapat merusak situs Anda, jadi selalu lebih baik untuk bersiap.

Setelah Anda mencadangkan situs Anda dan memasang tema anak, Anda dapat mulai mengedit formulir pendaftaran Anda. Di bagian ini, kami akan menunjukkan kepada Anda berbagai contoh hal yang dapat Anda lakukan. Anda harus menempatkan snippet di file functions.php dari tema anak Anda. Untuk melakukannya, di dasbor WordPress Anda, buka Appearance > Theme Editor dan buka file functions.php .

Sebelum memulai, pastikan Anda telah mencentang opsi untuk mengizinkan pelanggan membuat akun di halaman “Akun Saya” . Untuk melakukannya, ikuti petunjuk yang dijelaskan di langkah 2.3 jika Anda belum mencentang opsi tersebut.

Sekarang mari kita lihat beberapa contoh untuk menyesuaikan formulir pendaftaran WooCommerce secara terprogram.

Tampilkan Nomor Rekening Penagihan di Formulir Pendaftaran

Jika Anda ingin menambahkan nomor akun penagihan sebagai bidang wajib ke formulir pendaftaran WooCommerce Anda, Anda dapat menggunakan cuplikan kode berikut:

 // Menampilkan kolom di Registrasi / Edit akun 
add_action( 'woocommerce_register_form_start', 'ql_display_account_registration_field' ); 
add_action( 'woocommerce_edit_account_form_start', 'ql_display_account_registration_field' ); 
fungsi ql_display_account_registration_field() { 
$pengguna = wp_get_current_user(); 
$nilai = isset($_POST['billing_account_number']) ? esc_attr($_POST['billing_account_number']) : $user->billing_account_number; 
?> 
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="reg_billing_account_number"><?php _e( 'Kirim ke/ Nomor akun', 'woocommerce' ); ?> <span class="required"*</span></label>
 <input type="text" maxlength="6" class="input-text" name="billing_account_number" value="<?php echo $value ?>" />
 </p> 
<div class="clear"></div> 
<?php 
}

// pendaftaran Validasi bidang 
add_filter( 'woocommerce_registration_errors', 'ql_account_registration_field_validation', 10, 3 ); 
function ql_account_registration_field_validation( $errors, $username, $email ) { 
if ( isset( $_POST['billing_account_number'] ) && kosong( $_POST['billing_account_number'] ) ) { 
$errors->add( 'billing_account_number_error', __( '<strong>Error</strong>: nomor akun diperlukan!', 'woocommerce' ) ); } 
kembalikan $kesalahan; 
}

// Simpan nilai kolom pendaftaran 
add_action( 'woocommerce_created_customer', 'ql_save_account_registration_field' ); 
fungsi ql_save_account_registration_field( $customer_id ) { 
if ( isset( $_POST['billing_account_number'] ) ) { 
update_user_meta( $customer_id, 'billing_account_number', sanitize_text_field( $_POST['billing_account_number'] ) ); 
}
}

// Simpan nilai Field di Edit akun 
add_action( 'woocommerce_save_account_details', 'ql_save_my_account_billing_account_number', 10, 1 );
fungsi ql_save_my_account_billing_account_number( $user_id ) { 
if( isset( $_POST['billing_account_number'] ) ){ 
update_user_meta( $user_id, 'billing_account_number', sanitize_text_field( $_POST['billing_account_number'] ) ); 
}
}

// Tampilkan bidang di bagian bidang penagihan pengguna admin 
add_filter( 'woocommerce_customer_meta_fields', 'ql_admin_user_custom_billing_field', 10, 1 ); 
fungsi ql_admin_user_custom_billing_field( 
$args ) { $args['billing']['fields']['billing_account_number'] = array( 
'label' => __( 'Kirim ke/ Nomor rekening', 'woocommerce' ), 
'deskripsi' => '', 
'custom_attributes' => array('maxlength' => 6), 
); 
kembali $args;
}

Ini akan menunjukkan nomor akun penagihan di bagian edit akun di halaman Akun Saya serta halaman edit Pengguna Admin di bagian bidang penagihan.

Anda dapat mengambil cuplikan ini sebagai dasar dan menyesuaikannya untuk toko Anda. Anda juga dapat menambahkan beberapa bidang formulir pendaftaran WooCommerce lainnya ke bagian penagihan seperti:

• billing_first_name
• billing_last_name
• penagihan_perusahaan
• billing_address_1
• billing_address_2
• billing_city
• billing_postcode
• negara_penagihan
• billing_state
• billing_email
• tagihan telepon

Tampilkan Formulir Pendaftaran WooCommerce Kustom saat Checkout

Anda juga dapat menambahkan formulir pendaftaran WooCommerce ke halaman checkout. Ini bisa sangat nyaman bagi pelanggan Anda karena memungkinkan mereka untuk dengan mudah menelusuri toko Anda sebagai tamu dan membuat akun hanya jika mereka ingin membeli sesuatu.

Anda dapat dengan mudah melakukannya dengan menggunakan plugin Pendaftaran Pengguna . Anda akan memerlukan salah satu paket premium, jadi lihat langkah 2.1 jika Anda belum melakukannya. Selain itu, Anda perlu membuat formulir pendaftaran WooCommerce dan menggantinya dengan formulir default .

Setelah itu, buka WooCommerce > Pengaturan dan buka tab Akun dan Privasi . Kemudian, centang opsi untuk mengizinkan pelanggan membuat akun saat checkout dan menyimpan perubahan .

Setelah itu, buka Pendaftaran Pengguna > Pengaturan dan buka tab WooCommerce . Centang opsi untuk menyinkronkan pendaftaran checkout dan menyimpan perubahan.

Ini akan memungkinkan pelanggan Anda menyinkronkan pendaftaran pengguna dengan pendaftaran checkout WooCommerce . Setelah itu, periksa semua label bidang di tabel dan simpan perubahannya .

Itu dia! Sekarang pelanggan Anda akan dapat mendaftarkan akun baru saat checkout di situs web Anda.

Bonus: Edit Alamat Email Pendaftaran WooCommerce

Alamat email sangat penting untuk pendaftaran. Sebagai toko eCommerce, Anda ingin memiliki alamat email pelanggan Anda untuk dapat menghubungi mereka di masa mendatang dengan informasi tentang pesanan mereka, mengirimi mereka penawaran, penawaran eksklusif, dan sebagainya.

Itu sebabnya mempelajari cara mengedit email pendaftaran WooCommerce sangat berguna. Cara terbaik untuk melakukannya adalah dengan menyesuaikan template email. Dan bagian terbaiknya adalah Anda dapat melakukan ini dari dasbor WooCommerce.

Cukup buka WooCommerce > Pengaturan dan buka tab Email . Di sini, Anda dapat mengubah template email dengan bantuan opsi pengirim email dan template email.

Opsi pengirim email memungkinkan Anda untuk mengedit nama dan alamat "Dari". Ini berarti Anda dapat menyesuaikan bagaimana nama pengirim dan alamat email akan muncul di email WooCommerce.

Demikian pula, Anda dapat mengedit gambar header template email , teks footer, warna dasar, warna latar belakang, latar belakang badan, dan warna teks.

Buat semua perubahan yang Anda inginkan untuk email WooCommerce Anda dan lihat perubahannya secara real-time dengan mengklik tautan “ Klik di sini untuk melihat pratinjau template email Anda ”.

Setelah Anda puas dengan template baru Anda, ingatlah untuk menyimpan perubahan .

Ada cara lain untuk mengedit template email yang memungkinkan Anda menyesuaikan banyak hal lainnya. Untuk informasi lebih lanjut, lihat panduan kami tentang cara mengedit template email WooCommerce.

Kesimpulan

Secara keseluruhan, formulir pendaftaran sangat penting karena memungkinkan Anda mengumpulkan informasi yang relevan tentang pelanggan Anda. Formulir pendaftaran default tidak selalu memberi Anda semua informasi yang Anda inginkan, jadi menyesuaikannya bisa menjadi metode yang sangat efektif untuk mengumpulkan semua detail yang Anda butuhkan.

Dalam panduan ini, kami telah menjelajahi 3 metode berbeda untuk menyesuaikan formulir pendaftaran WooCommerce :

• Dari dasbor WC
• Menggunakan plugin khusus
• Secara terprogram

Jika Anda ingin membuat beberapa perubahan di sana-sini, opsi default dari dasbor WooCommerce dapat berguna. Namun, opsi yang ditawarkan cukup terbatas, jadi jika Anda ingin menyesuaikan lebih banyak hal, kami sarankan Anda menggunakan plugin. Di sisi lain, jika Anda tidak ingin menginstal alat pihak ketiga dan memiliki keterampilan pengkodean, Anda dapat mengedit formulir pendaftaran secara terprogram menggunakan cuplikan kode.

Untuk informasi lebih lanjut tentang cara menyesuaikan toko Anda, lihat panduan berikut:

• Cara menyesuaikan halaman Akun Saya WooCommerce
• Edit halaman Produk WooCommerce
• Cara menyesuaikan halaman kategori di WooCommerce
• Cara mengedit Halaman Toko WooCommerce