Cara Membuat Sidebar yang Difilter untuk Halaman Divi WooCommerce Anda

Jika Anda pernah mencoba menambahkan sidebar WooCommerce yang difilter ke halaman yang Anda buat dengan pembuat halaman, Anda mungkin memperhatikan bahwa filter tidak muncul di halaman Anda. Tidak masalah pembuat halaman mana yang Anda gunakan, filter tidak akan ditampilkan.

Alasannya adalah widget tersebut tidak kompatibel dengan pembuat halaman. Pada artikel ini, kita akan melihat cara mudah untuk membuat sidebar WooCommerce yang difilter untuk halaman yang dibuat dengan Divi Builder atau pembuat halaman lainnya.

Bilah Samping WooCommerce Standar

WooCommerce menyertakan beberapa widget yang dapat difilter.

• Filter Produk berdasarkan Atribut
• Filter Produk berdasarkan Harga
• Filter Produk berdasarkan Peringkat

Widget ini berfungsi dengan baik pada tema WordPress biasa, tetapi tidak ditampilkan pada halaman yang dibuat dengan pembuat halaman.

Tema WordPress

Widget yang dapat difilter berfungsi dengan baik di dalam halaman yang dibuat dengan tema WordPress biasa. Twenty Seventeen menampilkannya di sidebar tanpa kesulitan. Saya menggunakan data sampel WooCommerce yang mencakup warna dan harga. Produk Filter menurut Atribut dan Harga sangat menonjol.

Inilah Divi yang menampilkan halaman toko default WooCommerce tanpa menggunakan Divi Builder. Ini menunjukkan widget filter seperti tema normal lainnya.

Pembuat WordPress

Halaman yang dibuat dengan pembuat tidak menampilkan widget filter WooCommerce. Tidak ada bedanya jika sidebar ditampilkan di dalam builder atau sebagai sidebar standar. Berikut adalah beberapa contoh.

Halaman ini dibuat dengan Beaver Builder. Ini termasuk bilah sisi, tetapi filter tidak ditampilkan. Saya telah menambahkan widget teks sehingga Anda dapat melihat bilah sisi ditampilkan tanpa widget filter. Saya menerbitkan halaman untuk dilihat secara langsung, tetapi tidak ada bedanya.

Yang ini dibangun dengan Elementor. Saya menambahkan bilah sisi di atas produk. Ini menunjukkan widget teks tetapi bukan filternya. Saya juga menerbitkan halaman untuk melihat langsung tetapi tidak ada perbedaan.

Inilah Divi Builder yang menunjukkan bilah sisi yang sama. Menggunakan plugin atau tema Divi Builder memiliki hasil yang sama. Saya menerbitkan halaman untuk melihat langsung, tetapi filternya masih tidak ditampilkan.

Menampilkan Filter WooCommerce di Bilah Sisi Pembuat

Untungnya, ada cara mudah untuk menampilkan filter produk WooCommerce di bilah sisi meskipun Anda membuat halaman produk dengan pembuat halaman. Kami membutuhkan plugin yang disebut Filter Produk WooCommerce.

Themify – Filter Produk WooCommerce

Filter Produk WooCommerce adalah plugin gratis dari Themify yang bekerja secara berbeda dari widget filter produk WooCommerce standar. Buat beberapa kombinasi filter dengan mudah. Buat formulir dengan pembuat formulir seret dan lepas. Atur ke tata letak vertikal atau horizontal, pilih jumlah kolom dan gaya agar sesuai dengan situs web Anda. Ini menunjukkan hasil pencarian langsung dan mencakup banyak opsi. Ini intuitif untuk digunakan dan bekerja dengan semua pembuat tema.

Membuat Filter Produk Baru

Instal plugin dari penyimpanan WordPress. Di menu Dasbor, buka Filter Produk > Filter Produk > Tambah Baru . Anda akan mendapatkan modal dengan semua yang Anda butuhkan untuk membuat filter. Buka pengaturan untuk membuat kode pendek Anda. Daripada memiliki tiga widget filter, filter yang satu ini dapat membuat beberapa jenis filter khusus untuk membuat sejumlah widget.

Beri judul yang menjelaskan filter. Pilih dari tata letak vertikal atau horizontal, apakah akan menampilkan bidang kosong, penyortiran produk, jumlah produk, dan produk yang kehabisan stok. Pilih apakah akan menampilkan pagination atau tidak dan pilih antara standar, scroll tak terbatas, atau memuat lebih banyak.

Masukkan jumlah produk per halaman. Pilih jika Anda ingin membuat grup bidang dapat diaktifkan, untuk menggulir ke hasil, pilih antara logika AND atau OR untuk taksonomi, dan jika hasilnya ditampilkan di halaman saat ini atau halaman baru. Jika Anda memilih halaman baru, Anda akan dapat memilih halaman dari daftar. Anda juga dapat memilih apakah filter muncul di halaman baru atau tidak.

Setelah Anda membuat pilihan, Anda harus membuat formulir. Ini akan menentukan bagaimana filter akan muncul di bilah sisi. Seret setiap elemen formulir yang Anda inginkan ke bidang di bagian bawah layar pembuatan kode pendek.

Setiap elemen membuka serangkaian fitur baru. Masing-masing berbeda, tetapi sebagian besar memiliki opsi serupa. Berikut adalah tampilan Kategori.

Beri judul. Anda dapat menyembunyikan judul jika Anda mau. Pilih apakah akan menampilkan jumlah produk, hierarki kategori, dan menyertakan anak-anak atau tidak. Tampilkan filter sebagai kotak centang, tautan, tombol radio, kotak tarik-turun, atau multi-pilih. Pilih logika, atur urutan pengurutan, dan pilih tata letak dengan jumlah kolom. Mengatur warna teks. Anda juga dapat memilih kategori mana yang akan disertakan atau dikecualikan.

Jika Anda memilih warna, ikon itu akan membuka satu set pemilih warna di mana Anda dapat mengatur warna setiap kategori produk satu per satu. Mengatur warna untuk latar belakang dan teks. Anda dapat memilih warna dari pemetik atau memasukkan kode hex dalam bidang.

Anda juga dapat menarik dan melepas bidang sesuai urutan yang Anda inginkan. Setelah Anda membuat filter, pilih Simpan .

Tutup modal dan Anda akan melihat filter Anda ditambahkan ke daftar. Ini memberikan nama, kode pendek, dan daftar bidang dalam filter. Anda dapat mengedit, mengekspor, atau menghapus filter. Salin kode pendek.

Tambahkan widget teks ke bilah sisi Anda dan rekatkan di kode pendek.

Filter sekarang ditampilkan dalam halaman toko yang dibuat dengan pembuat. Inilah halaman dengan Divi Builder.

Berikut filter yang ditampilkan pada halaman yang dibuat Beaver Builder dengan tema Twenty Sixteen.

Berikut filter dengan Elementor dalam tema Twenty Seventeen. Yang ini menggunakan tata letak horizontal.

Menggunakan Themify – Filter Produk WooCommerce dengan Tata Letak Divi

Divi memiliki banyak tata letak toko untuk dipilih. Dalam contoh ini, saya telah menambahkan modul teks ke halaman Toko Toko Furnitur dan menempatkan kode pendek filter di dalam modul teks. Saya bisa saja memilih modul bilah sisi, tetapi tidak masalah dengan contoh ini.

Ini adalah tata letak vertikal. Ini sangat cocok dengan desain tata letak.

Saya mengatur tombol agar sesuai dengan gaya tata letak. Sayangnya, saya tidak dapat menyesuaikan tombol pencarian.

Berikut tata letak horizontal. Contoh ini masih menggunakan layout kolom 3/2 yang saya pilih untuk filter vertikal.

Filter terbuka saat mengarahkan kursor. Ini responsif, sehingga ditampilkan secara vertikal agar pas di dalam kolom.

Untuk yang satu ini, saya telah menempatkan filter di bawah modul toko.

Berikut filter di atas modul toko.

Baik Anda menggunakan kode pendek di dalam modul teks atau di dalam bilah sisi, Anda dapat menambahkan beberapa gaya menggunakan tab Desain modul Divi. Ini berarti Anda dapat menata teks label dengan menata teks modul. Dalam contoh ini, saya telah mengatur teks menjadi merah, memperbesar ukurannya, dan menjadikannya huruf besar semua.

Memfilter Produk WooCommerce

Untuk melakukan pencarian, pengguna mengklik tombol, mencentang kotak, dan menggeser penggeser untuk memfilter apa yang mereka cari. Mereka juga dapat memasukkan judul. Ketika mereka siap, mereka cukup mengklik tombol pencarian.

Hasil Pencarian

Hasilnya kemudian akan menampilkan cara Anda mengaturnya di pengaturan. Untuk yang ini, saya telah mengaturnya untuk menampilkannya di bagian bawah halaman. Ini secara otomatis menggulir ke hasil dan memberi pengguna fitur penyortiran.

Jika Anda mengaturnya untuk membuka di halaman baru, hasilnya akan ditempatkan di bagian bawah halaman itu. Dalam contoh ini, saya membuat halaman menggunakan header dari halaman Toko Toko Furnitur. Saya telah membuka fitur penyortiran untuk menampilkan opsi penyortiran.

Mengakhiri Pikiran

Itulah tampilan kami tentang cara membuat sidebar WooCommerce yang difilter untuk halaman yang dibuat dengan Divi Builder. Plugin ini intuitif dan menambahkan banyak fitur pemfilteran ke produk WooCommerce. Anda dapat membuat filter sebanyak yang Anda inginkan dan menempatkannya di halaman mana pun yang Anda inginkan. Anda bahkan dapat menatanya dengan fitur penataan gaya Divi. Karena ini adalah kode pendek, Anda dapat menggunakannya di dalam bilah sisi atau modul.

Saya ingin memiliki kontrol lebih besar atas bagaimana hasilnya ditampilkan. Misalnya, akan sangat membantu untuk menempatkan kode pendek di mana hasilnya akan muncul. Ini akan memungkinkan hasil untuk ditempatkan di mana saja pada halaman daripada di bagian bawah. Ini akan memungkinkan footer khusus, area hasil di dalam halaman, dll. Saya juga ingin memiliki beberapa opsi gaya lagi. Terutama, saya ingin menata tombol pencarian.

Themify – Filter Produk WooCommerce adalah pilihan tepat jika Anda menginginkan plugin gratis untuk menambahkan filter produk ke halaman Divi Builder Anda.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba plugin Themify – WooCommerce Product Filter dengan halaman toko yang dibuat dengan Divi Builder? Beri tahu kami tentang pengalaman Anda di komentar.

Gambar Unggulan melalui Max Griboedov / shutterstock.com