Cara Menambahkan Filter Produk AJAX WooCommerce

Apakah Anda ingin membuat filter produk AJAX untuk situs Anda? Anda telah datang ke tempat yang tepat. Pada artikel ini, kami akan menunjukkan cara menambahkan filter produk WooCommerce untuk meningkatkan pengalaman berbelanja di toko Anda .

Sebelum kita melihat proses pembuatan dan penambahan filter produk, mari kita lebih memahami apa itu filter produk AJAX dan mengapa Anda membutuhkannya.

Apa itu Filter Produk AJAX?

Filter produk membantu pengguna menemukan produk yang diinginkan dengan cepat dengan menetapkan persyaratan dan menyaring semua hasil yang tidak diinginkan. Misalnya, jika pelanggan menginginkan T-shirt biru, mereka akan memilih T-shirt sebagai jenis produk dan filter warna biru untuk membuang semua produk dan warna lainnya. Demikian pula, mungkin ada filter untuk ukuran, berat, harga, peringkat rata-rata, dan sebagainya.

Istilah AJAX mengacu pada teknik pengembangan web yang memungkinkan halaman diperbarui secara asinkron untuk sejumlah kecil data. Ini memungkinkan situs menerapkan perubahan kecil pada halaman web sambil tetap berada di halaman yang sama, artinya tidak diperlukan penyegaran. Sebaliknya, dengan teknik yang lebih lama, seluruh halaman web harus dimuat ulang setiap kali ada perubahan kecil yang memengaruhi pengalaman pengguna dan menghabiskan lebih banyak sumber daya server.

Mengapa Anda Harus Menggunakan Filter Produk?

Nah pertanyaan yang muncul disini adalah kenapa anda harus menggunakan product filter di toko anda? Sederhananya, Anda memerlukan filter produk untuk meningkatkan pengalaman berbelanja pelanggan dan membantu mereka menemukan apa yang mereka cari. Hampir setiap toko online dengan jumlah atau variasi produk yang banyak menggunakan filter produk. Amazon, eBay, dan Zara adalah contoh bagus untuk ini.

Dengan menggunakan filter, pembeli dapat dengan mudah membuang semua hasil yang tidak diinginkan dan mendapatkan pilihan hanya produk yang mereka minati. Ini menghasilkan kepuasan pelanggan yang lebih baik yang menghasilkan lebih banyak konversi dan penjualan.

Di sisi lain, tanpa filter produk AJAX, pelanggan mungkin kesulitan menemukan produk yang mereka inginkan. Belanja online harus cepat dan mudah, jadi jika prosesnya terlalu lama, pelanggan akan meninggalkan toko Anda dan pergi ke situs lain yang menawarkan pengalaman lebih baik.

Karena Anda mungkin tidak ingin kehilangan pelanggan, filter produk harus menjadi bagian penting dari strategi bisnis online Anda.

Jadi, sekarang Anda tahu pentingnya mereka, mari kita lihat bagaimana Anda dapat mengaktifkan filter produk di toko WooCommerce Anda.

Cara Menambahkan Filter Produk WooCommerce

Dalam tutorial ini, kami akan menunjukkan dua cara berbeda untuk menambahkan filter produk ke toko Anda.

1. Filter produk WooCommerce default
2. Menggunakan plugin pihak ketiga

Mari kita lihat kedua metode tersebut.

1. Filter Produk WooCommerce Default

Secara default, WooCommerce menawarkan beberapa filter produk dasar. Jika Anda memiliki toko yang relatif kecil tanpa berbagai macam produk, Anda mungkin menemukan bahwa filter default sudah cukup untuk kebutuhan Anda.

Untuk menambahkan filter ini ke toko Anda, cukup buka WP Admin Dashboard dan navigasikan ke Appearance > Widgets. Di sana Anda akan menemukan daftar semua widget yang tersedia untuk situs Anda.

Jika Anda mengaktifkan WooCommerce, Anda akan menemukan filter produk default di daftar widget. Cukup klik dan seret widget filter yang Anda inginkan ke salah satu area widget yang didukung oleh tema Anda. Dalam kasus kami, kami akan menambahkan filter produk ke bilah sisi.

