Halaman login WooCommerce cukup untuk banyak toko, tetapi kurang dalam kontrol desain. Dan pemilik toko mungkin ingin menyesuaikan login WooCommerce agar lebih cocok dengan merek mereka.
Setelah menginstal WooCommerce, plugin secara otomatis menghasilkan a Akun saya halaman di toko Anda – ini adalah halaman yang merender konten dengan [woocommerce_my_account] Kode pendek.
Itu Akun saya halaman adalah halaman login utama untuk pelanggan – Anda dapat mengganti namanya dan menambahkannya ke menu navigasi.
Saat pelanggan membuka halaman, mereka melihat formulir sederhana untuk mengetikkan nama pengguna dan kata sandi login.
Setelah masuk, mereka melihat Akun saya modul untuk melihat pesanan terbaru, unduhan, alamat, detail akun, dan lainnya.
Itu Detail akun tab memungkinkan pengguna menyesuaikan informasi login mereka.
Selain itu, Anda dapat menambahkan Keluar widget ke area yang didukung widget di situs web Anda, seperti di bilah sisi atau footer.
Ini menyajikan bidang yang sama bagi pengunjung situs untuk masuk dengan nama pengguna/email dan kata sandi mereka.
Jika Anda ingin menyesuaikan formulir login WooCommerce, Anda memiliki beberapa opsi:
Kami mendorong Anda untuk menjelajahi semua opsi yang tercantum di atas. Rata-rata pengguna WordPress paling baik menggunakan plugin untuk menggantikan default Akun saya halaman atau untuk menyimpan halaman itu dan membuat beberapa penyesuaian. Pembuat halaman juga berfungsi dengan baik!
Ingatlah bahwa hampir setiap pembuat halaman dan plugin memerlukan langganan premium untuk menyesuaikan login WooCommerce. Tidak ada yang salah dengan itu, tetapi untuk tutorial ini, kami akan menggunakan satu-satunya plugin gratis yang layak untuk menyesuaikan login.
Itu Masuk/Daftar Plugin Popup menawarkan cara gratis untuk menyesuaikan login pelanggan WooCommerce di frontend. Plugin ini menyediakan formulir sebaris dan formulir pop-up untuk ditambahkan ke area mana pun di situs web Anda. Itu juga bisa menggantikan Akun saya form login/registrasi secara otomatis.
Untuk memulai proses, instal dan aktifkan plugin di situs WordPress Anda.
Aktifkan formulir login/pendaftaran WooCommerceGanti formulir halaman Akun SayaKelola bidang formulir pendaftaran/loginSesuaikan gaya halaman login/registrasi WooCommercePeriksa hasilnya di frontendTambahkan formulir login/pendaftaran WooCommerce di mana saja di situs AndaLihat hasilnya di frontend
Dengan plugin aktif, Anda sekarang akan melihat tab di panel Admin WordPress bernama Masuk/Daftar Popup. Klik itu untuk melanjutkan.
Dibawah Umumpastikan Anda memeriksa tab berikut:
Aktifkan PendaftaranOtomatis Login Pengguna saat MendaftarHandle Reset Password
Ini biasanya semua diaktifkan setelah menginstal plugin Login/Signup Popup, tetapi ada baiknya untuk memeriksa ulang. Ada beberapa pengaturan lain di area ini yang mungkin ingin Anda konfigurasikan juga, seperti memilih peran pengguna setelah seseorang mendaftar, atau menambahkan halaman pengalihan login.
Gulir ke bawah ke Pengaturan WooCommerce bagian.
Aktifkan setelan ini jika belum diaktifkan:
Ganti formulir akun sayaGanti formulir masuk checkout
Ini membuat prosesnya lebih mudah bagi Anda, karena plugin secara otomatis mengganti default Akun saya halaman formulir pendaftaran/login untuk yang baru yang Anda kendalikan. Hal yang sama berlaku untuk formulir masuk checkout.
Saat masih di bawah Umum tab, pergi ke bagian atas halaman. Klik Mengelola link di sebelah Registrasi bidang pilihan.
Itu mengirim Anda ke area untuk menyesuaikan login dan formulir pendaftaran WooCommerce. Anda dapat menambahkan bidang untuk kata sandi, nama pengguna, nama, dan lainnya. Bahkan ada bidang syarat dan ketentuan yang tersedia.
Klik melalui bidang di sisi kiri. Ketika Anda mengklik masing-masing, Anda akan melihat pengaturan bidang yang unik.
Tandai bidang Aktif jika Anda ingin memasukkannya ke formulir login/pendaftaran Anda Sesuaikan bidang login WooCommerce dengan mengubah hal-hal seperti placeholder, karakter maksimum, dan pengisian otomatis dengan informasi penagihan dan pengiriman WooCommerce
Pastikan untuk mengklik Menyimpan tombol setelah Anda puas dengan bidang dan pengaturannya.
Pilih Pengaturan tab untuk membuka opsi lebih lanjut untuk menyesuaikan dgn mode dan menyesuaikan login dan pendaftaran WooCommerce.
Di halaman ini, Anda dapat:
Tampilkan ikonSesuaikan ukuran ikonUbah lebar wadahUbah ikon dan warna latar belakang ikonPilih warna batasSetel margin bawah untuk semua bidangPilih warna latar belakang untuk bidang masukan
Dan terus gulir ke bawah pada halaman, karena ada beberapa alat lain untuk menyesuaikan area login WooCommerce.
Untuk melihat hasil Anda, Anda harus keluar dari akun admin atau membuka tab Penyamaran. Kemudian, navigasikan ke Akun saya halaman untuk toko WooCommerce Anda. Anda akan melihat formulir login WooCommerce baru yang disesuaikan dengan bidang dan gaya apa pun yang Anda putuskan.
Itu Daftar tab berfungsi sebagai formulir pendaftaran Anda, dengan semua bidang yang Anda pilih. Dalam tutorial ini, misalnya, kami memilih untuk meminta pelanggan mengetikkan nama depan dan belakang, email, kata sandi, dan menerima persyaratan layanan.
Jika Anda mau, plugin ini juga memungkinkan Anda menambahkan formulir login ke bagian lain dari toko WooCommerce Anda.
Kembali ke Popup Formulir Login/Daftar > Pengaturan. Pilih Info tab. Halaman ini merinci cara menampilkan formulir login WooCommerce menggunakan beberapa metode.
Kamu bisa:
Buka versi pop-up dari formulir login/pendaftaran dari menu, menggunakan tautan, kelas, atau dengan kode pendekGunakan kode pendek untuk menampilkan versi inline atau pop-up dari formulir login
Karena kita sudah melihat versi inline dari formulir login WooCommerce, mari kita jelajahi cara menampilkan formulir pop-up.
Buka halaman, posting, atau area widget (di mana saja yang menyediakan editor konten) dan tambahkan Kode pendek memblokir. Rekatkan kode pendek formulir pop-up dari halaman sebelumnya ke blok itu. Klik Memperbarui atau Menerbitkan untuk halaman/posting.
Catatan: Jika menggunakan Editor WordPress Klasik, rekatkan kode pendek itu ke Editor Visual agar berfungsi.
Buka versi frontend situs web Anda – terutama area di mana Anda dapat melihat tempat Anda menambahkan kode pendek login ke halaman, posting, atau widget. Pastikan Anda keluar dari akun Admin Anda, sehingga Anda dapat melihat formulir.
Anda akan melihat Gabung link jika bekerja dengan formulir pop-up. Formulir sebaris hanya menampilkan seluruh formulir pada satu halaman.
Setelah mengklik tautan itu, versi pop-up dari formulir login WooCommerce akan muncul bagi pelanggan untuk masuk ke akun mereka. Mengklik Daftar tab menyajikan bidang tambahan untuk pelanggan baru untuk membuat akun. Ada juga pengaturan untuk menyesuaikan gambar pada formulir agar lebih cocok dengan merek Anda.
Cara yang lebih modern untuk menyesuaikan area login WooCommere adalah dengan menambahkan tombol login sosial. Ini meminimalkan jumlah pengetikan yang harus diselesaikan pelanggan, karena ini menarik informasi terkini mereka dari tempat-tempat seperti Facebook atau Twitter untuk membuat akun di situs Anda.
Mirip dengan menyesuaikan halaman login WooCommerce dasar, ada lusinan opsi untuk memasukkan login sosial ke situs WooCommerce Anda. Misalnya, plugin Popup Masuk/Daftar dari sebelumnya di artikel ini sebenarnya menyediakan add-on login sosial seharga $9.
Namun, untuk cara termudah dan termurah untuk menambahkan tombol sosial ke login WooCommerce Anda, instal yang gratis Plugin Super Socializer.
Aktifkan fitur login sosialSiapkan jejaring sosialAktifkan login sosial untuk formulir WooCommerceUji fungsionalitas login sosial WooCommerce Anda
Setelah diaktifkan, Anda akan menemukan Sosialisator Super tab di menu Admin WordPress. Buka itu, lalu pilih Masuk Sosial pilihan.
Centang kotak untuk Aktifkan Login Sosial – itu di bawah Kontrol Utama bagian.
Dalam Konfigurasi Dasar tab, periksa jejaring sosial yang ingin Anda sertakan dengan login sosial. Untuk masing-masing, Anda juga perlu menempelkan a Kunci/ID dan Rahasia untuk mengaktifkan fungsi login.
Sayangnya, setiap jejaring sosial memiliki caranya sendiri untuk menemukan ID, Kunci, dan Rahasianya. Untungnya, ada ikon tanda tanya merah yang dapat Anda klik untuk menjelaskan langkah-langkah menemukan masing-masing.
Misalnya, Facebook memungkinkan Anda membuat “Aplikasi” dengan cepat, yang menyediakan ID dan Rahasia Aplikasi. Tidak perlu tahu apa-apa tentang pengembangan Aplikasi Facebook – cukup buat aplikasi (dan jangan pernah menghapusnya) untuk mendapatkan ID dan Rahasia.
Untuk setiap login sosial yang Anda inginkan, tempel kembali ID/Kunci dan Rahasia di WordPress.
Pastikan untuk mengklik Menyimpan tombol di bagian bawah setelah selesai.
Anda juga mungkin harus menambahkan tautan dari situs Anda ke aplikasi, tetapi itu tergantung pada jejaring sosial – Facebook memerlukan langkah ini.
Untuk mengaktifkan tombol login sosial di WooCommerce, buka Konfigurasi Lanjut tab di plugin Super Socializer.
Ada empat kotak untuk dicentang (kecuali jika Anda tidak ingin tombol sosial muncul di formulir login tertentu):
Aktifkan sebelum Formulir Login Pelanggan WooCommerceAktifkan di Formulir Login Pelanggan WooCommerceAktifkan di Formulir Pendaftaran Pelanggan WooCommerceAktifkan di Halaman Checkout WooCommerce
Akhirnya, saatnya untuk memeriksa seperti apa tampilan login sosial di frontend. Pergi ke Akun saya halaman di WooCommerce – kami telah mengonfigurasi pengaturan untuk tombol masuk sosial yang akan ditambahkan ke halaman itu.
Sekarang Anda akan melihat setiap tombol login sosial yang Anda aktifkan sebelumnya. Untuk tutorial ini, kami hanya menyalakan Facebook, tetapi ada banyak pilihan lain. Dan ketika seseorang mengklik tombol, mereka dapat mendaftar atau masuk ke situs WooCommerce Anda dengan kredensial sosial yang mereka buat sebelumnya!
Catatan: gaya default bekerja lebih baik dengan formulir login WooCommerce biasa. Jika Anda telah menyesuaikan halaman login, Anda mungkin perlu menambahkan beberapa CSS khusus agar semuanya terlihat bagus.
Kemungkinan tidak terbatas untuk menyesuaikan halaman login dan pendaftaran WooCommerce, jadi selalu baik untuk mengingat apa yang tersedia.
Berikut adalah opsi lain untuk dipertimbangkan:
Apakah Anda masih memiliki pertanyaan tentang cara menyesuaikan halaman login WooCommerce? Beri tahu kami di komentar!
Panduan gratis
Tanda tangan email berfungsi sebagai cara ampuh bagi individu dan bisnis untuk meninggalkan kesan abadi…
Apakah kesalahan 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' menghentikan Anda mengakses situs web WordPress? Kesalahan ini hanya terlihat saat mengunjungi…
Jika Anda adalah individu yang banyak akal dan berpikiran maju yang bekerja di bidang pemasaran,…
Siap menguasai Google Analytics 4 dengan sedikit bantuan dari MonsterInsights? GA4 adalah alat analitik yang…
Apakah Anda mencari cara untuk menerjemahkan plugin WordPress ke dalam bahasa Anda? Dengan menerjemahkan plugin…
Mencari solusi untuk hack redirect WordPress? ???????? Peretasan pengalihan WordPress sayangnya merupakan kejadian umum dan…