Cara Menyesuaikannya (Tutorial Lengkap)

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.

Cara kerja halaman login WooCommerce

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.

Formulir login WooCommerce bawaan

Setelah masuk, mereka melihat Akun saya modul untuk melihat pesanan terbaru, unduhan, alamat, detail akun, dan lainnya.

Halaman Akun Saya WooCommerce default

Itu Detail akun tab memungkinkan pengguna menyesuaikan informasi login mereka.

Login WooCommerce default dengan detail Akun dipilih

Selain itu, Anda dapat menambahkan Keluar widget ke area yang didukung widget di situs web Anda, seperti di bilah sisi atau footer.

Menempatkan blok masuk/keluar di area widget bilah sisi

Ini menyajikan bidang yang sama bagi pengunjung situs untuk masuk dengan nama pengguna/email dan kata sandi mereka.

Formulir login WooCommerce sebagai widget, di sidebar frontend

Bagaimana Anda menyesuaikan formulir login WooCommerce default?

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.

Cara menyesuaikan login pelanggan WooCommerce

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

1. Aktifkan formulir login/pendaftaran WooCommerce

Dengan plugin aktif, Anda sekarang akan melihat tab di panel Admin WordPress bernama Masuk/Daftar Popup. Klik itu untuk melanjutkan.

Pergi ke tab Popup Login/Signup di menu Admin WordPress

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.

Mengaktifkan formulir pendaftaran baru

2. Ganti formulir halaman Akun Saya

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.

Mengaktifkan pengaturan untuk mengganti formulir login WooCommerce default

3. Kelola kolom formulir pendaftaran/login

Saat masih di bawah Umum tab, pergi ke bagian atas halaman. Klik Mengelola link di sebelah Registrasi bidang pilihan.

Mengklik tautan Kelola untuk mengontrol bidang pendaftaran

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.

Menambahkan bidang ke login WooCommerce, dan mengaturnya sebagai Aktif

4. Sesuaikan gaya halaman login/registrasi WooCommerce

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.

Mengubah pengaturan seperti untuk menampilkan ikon, memilih warna, dan lainnya

5. Periksa hasilnya di frontend

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.

Formulir baru di tab Login

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.

Formulir masuk WooCommerce sebaris dengan tab pendaftaran

6. Tambahkan formulir login/pendaftaran WooCommerce di mana saja di situs Anda

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

Menyalin kode pendek untuk 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.

Memasukkan kode pendek untuk formulir popup masuk WooCommerce

7. Lihat hasilnya di frontend

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.

Tautan masuk WooCommerce di beranda toko

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.

Tampilan formulir login WooCommerce popup

Bagaimana cara menambahkan login sosial ke WooCommerce

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

1. Aktifkan fitur login sosial

Setelah diaktifkan, Anda akan menemukan Sosialisator Super tab di menu Admin WordPress. Buka itu, lalu pilih Masuk Sosial pilihan.

Pergi ke halaman Login Sosial di plugin Super Socializer

Centang kotak untuk Aktifkan Login Sosial – itu di bawah Kontrol Utama bagian.

mencentang kotak Aktifkan Login Sosial

2. Siapkan jejaring sosial

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.

memilih jejaring sosial untuk disertakan dalam login WooCommerce

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.

Informasi tentang cara mendapatkan rahasia dan ID Aplikasi Facebook dan Twitter

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.

ID Aplikasi dan Rahasia ditampilkan di Aplikasi Facebook baru

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.

ID Aplikasi Facebook sebuah Rahasia yang disisipkan ke bidang yang tepat

Anda juga mungkin harus menambahkan tautan dari situs Anda ke aplikasi, tetapi itu tergantung pada jejaring sosial – Facebook memerlukan langkah ini.

Tautan dari situs web yang harus dimasukkan ke Facebook

3. Aktifkan login sosial untuk formulir WooCommerce

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

Mengaktifkan login sosial di berbagai tempat seperti formulir daftar dan sebelum formulir masuk.

4. Uji fungsionalitas login sosial WooCommerce Anda

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!

Tombol masuk Facebook untuk WooCommerce di frontend

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.

Cara lain untuk menyesuaikan login WooCommerce

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

5 Tips Penting untuk Mempercepat
Situs WordPress Anda

Kurangi waktu pemuatan Anda bahkan hingga 50-80%
hanya dengan mengikuti tips sederhana.

Sumber Artikel

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *