Panduan Lengkap Kode Pendek Login WooCommerce

Halaman login adalah elemen penting dari toko WooCommerce. Ini seperti pintu gerbang bagi pelanggan Anda untuk mengakses akun mereka, melacak pesanan, dan menyelesaikan pembelian. Namun bagaimana jika keseluruhan prosesnya terlalu rumit dan gagal mencapai tujuannya?

Nah, itulah mengapa Anda perlu mencoba dan menyesuaikan kode pendek login WooCommerce. Mereka membantu Anda membuat dan menyesuaikan halaman login dalam hitungan menit dan memberikan pengalaman yang ramah pengguna kepada pelanggan Anda.

Jadi, apakah Anda menginginkan formulir login sederhana, halaman login dan registrasi gabungan, atau halaman registrasi mandiri untuk kampanye bertarget, kode pendek login WooCommerce memudahkan Anda mencapainya.

Pada artikel kali ini kita akan membahas segala sesuatu yang berhubungan dengan shortcode login WooCommerce, mulai dari cara membuat halaman login menggunakan shortcode hingga menyesuaikannya untuk pengalaman pengguna yang lebih baik.

Jadi, mari kita mulai.

Jenis halaman login WooCommerce

Halaman login mungkin terlihat seperti gerbang sederhana, namun lebih dari sekadar gerbang—ini adalah kolom nama pengguna dan kata sandi!

Ada berbagai jenis halaman login tergantung pada kebutuhan bisnis Anda dan preferensi pengguna. Mari jelajahi opsinya:

1. Halaman login klasik : Ini adalah halaman login sederhana. Itu hanya mengharuskan pengguna untuk memasukkan kredensial mereka, dan boom—mereka masuk.
2. Halaman login sosial : Jenis halaman login ini memungkinkan pengguna Anda menggunakan akun media sosial favorit mereka untuk masuk.
3. Halaman login merek khusus : Jenis halaman login ini disesuaikan agar sesuai dengan identitas merek Anda. Untuk melakukan ini, Anda perlu menambahkan logo dan warna merek Anda serta menambahkan pesan selamat datang untuk mendorong pengguna agar masuk.
4. Halaman login multi-langkah : Jenis halaman login ini ideal bagi mereka yang ingin menambahkan lapisan keamanan ekstra ke halaman login mereka. Ini memecah seluruh proses menjadi langkah-langkah yang dapat dikelola, seperti memasukkan nama pengguna, kata sandi, dan kode verifikasi.
5. Halaman sistem masuk tunggal (SSO) : Terakhir, jenis halaman login ini memungkinkan pengguna menggunakan kredensial yang sama untuk beberapa aplikasi.

Ini juga beberapa jenis halaman login. Bagaimana menurut Anda, mana yang sesuai dengan toko WooCommerce Anda? Apakah ini halaman login klasik atau halaman sosial? Ya, pilihan ada di tangan Anda. Ingatlah untuk membuatnya dipersonalisasi dan ramah pengguna.

Pentingnya menyesuaikan halaman login WooCommerce

Halaman login yang membosankan dan umum bisa sangat merugikan pelanggan Anda. Menyesuaikannya akan meningkatkan tampilan halaman dan juga menambah nilai pada toko Anda .

Namun hal ini membutuhkan usaha, dan jika Anda bertanya-tanya mengapa Anda harus menginvestasikan waktu Anda dalam hal ini, berikut adalah beberapa alasan utama mengapa upaya ini sepadan.

• Area eksklusif: Buat bagian terbatas yang hanya dapat diakses oleh pengguna yang masuk.
• Peningkatan pengalaman pengguna: Meningkatkan perjalanan pengguna dengan menghilangkan kebutuhan akan detail berulang kali untuk melakukan pembelian.
• Akses yang disederhanakan: Memungkinkan pengguna untuk masuk dan mengelola informasi mereka di satu tempat.
• Peningkatan konversi: Halaman login yang ramah pengguna dan menarik secara visual membantu mengurangi rasio pentalan dan mendorong pelanggan untuk menyelesaikan pembelian mereka.
• Peningkatan keamanan: Tambahkan fitur seperti CAPTCHA atau autentikasi dua faktor untuk melindungi data pengguna.

Menyesuaikan halaman login WooCommerce Anda bukan hanya peningkatan estetika tetapi juga peningkatan yang penting .

Sekarang setelah Anda mengetahui alasannya, mari kita mulai bertindak dan melihat cara membuat dan menyesuaikan halaman login menggunakan kode pendek login WooCommerce.

Bagaimana cara membuat halaman login menggunakan kode pendek login WooCommerce?

Jadi semuanya dimulai dengan kode pendek My Account di WooCommerce. Kode pendek login WooCommerce sederhana ini – [woocommerce_my_account] memungkinkan Anda menambahkan seluruh area Akun Saya ke halaman mana pun.

Di sini pelanggan Anda dapat masuk, melihat pesanan sebelumnya, memperbarui detailnya, dan mengelola akun mereka.

Jadi, jika Anda ingin pelanggan juga dapat mendaftar dari halaman ini, pastikan pendaftaran diaktifkan di pengaturan WooCommerce.