Hanya itu yang perlu Anda lakukan untuk menambahkan filter produk WooCommerce default ke toko Anda.

Filter produk default

Secara default, ada tiga jenis filter produk: harga, atribut, dan peringkat rata-rata.

• Filter menurut Harga: Menambahkan penggeser yang dapat Anda gunakan untuk memfilter produk berdasarkan kisaran harga
• Filter menurut Atribut : Ini memungkinkan Anda untuk memfilter item berdasarkan atributnya seperti ukuran, berat, warna, dan lainnya. Perhatikan bahwa Anda harus menambahkan widget terpisah untuk setiap atribut
• Filter berdasarkan Peringkat Rata-Rata: Seperti namanya, Anda dapat memfilter produk berdasarkan peringkat rata-ratanya

Karena filter produk default WooCommerce sudah dikonfigurasi sebelumnya, Anda tidak perlu menyiapkannya. Seret saja ke area widget, dan hanya itu. Namun, opsi mereka cukup mendasar, sehingga mereka tidak menawarkan banyak opsi penyesuaian untuk mengedit font, bentuk, atau bilah geser.

Meskipun filter produk WooCommerce default akan melakukan pekerjaan untuk sebagian besar pengguna di luar sana, ada masalah. Setiap kali pelanggan memilih filter, seluruh halaman perlu dimuat ulang agar perubahan diterapkan. Seperti yang dapat Anda bayangkan, ini mengganggu pengguna dan memengaruhi pengalaman berbelanja mereka. Itu sebabnya Anda harus menambahkan filter produk AJAX .

Sayangnya, WooCommerce tidak mendukung filter AJAX secara default, jadi Anda harus mengandalkan plugin pihak ketiga.

2. Menggunakan Plugin Pihak Ketiga

Ada beberapa alat yang dapat Anda gunakan untuk menambahkan filter produk WooCommerce. Untuk tutorial ini, kita akan menggunakan Filter Produk AJAX Lanjutan yang dikembangkan oleh BeRocket . Ini adalah alat kaya fitur freemium yang memastikan pengalaman pengguna yang lancar.

Plugin ini berspesialisasi dalam filter produk AJAX dan menawarkan berbagai macam filter dengan gaya khusus agar sesuai dengan tampilan dan nuansa toko Anda. Ini juga memungkinkan filter individu dan grup, dan Anda dapat mengatur preferensi umum Anda yang akan berlaku untuk kedua jenis filter.

Sekarang mari kita lihat bagaimana Anda dapat menambahkan plugin ini ke toko WooCommerce Anda.

Langkah 1: Instal Plugin

Pertama, Anda perlu menginstal plugin. Untuk itu, buka Dasbor Admin WP dan arahkan ke Plugins > Add new.

Cari Filter Produk AJAX Lanjutan oleh BeRocket. Klik tombol Install untuk menginstal plugin dan kemudian mengaktifkannya .

Setelah itu, buka BeRocket > Filter Produk di mana Anda dapat mengatur preferensi filter. Ini bukan pengaturan teknis melainkan preferensi umum dan opsi penyesuaian yang dapat Anda konfigurasikan sesuka Anda. Anda dapat memilih jumlah nilai atribut, menyembunyikan nilai, dan lainnya.

Sekarang setelah Anda menginstal dan mengonfigurasi plugin, mari buat filter pertama Anda.

Langkah 2: Buat Filter Produk Baru

Untuk membuat filter produk, buka Dasbor Admin WP dan buka BeRocket > Filter.

Pada halaman pengaturan, tekan tombol Tambah Filter .

Halaman pengaturan baru akan muncul dan Anda harus mengisi semua detail untuk membuat filter. Ada beberapa bagian yang perlu Anda isi, jadi mari kita lihat satu per satu.

