Cara Menyesuaikan Formulir Masuk dan Pendaftaran WooCommerce

Di luar kotak, WooCommerce menawarkan opsi penyesuaian terbatas untuk login dan formulir pendaftaran. Hal ini mempersulit pemilik toko untuk memberikan pengalaman pengguna yang baik kepada pelanggan.

Selain itu, Anda terbatas pada bidang checkout default yang berarti Anda tidak dapat mengumpulkan informasi tambahan dari pelanggan selama checkout. Ini tidak ideal untuk toko yang ingin memberi pelanggan opsi untuk memilih tanggal pemesanan, memasukkan beberapa alamat email, atau menawarkan opsi pembungkusan kado.

Salah satu cara untuk mengatasinya adalah dengan menggunakan plugin yang kuat seperti ProfilePress yang memungkinkan Anda mengelola semuanya di satu tempat. Pada artikel ini, kita akan membahas bagaimana Anda dapat menyesuaikan login dan formulir pendaftaran WooCommerce menggunakan ProfilePress.

Mengapa menyesuaikan Formulir Login dan Pendaftaran WooCommerce?

Menyesuaikan login dan formulir pendaftaran WooCommerce dapat membantu membuat situs web Anda lebih ramah pengguna dan meningkatkan konversi.

Pemilik toko mungkin perlu menyesuaikan login dan formulir pendaftaran WooCommerce default untuk menawarkan pengalaman yang dipersonalisasi kepada pelanggan. Dengan membuat formulir masuk dan pendaftaran eksklusif, Anda dapat meningkatkan pengalaman pelanggan di situs Anda dan memaksimalkan pendaftaran.

Anda juga dapat menambahkan bidang khusus ke halaman checkout situs WooCommerce Anda sebagai cara untuk mengumpulkan informasi tambahan dari pelanggan sebelum mereka checkout. Misalnya, Anda dapat membiarkan pelanggan menambahkan akun media sosial mereka, nama pengguna mereka, atau menampilkan informasi tambahan tentang produk di keranjang belanja mereka. Ini membantu Anda menawarkan pengalaman berbelanja yang lebih personal kepada pelanggan Anda.

Mengganti halaman "Akun Saya" default di WooCommerce dengan halaman khusus adalah cara yang bagus untuk membuat toko Anda menonjol. Anda dapat membiarkan pelanggan dengan mudah masuk ke akun mereka dan mengelola detail mereka dari tempat terpusat. Misalnya, mereka dapat masuk, mendaftar, dan mempersonalisasi akun pengguna mereka dengan mengunggah gambar profil, mengedit nama panggilan, atau menambahkan biografi.

Menyesuaikan login dan formulir pendaftaran WooCommerce dapat membantu Anda menawarkan pengalaman pengguna yang lebih baik di toko online Anda.

Menyesuaikan login dan formulir pendaftaran WooCommerce

Menggunakan ProfilePress, mudah untuk menyesuaikan login dan formulir pendaftaran WooCommerce dan membuatnya terlihat persis seperti yang Anda inginkan.

ProfilePress menawarkan solusi lengkap untuk membuat situs WordPress yang menarik dan menawarkan alat ekstensif yang membantu Anda mengontrol siapa yang memiliki akses ke konten Anda. Anda dapat membuat profil pengguna yang intuitif bersama dengan formulir pendaftaran dan login yang menarik menggunakan pembuat drag-and-drop.

Untuk ini, kita memerlukan situs WordPress yang berfungsi dengan plugin WooCommerce terpasang. Kami juga memerlukan plugin ProfilePress untuk membuat formulir login dan pendaftaran khusus.

Langkah #1: Instal dan aktifkan ProfilePress

Mulailah dengan mendapatkan plugin ProfilePress dan menginstalnya di situs WordPress Anda. Arahkan ke Plugins → Add New menggunakan panel admin WordPress dan klik tombol Add New . Unggah file zip dan instal plugin di situs WordPress Anda.