• Pertama, buka WordPress admin dashboard Anda. Sekarang navigasikan ke Pages untuk membuat halaman baru. Jika Anda tidak ingin membuat halaman baru, klik halaman mana pun yang ada untuk mengeditnya.
• Sekarang, klik ikon + untuk menambahkan blok baru pada halaman.
• Dari opsi, cari Shortcode.
• Sebuah kotak akan muncul. Di sini Anda dapat menyalin dan menempelkan kode pendek login WooCommerce: [woocommerce_my_account]

Catatan: Kode pendek ini akan menampilkan formulir login beserta registrasi pengguna dan detail akun.

• Terakhir, klik tombol Publish atau Update untuk membuat halaman tersebut aktif di situs web Anda.

Dengan cara ini, Anda telah membuat halaman login; sekarang ikuti langkah-langkah berikut untuk mengatur halaman tersebut sebagai halaman login default Anda:

• Buka WooCommerce > Settings > Advanced .
• Di bawah My account page , pilih halaman di atas untuk opsi Akun Saya.

Terakhir, kunjungi halaman login dan pastikan semuanya berjalan lancar.

Dengan langkah-langkah ini, Anda telah membuat halaman login yang berfungsi penuh .

Jadi jika Anda ingin halaman pendaftaran, login, dan Akun terpisah, Anda perlu menyesuaikan halaman tersebut menggunakan kode pendek login WooCommerce.

Menyesuaikan halaman login WooCommerce

1. Halaman pendaftaran: Tambahkan kode pendek [sa_woocommerce_registration_form] ke halaman Daftar Anda, setelah Anda mengaktifkan cuplikan pertama di bawah. Jika pengguna sudah login, pesan akan menampilkan “Anda sudah terdaftar.”

/**
 * Kode pendek untuk Pendaftaran Pengguna WooCommerce.
 *
 * @penulis StoreApps
 */
add_shortcode( 'sa_woocommerce_registration_form', 'storeapps_custom_registration_form' );
fungsi storeapps_custom_registration_form() {
	jika ( is_user_logged_in() ) {
		kembali '
 Anda sudah terdaftar.
 ';
	}
	ob_start();
	do_action( 'woocommerce_before_customer_login_form' );
	$html = wc_get_template_html( 'akun saya/form-login.php' );
	$dom = Dokumen DOM baru();
	$dom->pengkodean = 'utf-8';
	$dom->loadHTML( utf8_decode( $html ) );
	$xpath = DOMXPath baru( $dom );
	$form = $xpath->query( '//form[berisi(@kelas,"daftar")]' );
	$bentuk = $bentuk->barang( 0 );
	echo $dom->simpanHTML( $form );
	kembalikan ob_get_clean();
}

2. Halaman login: Untuk halaman Login, gunakan shortcode [sa_woocommerce_registration_form] setelah Anda mengaktifkan cuplikan kedua. Jika pengguna sudah login, akan muncul pesan “Anda sudah login”.

/**
 * Kode pendek untuk Login Pengguna WooCommerce
 *
 * @penulis StoreApps
 */
add_shortcode( 'sa_woocommerce_login_form', 'storeapps_custom_login_form' );
fungsi storeapps_custom_login_form() {
	jika ( is_user_logged_in() ) {
		kembali '
 Anda sudah masuk.
		

 ';
	}
	ob_start();
	do_action( 'woocommerce_before_customer_login_form' );
	woocommerce_login_form( array( 'redirect' => wc_get_page_permalink( 'myaccount' ) ) );
	kembalikan ob_get_clean();
}

3. Halaman akun saya: Simpan kode pendek [woocommerce_my_account] di halaman Akun Saya untuk menampilkan semua detail akun pengguna.
4. Pengalihan setelah registrasi: Anda juga dapat menambahkan pengalihan setelah registrasi sehingga pelanggan akan diarahkan ke halaman Akun Saya setelah mereka mendaftar (formulir login sudah menangani hal ini secara default).
5. Mengalihkan pengguna yang login: Untuk mencegah kesalahan saat pengguna login mengakses halaman login atau registrasi, gunakan cuplikan di bawah ini. Ini secara otomatis akan mengarahkan mereka ke halaman Akun Saya.

/**
 * Redirect Login/Registrasi Ke Akun Saya
 *
 * @penulis StoreApps
 */
add_action( 'template_redirect', 'storeapps_redirect_to_myaccount_after_logged_in' );
fungsi storeapps_redirect_to_myaccount_after_logged_in() {
	if ( is_page() && is_user_logged_in() && ( has_shortcode( get_the_content(), 'sa_woocommerce_login_form' ) || has_shortcode( get_the_content(), 'sa_woocommerce_registration_form' ) ) ) {
		wp_safe_redirect( wc_get_page_permalink( 'akun saya' ) );
		KELUAR;
	}
}

Catatan: Agar ini berfungsi, Anda perlu menambahkan cuplikan ke bagian PHP khusus di file function.php Anda dan CSS khusus di file style.css tema utama Anda.

Plugin terbaik untuk meningkatkan login WooCommerce

