Optimalkan Pengalaman Pengguna di Halaman My Account WooCommerce dengan Script Toggle Login & Registrasi

Secara default, WooCommerce menampilkan formulir login dan registrasi pada halaman yang sama ketika opsi “Allow customers to create an account”diaktifkan di halaman “My Account”. Namun, untuk memberikan pengalaman yang lebih bersih dan ramah pengguna, Anda mungkin ingin menyembunyikan formulir registrasi secara awal dan menampilkannya hanya ketika pengguna mengklik tautan “No account? Register here”. Pendekatan ini menjaga antarmuka tetap fokus sambil memastikan opsi registrasi tetap mudah diakses.

Berikut adalah script yang dapat Anda gunakan untuk mengimplementasikan fitur toggle login dan registrasi di WooCommerce:

PHP Script

Script CSS

Cara Kerja Script:

1. Tombol Toggle: Script ini menambahkan dua tombol toggle:

• “No account? Register here”di bagian bawah formulir login.
• “Already have an account? Log in here”di bagian bawah formulir registrasi.

1. Sembunyikan Formulir Registrasi Secara Default: Formulir registrasi akan disembunyikan saat halaman pertama kali dimuat, sehingga pengguna hanya melihat formulir login.
2. Toggle Antar Formulir: Ketika pengguna mengklik tombol “No account? Register here”, formulir login akan disembunyikan dan formulir registrasi akan ditampilkan. Begitu pula sebaliknya, ketika pengguna mengklik “Already have an account? Log in here”, formulir registrasi akan disembunyikan dan formulir login akan ditampilkan.

Keuntungan:

• Antarmuka yang Lebih Bersih: Pengguna tidak dibingungkan dengan dua formulir yang muncul sekaligus.
• Pengalaman Pengguna yang Lebih Baik: Proses login dan registrasi menjadi lebih intuitif dan mudah diakses.
• Kompatibilitas: Script ini kompatibel dengan WooCommerce versi 9 ke atas.

Dengan menggunakan script ini, Anda dapat meningkatkan pengalaman pengguna di halaman “My Account” WooCommerce Anda, sekaligus menjaga antarmuka tetap sederhana dan efektif. Coba implementasikan dan lihat perbedaannya!