Langkah #2: Sesuaikan login dan formulir pendaftaran

Hal pertama yang perlu kita lakukan adalah mulai membuat form login kustom kita menggunakan ProfilePress. Untuk melakukan ini, navigasikan ke ProfilePress → Forms & Profiles dan klik tombol Add new di bawah bagian Login . Klik pada Drag & Drop Builder dan pilih template. Untuk tujuan demonstrasi ini, kami telah memilih template Bash .

Setelah Anda memilih template, Anda akan secara otomatis diarahkan ke halaman Edit Form . Anda dapat menambahkan dan melepaskan Bidang dalam urutan yang Anda inginkan dan juga mengedit Label Bidang .

Anda juga dapat mengedit Pengaturan Formulir dan menyesuaikan tampilan dan label tombol pada formulir masuk. Setelah selesai, klik tombol Simpan Perubahan untuk melanjutkan. Sekarang kita perlu membuat halaman WordPress baru dan menambahkan formulir login khusus ke halaman itu dengan menggunakan kode pendek khusus.

Navigasikan ke Halaman → Tambah Baru untuk membuat halaman baru dan menambahkan kode pendek formulir masuk ke halaman. Klik tombol Terbitkan untuk melanjutkan.

Sekarang, kita akan membuat formulir pendaftaran dan menambahkannya ke halaman WordPress baru. Untuk melakukan ini, navigasikan ke ProfilePress → Forms & Profiles dan klik tombol Add new di bawah bagian Registration .

Beri judul formulir pendaftaran Anda dan pilih template untuk mulai menyesuaikannya. Kami telah memilih template Tulip . Anda akan secara otomatis diarahkan ke halaman Edit Formulir .

Di sini, Anda dapat menambah atau menghapus bidang dari formulir pendaftaran Anda dan mengubah tampilannya di front-end. Setelah Anda selesai menyesuaikan formulir pendaftaran, klik tombol Simpan Perubahan untuk melanjutkan.

Untuk membuat halaman pendaftaran WordPress baru, buka Halaman → Tambah Baru dan tempel kode pendek formulir pendaftaran. Klik tombol Terbitkan untuk melanjutkan.

Langkah #3: Tampilkan formulir login dan registrasi di front-end

Buka ProfilePress → Settings dan klik pada tab General . Tambahkan halaman login dan pendaftaran khusus yang baru dibuat ke toko Anda menggunakan menu tarik-turun dan klik tombol Simpan Perubahan untuk melanjutkan.

Ini akan menggantikan halaman login WordPress default dan semua link login dan registrasi dari WooCommerce dengan yang ProfilePress . Berikut tampilannya di bagian depan situs Anda.

Langkah #3.5: Mengganti login dan formulir pendaftaran WooCommerce

Untuk mengganti formulir pendaftaran dan masuk yang ditampilkan di halaman Akun Saya WooCommerce, buka Pengaturan >> WooCommerce dan pilih formulir masuk dan pendaftaran ProfilePress untuk menggantikannya.

Pengguna akan dapat mendaftar akun di situs WooCommerce Anda menggunakan formulir pendaftaran khusus yang menarik. Pengguna yang sudah terdaftar dapat masuk ke akun mereka menggunakan formulir masuk khusus yang kami buat sebelumnya:

Langkah #4: Tambahkan bidang khusus ke halaman checkout

Anda juga dapat menambahkan bidang khusus ke halaman checkout toko WooCommerce Anda. Untuk melakukan ini, cukup arahkan ke ProfilePress → Settings dan klik pada tab Custom Fields .

Klik tombol Tambah Baru dan atur Label Bidang untuk bidang khusus Anda. Setelah mengatur Field Key dan Field Description, Anda dapat mengatur Field Type tergantung pada apa yang Anda butuhkan.