• Judul: Berikan judul yang bermakna pada filter Anda, sehingga mudah dipahami, misalnya ukuran, warna, peringkat, dan sebagainya
• Kondisi: Anda dapat mengatur kondisi untuk menampilkan filter pada halaman, produk, atau kategori tertentu. Anda dapat menambahkan beberapa kondisi dan bahkan menambahkan kondisi bersarang juga. Anda juga dapat menyembunyikan filter pada jenis perangkat tertentu seperti seluler, tab, atau desktop
• Jenis Widget: Di sini Anda harus memilih jenis filter yang ingin Anda buat. Ada empat jenis yang dapat dipilih: Filter, Tombol Perbarui Produk, Tombol Atur Ulang Produk, dan Area Filter yang Dipilih
• Atribut dan Nilai: Tentukan atribut untuk filter saat ini
• Gaya: Gaya dan sesuaikan filter. Anda akan mendapatkan beberapa tata letak untuk dipilih seperti kotak centang, menu tarik-turun, kotak warna, penggeser, dan banyak lagi
• Opsi yang Diperlukan: Berikan semua opsi yang tersedia di bawah filter ini. Misalnya, berikan semua warna yang tersedia untuk filter warna
• Tambahan: Bagian ini hanya berisi preferensi. Ada beberapa opsi yang dapat Anda atur sesuai kebutuhan Anda

Setelah Anda mengisi formulir, klik tombol Simpan Filter untuk membuat filter.

Kelola filter Anda

Kemudian Anda dapat menavigasi ke BeRocket > Filters untuk menemukan semua filter yang Anda buat di satu tempat. Dari halaman ini, Anda dapat mengedit, mengaktifkan, menonaktifkan, dan bahkan menghapus filter apa pun yang Anda inginkan.

Selamat! Anda sekarang telah membuat filter produk WooCommerce pertama Anda menggunakan plugin. Demikian pula, Anda dapat membuat filter sebanyak yang Anda butuhkan untuk meningkatkan pengalaman pelanggan Anda.

Tapi bukan itu! Anda telah membuat filter individual untuk saat ini, tetapi Anda dapat melangkah lebih jauh dan membuat grup filter. Dengan plugin ini, Anda dapat menggabungkan filter dengan atribut serupa ke dalam satu grup. Misalnya, ukuran, berat, dan warna dapat digabungkan untuk membuat satu grup filter yang disebut atribut Fisik . Grup filter mudah dikelola dan menjaga bilah sisi tetap teratur jika Anda memiliki terlalu banyak filter.

Sekarang mari kita lihat cara menambahkan grup filter produk di WooCommerce menggunakan Filter Produk AJAX Lanjutan.

Langkah 3: Buat Grup Filter

Di dashboard WordPress Anda, arahkan ke BeRocket > Groups dan klik tombol Add Filter Group untuk membuat grup filter.

Pada halaman pengaturan, isi formulir Tambahkan Grup Filter Baru seperti yang Anda lakukan sebelumnya untuk masing-masing filter. Yang ini sedikit berbeda, jadi mari kita lihat opsinya:

• Judul: Tidak ada rahasia di sini, cukup berikan grup filter Anda judul yang jelas dan bermakna
• Kondisi: Atur kondisi jika Anda ingin menampilkan filter pada halaman atau kategori tertentu. Anda dapat menambahkan beberapa kondisi serta kondisi bersarang. Anda juga dapat memilih untuk menyembunyikan filter dari perangkat tertentu
• Pengaturan Grup: Anda dapat memilih filter individual mana yang ingin Anda tambahkan ke grup ini. Pilih filter yang diinginkan dari menu drop-down dan tekan Add Filter untuk menambahkannya ke grup. Demikian pula, Anda dapat menambahkan filter sebanyak yang Anda inginkan

Setelah selesai, klik tombol Simpan di sudut kanan atas untuk menyimpan grup filter.

Sekarang Anda dapat menavigasi ke BeRocket > Grup dan melihat semua grup filter di satu tempat. Anda juga dapat mengelola, mengedit, atau menghapus grup dari halaman ini.

Sekarang setelah kita membuatnya, saatnya untuk menampilkan filter ini di front-end toko.

Langkah 4: Tampilkan Filter