Berikut adalah beberapa plugin WooCommerce terbaik yang dapat membantu Anda menyesuaikan halaman login Anda tanpa terlibat dalam kode pendek login WooCommerce :

Login Ekspres untuk WordPress

Halaman login sangat bagus untuk situs web Anda, tapi bagaimana kalau kita membuatnya lebih pintar?

Meskipun halaman login tradisional sangat membantu, bagaimana dengan menyediakan akses yang lebih cepat bagi pelanggan, klien, atau kolaborator sementara ? Di sinilah Login Ekspres untuk WordPress oleh StoreApps berperan.

Login Ekspres untuk WordPress memungkinkan pengguna Anda untuk login secara instan dengan tautan login yang aman dan otomatis. Tidak diperlukan nama pengguna atau kata sandi – hanya pengalaman pengguna yang lancar!

• Alihkan ke mana saja: Arahkan pengguna Anda langsung ke pembayaran, keranjang, atau halaman tersembunyi mana pun dengan mudah.
• Tautan yang kedaluwarsa sendiri: Tetapkan tautan masuk dengan tanggal kedaluwarsa untuk keamanan tambahan.
• Ekspor tautan massal: Membuat dan membagikan tautan masuk dengan mudah untuk kampanye email.
• Plugin yang mudah digunakan: Plugin ini mudah digunakan. Yang Anda perlukan hanyalah menginstalnya, mengaktifkannya, dan Anda siap melakukannya!

Dengan Login Ekspres untuk WordPress, jangan biarkan pengguna Anda bingung mencari nama pengguna dan kata sandi.

Ucapkan selamat tinggal pada kesulitan login dan sambut kenyamanan dan keamanan.

Coba Login Ekspres untuk WordPress sekarang

Anggota Utama

Ultimate Member adalah plugin yang kuat untuk menyederhanakan manajemen pengguna. Ini memungkinkan Anda membuat formulir pendaftaran & login khusus, profil pengguna, dan akses berbasis peran .

Ia juga menawarkan pembuat drag-and-drop yang memungkinkan Anda mendesain bentuk menakjubkan dengan mudah.

• Formulir khusus: Buat formulir login, registrasi, dan profil pengguna yang dapat disesuaikan.
• Akses berbasis peran: Tetapkan peran pengguna yang berbeda dengan izin yang disesuaikan.
• Pembuat seret dan lepas: Rancang formulir dengan mudah.
• Logika bersyarat: Menampilkan bidang formulir berdasarkan masukan pengguna.

Secara keseluruhan, ini adalah pilihan bagus untuk membangun komunitas atau situs keanggotaan yang menarik di WooCommerce.

Registrasi Pengguna

Registrasi Pengguna adalah plugin ramah pemula lainnya untuk membuat formulir login dan registrasi yang dapat disesuaikan. Ini menawarkan templat yang telah dirancang sebelumnya, logika kondisional, dan integrasi pihak ketiga untuk pengalaman pengguna yang lancar.

• Templat yang telah dirancang sebelumnya: Lakukan segalanya dengan cepat dengan desain formulir yang sudah jadi.
• Logika bersyarat: Menampilkan bidang berdasarkan masukan pengguna.
• Integrasi pihak ketiga: Terhubung secara lancar dengan alat pemasaran email dan CRM.
• Formulir multi-langkah: Bagi formulir panjang menjadi beberapa langkah untuk pengalaman pengguna yang lebih baik.

Secara keseluruhan, plugin ini ideal untuk pemilik toko WooCommerce yang menginginkan formulir yang dapat disesuaikan dan diskalakan .

RegistrasiMagic

RegistrationMagic adalah plugin lain yang dapat membantu Anda membuat formulir login dan registrasi tingkat lanjut. Ini juga mendukung integrasi pembayaran, penetapan peran pengguna, dan analisis formulir terperinci .

• Integrasi pembayaran: Terima pembayaran langsung melalui formulir pendaftaran.
• Penetapan peran pengguna: Secara otomatis menetapkan peran kepada pengguna berdasarkan pengiriman formulir.
• Analisis terperinci: Lacak kinerja dengan wawasan data mendalam.
• Kode pendek: Sematkan formulir di mana saja di situs Anda.

Secara keseluruhan, ini ideal untuk mengelola pendaftaran pengguna sekaligus memberikan fleksibilitas dan kontrol atas desain dan fungsionalitas formulir.

Kesimpulan

Menyesuaikan halaman login Anda dengan kode pendek login WooCommerce memiliki banyak manfaat, termasuk peningkatan pengalaman pengguna, peningkatan identitas merek, peningkatan keamanan, dll.

Halaman login yang dipersonalisasi menciptakan perjalanan yang lancar bagi pelanggan Anda dan membuat seluruh proses menjadi lebih mudah.

Jadi, apakah Anda menggunakan kode pendek atau plugin login WooCommerce, Anda harus mencoba menyesuaikan halaman login untuk fungsionalitas yang lebih baik dan meningkatkan kepuasan pengguna.

Selain itu, jika Anda ingin memudahkan login WooCommerce bagi pelanggan Anda, jangan lupa untuk menjelajahi Login Ekspres untuk WordPress hari ini.