Anda dapat membuat teks, kata sandi, email, telepon, bidang tersembunyi, nomor, tanggal, negara, unggahan file, tombol radio, kotak centang, bidang area teks dan menampilkannya di halaman checkout toko WooCommerce Anda.

Setelah Anda siap, klik tombol Simpan Perubahan untuk melanjutkan.

Selanjutnya, buka ProfilePress → Pengaturan dan klik pada tab WooCommerce . Tambahkan bidang khusus di kotak meta Bidang Pendaftaran yang Diperlukan dan klik tombol Simpan Perubahan untuk melanjutkan.

Pengguna akan dapat melihat bidang khusus pada halaman pendaftaran checkout saat check out dari toko online Anda

.

Selain itu, kami juga ingin menampilkan formulir login khusus di halaman checkout dan mengganti yang default. Untuk melakukan ini, cukup arahkan ke ProfilePress → Settings dan klik pada tab WooCommerce .

Pilih formulir masuk khusus menggunakan menu tarik-turun di sebelah Formulir Masuk Checkout dan klik tombol Simpan Perubahan untuk melanjutkan. Ini akan menggantikan formulir login default di halaman checkout situs WooCommerce Anda.

Bonus: Buat halaman "Akun Saya" WooCommerce khusus

Halaman "Akun Saya" di WooCommerce memungkinkan pengunjung situs mengakses akun pengguna mereka langsung dari front-end.

ProfilePress memungkinkan Anda membuat halaman "Akun Saya" WooCommerce sepenuhnya kustom di mana pengguna dapat dengan mudah melihat akun pengguna mereka serta mengeditnya, semuanya dari satu halaman. Untuk melakukan ini, navigasikan ke Profile Press → Forms & Profiles dan klik tombol Add New .

Beri formulir Edit Profil Anda nama baru dan pilih template untuk mulai menyesuaikan. Kami telah memilih template Pinnacle . Setelah Anda mengklik tombol Pilih template Anda , itu akan secara otomatis mengarahkan Anda ke halaman Edit Formulir .

Anda dapat menambahkan bidang dan menyesuaikan tampilan formulir Anda di frontend situs WooCommerce Anda. Setelah Anda selesai menyesuaikan formulir "Akun Saya", klik tombol Simpan Perubahan untuk melanjutkan.

Sekarang kita telah membuat formulir “Akun Saya”, kita perlu membuat halaman WordPress untuk dapat menampilkannya di situs web Anda. Buka Halaman → Tambah Baru dan rekatkan kode pendek Edit Profil . Klik tombol Terbitkan setelah Anda selesai.

Dan di bawah ini adalah preview form custom edit profile.

Atau Anda bisa melewati seluruh proses dan menggunakan shortcode ProfilePress My Account pada halaman yang dibuat di atas.

Pengguna akan dapat mengedit informasi akun mereka dan mengklik tombol Perbarui Profil untuk membuat perubahan pada akun pengguna mereka langsung dari front-end. Halaman tersebut akan berfungsi sebagai halaman Akun Saya yang baru.

Anda juga dapat mengizinkan pengguna melihat pesanan, unduhan, langganan, dan keanggotaan mereka dengan membuka ProfilePress → Pengaturan. Klik pada tab WooCommerce , dan pilih tab yang akan ditampilkan pada pengaturan Tab Akun Saya.

Kesimpulan

Menyesuaikan login dan formulir pendaftaran WooCommerce di situs web Anda adalah cara yang bagus untuk meningkatkan pengalaman pelanggan dan mendorong lebih banyak pengguna untuk mendaftar dengan Anda.

Meskipun WordPress secara default menawarkan fungsionalitas kustomisasi terbatas untuk halaman login dan registrasi, Anda dapat menggunakan plugin yang kuat, seperti ProfilePress, untuk membuat halaman kustom dan meningkatkan pengalaman pengguna yang diberikan oleh toko online Anda.

Siap untuk menyesuaikan login dan formulir pendaftaran WooCommerce di situs web Anda? Dapatkan ProfilePress hari ini!