Di Dasbor Admin WP Anda, buka Penampilan> Widget.

Temukan widget AAPF Filters Single dan AAPF Filters Group dan seret dan lepas ke area widget yang Anda inginkan. Perhatikan bahwa Anda harus menambahkan widget untuk setiap filter secara terpisah. Pilih filter yang ingin Anda tambahkan ke widget ini dan klik Simpan .

Bravo! Anda melakukannya. Filter sekarang ditampilkan di front-end toko Anda di area widget yang sesuai.

Namun, ada hal lain. ini bukan satu-satunya cara untuk menambahkan filter produk ke toko WooCommerce Anda. Jika Anda ingin menampilkan filter di beberapa area lain selain dari area widget, Anda dapat menggunakan kode pendek.

Langkah 5: Tampilkan Filter di Luar Area Widget Menggunakan Shortcode

Setiap filter memiliki kode pendek yang dapat Anda gunakan untuk menampilkannya di mana saja di situs Anda. Buka BeRocket > Filters dan Anda akan menemukan kode pendek untuk setiap filter. Cukup salin kode pendek untuk filter yang ingin Anda tampilkan.

Setelah itu, buka halaman/posting tempat Anda ingin menampilkan filter, klik ikon + di kiri atas dan cari blok kode pendek. Kemudian pilih ikon widget kode pendek untuk menambahkan area kode pendek ke halaman/posting Anda.

Sekarang rekatkan kode pendek filter yang baru saja Anda salin di area kode pendek dan tekan Perbarui/Terbitkan di sudut kanan atas untuk membuat perubahan langsung.

Itu dia! Filter sekarang akan ditampilkan di lokasi yang Anda inginkan. Anda dapat menavigasi ke front-end untuk melihat perubahannya.

Langkah 6: Identifikasi Masalah dengan Filter

Tunggu sebentar lagi! Ada fitur kecil lain yang bagus dari plugin ini yang ingin kami sebutkan. Plugin filter produk WooCommerce ini memberi Anda alat praktis untuk memberi tahu Anda tentang status filter aktif Anda. Selain itu, ini memberi tahu Anda jika ada masalah dengan filter tertentu dan alasan di baliknya, sehingga Anda dapat memperbaikinya dan membuatnya berfungsi dalam waktu singkat.

Untuk menggunakan alat status filter aktif, masuk ke Admin WP Anda dan navigasikan ke front-end tempat filter ditampilkan. Di bilah hitam atas, Anda akan melihat tab Filter Produk dengan ikon roket. Klik tab ini, dan itu akan menampilkan semua informasi yang berguna.

Semua selesai! Selamat! Anda sekarang dapat berhasil membuat, memperbarui, dan menampilkan filter produk di toko WooCommerce Anda dan juga waspada terhadap kemungkinan masalah dengan filter.

Kesimpulan

Secara keseluruhan, filter produk WooCommerce adalah suatu keharusan jika Anda memiliki banyak produk atau beragam produk. Mereka sangat nyaman bagi pelanggan karena mereka membantu mereka menemukan produk yang mereka cari lebih cepat dan meningkatkan pengalaman berbelanja mereka.

Sebagai pemilik toko, kepuasan pelanggan adalah yang paling penting dan dapat membantu Anda meningkatkan penjualan Anda. Di sisi lain, jika pembeli Anda tidak dapat dengan cepat menemukan apa yang mereka inginkan, mereka mungkin akan pergi dan tidak kembali.

Dalam tutorial ini, kita telah melihat bagaimana Anda dapat menambahkan filter produk ke toko WooCommerce Anda dan memastikan pengguna menemukan apa yang mereka inginkan.

Singkatnya, kita telah belajar:

• Apa itu filter produk AJAX?
• Manfaat filter produk WooCommerce
• Cara Menambahkan filter produk WooCommerce
  • Filter produk WC default
  • Menggunakan plugin pihak ketiga

Sudahkah Anda mencoba menambahkan filter produk ke toko Anda? Metode mana yang Anda gunakan dan bagaimana pengalaman Anda? Beri tahu kami di bagian komentar di bawah.