Cara Menyesuaikan Pencarian Produk WooCommerce

Apakah Anda ingin menyesuaikan pencarian produk WooCommerce dan meningkatkannya? Saat menjalankan toko WooCommerce, Anda perlu memastikan bahwa toko tersebut dioptimalkan dengan sangat baik untuk penjualan dan kinerja. Menambahkan dan menyesuaikan pencarian produk dapat banyak membantu Anda.

Tetapi sebelum kita melalui prosesnya, mari kita lihat mengapa Anda mungkin perlu menyesuaikan pencarian produk di toko WooCommerce Anda terlebih dahulu.

Mengapa Menyesuaikan Pencarian Produk di WooCommerce?

WooComemrce adalah alat yang mudah digunakan untuk memulai kursus online. Anda dapat membuat toko online dalam hitungan menit tanpa menulis satu baris kode pun. Muncul dengan setiap fungsi yang dibutuhkan toko online biasa. Tetapi beberapa fitur terbatas.

Misalnya, fitur pencarian produk WooCommerce default minimal. Jika toko Anda memiliki lebih dari 1000 produk, pelanggan akan kesulitan menemukan produk yang tepat yang mereka butuhkan melalui pencarian produk default. Hal ini dapat mempengaruhi bisnis Anda sangat buruk. Dengan memberikan hasil pencarian yang akurat, Anda dapat mengurangi rasio pengabaian keranjang dan rasio pentalan toko Anda.

Anda dapat dengan mudah memodifikasi hal-hal yang Anda inginkan saat menggunakan WordPress sebagai CMS. Dalam hal ini, dengan menyesuaikan fitur pencarian produk WooCommerce, Anda dapat memberikan pengalaman pencarian produk yang mulus di bagian depan. Jadi, pengunjung/pelanggan toko Anda akan merasa mudah menemukan produk yang tepat yang mereka butuhkan, dan dengan demikian akan meningkatkan pendapatan Anda secara keseluruhan.

Itu juga dapat meningkatkan pengalaman pengguna instalasi WooCommerce Anda.

Cara Menyesuaikan Pencarian Produk WooCommerce

Untuk menyesuaikan pencarian produk WooCommerce, kami memiliki 3 metode utama .

1. Widget pencarian default
2. Menggunakan plugin
3. Secara terprogram

Kami akan menunjukkan kepada Anda ketiga metode di bawah ini. Jadi, Anda dapat memilih salah satu pilihan Anda dari sana.

1. Tambahkan Widget Pencarian Default

Sudah diketahui bahwa WordPress memiliki banyak opsi yang dapat disesuaikan untuk ditawarkan untuk situs web Anda. Oleh karena itu, Anda bisa menggunakan widget pencarian default untuk menambahkannya ke situs web Anda.

Jika Anda perlu menambahkannya ke salah satu area widget yang tersedia, Anda cukup mengikuti langkah-langkah ini. Tetapi ada dua cara berbeda yang dapat Anda gunakan untuk menambahkan dan menyesuaikan widget pencarian produk Anda di WooCommerce.

1.1. Tambahkan Pencarian Produk dari Menu Widget

Jika Anda memeriksa Appearance > Widgets dari dashboard WordPress Anda, Anda akan melihat semua area widget yang tersedia.

Itu tergantung pada tema WordPress yang Anda gunakan. Beberapa tema WordPress hadir dengan banyak area widget, sementara yang lain membatasinya. Namun, untuk menambahkan widget pencarian, Anda harus memperluas area widget yang perlu Anda gunakan. Dalam hal ini, kita akan menggunakan area widget sidebar Kanan. Jadi, Anda perlu mengklik tombol + untuk menambahkan lebih banyak widget ke area itu.

Kemudian, tambahkan widget Pencarian Produk ke area tersebut.

Anda perlu memperbarui halaman setelah Anda memodifikasinya. Dan jika Anda memeriksa situs web dari ujung depan, Anda akan melihat widget pencarian produk di sisi kanan instalasi WordPress Anda.

1.2. Tambahkan Widget Pencarian produk dari Customizer

Anda juga dapat menambahkan widget pencarian melalui penyesuai WordPress. Pertama, buka penyesuai dari Appearance > Customize di dashboard WordPress Anda dan pilih opsi Widgets.

Pada layar berikutnya, Anda akan melihat semua area widget yang tersedia.

Buka area widget dan tambahkan widget Product Search di sana.

Di dalam tab pratinjau langsung, Anda akan melihat tampilannya. Jika Anda setuju dengan penyesuaian, perbarui halaman.

Dengan cara ini, Anda dapat menambahkan widget pencarian produk default ke instalasi WooCommerce Anda.

2. Sesuaikan Pencarian Produk WooCommerce menggunakan Plugin

Jika Anda berencana untuk menggunakan plugin WordPress, Pencarian Woo Lanjutan, dan Pencarian Produk Lanjutan Untuk WooCommerce adalah plugin yang bagus. Keduanya akan memberikan hasil yang Anda butuhkan. Untuk tutorial ini, kita akan menggunakan Advanced Woo Search .

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan Pencarian Woo Lanjutan di dalam instalasi WordPress Anda.

Setelah Anda mengaktifkan plugin, Anda akan melihat pengaturannya di sisi kiri dasbor WordPress.

Dari sana, Anda dapat mengonfigurasi opsi umum bersama dengan pengaturan untuk kinerja, formulir pencarian, dan hasil pencarian plugin.

Anda memiliki banyak cara untuk menyematkan opsi pencarian di dalam instalasi WooCommerce Anda. Misalnya, Anda mencari metode ramah pemula, kode pendek atau widget. Di sisi lain, jika Anda membutuhkan teknik yang lebih maju, silakan gunakan cuplikan PHP yang disebutkan di halaman.

Dari halaman yang sama, Anda dapat menyesuaikan ikon dan hasil pencarian Anda. Misalnya, ketika pelanggan memasukkan kata kunci pencarian, Anda dapat menentukan sumber yang lebih disukai untuk dilihat.

Demikian pula, Anda dapat menyesuaikan formulir pencarian dan hasil pencarian dari halaman yang sama. Setelah Anda selesai memodifikasi opsi, simpan pembaruan. Hal berikutnya yang perlu Anda lakukan adalah menambahkan widget pencarian ke situs. Seperti disebutkan di atas, Anda dapat memilih widget kode pendek/WordPress atau metode pengkodean untuk menyelesaikan tugas ini.

Dalam hal ini, kami akan menambahkan opsi pencarian menggunakan widget. Anda harus mencari AWS Widget .

Anda juga dapat mengonfigurasi label pencarian dari layar yang sama.

Setelah menambahkan widget, perbarui halaman. Setelah Anda selesai melakukannya, Anda perlu memeriksanya dari ujung depan. Anda akan melihat formulir pencarian di sana.

Jika Anda perlu mempelajari lebih lanjut tentang plugin pencarian produk WooCommerce terbaik, lihat artikel ini.

3. Edit Pencarian Produk di WooCommerce Secara Terprogram

Jika Anda setuju dengan mengedit kode dan memodifikasi file inti, Anda dapat menyesuaikan pencarian produk WooCommerce dengan beberapa cuplikan. Kemudian, kami akan menunjukkan kepada Anda bagaimana melakukan tugas langkah demi langkah.

Sebelum membuat perubahan pada toko WooCommerce langsung Anda, pastikan Anda telah membuat cadangan situs lengkap. Dengan cara ini, Anda dapat memastikan tidak ada yang salah jika terjadi konflik plugin/kode. Selain itu, kami tidak akan menempelkan cuplikan langsung ke file functions.php tema induk. Sebagai gantinya, Anda harus membuat tema anak atau menggunakan plugin khusus situs. Tentu saja, Anda selalu dapat menggunakan plugin tema anak untuk membuatnya.

Untuk tutorial ini, kita akan menggunakan Cuplikan Kode. Cuplikan Kode adalah plugin khusus situs WordPress gratis dan mudah digunakan yang akan membantu pengguna menambahkan kode kustom dan CSS ke instalasi WordPress. Jika Anda berencana untuk menggunakan yang sama, instal dan aktifkan Cuplikan Kode pada instalasi Anda.

Setelah Anda menginstal plugin, Anda akan melihat konfigurasinya di sisi kiri. Selanjutnya, Anda perlu menambahkan cuplikan baru ke instalasi WordPress Anda.

Selanjutnya, Anda harus menyalin kode ini:

 /**
 * Cuplikan kode ini akan menggantikan pencarian produk default dari widget pencarian.
 */add_filter( 'get_product_search_form', 'quadlayers_custom_product_search_form' );function quadlayers_custom_product_search_form( $form ) {
 ob_start();
 ?>
 <gaya>
 /*Sertakan aturan gaya Anda di sini*/
 </ gaya>
 <form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
 <div>
 <label class="screen-reader-text" for="s"><?php echo __( 'Telusuri:', 'woocommerce' ); ?></label>
 <input type="text" value="<?php echo get_search_query(); ?>" name="s" placeholder="<?php echo __( 'Formulir Pencarian Saya', 'woocommerce' ); ?>" / >
 <input type="kirim" value="<?php echo esc_attr__( 'Cari', 'woocommerce' ); ?>" />
 <input type="hidden" name="post_type" value="product" />
 </div>
 </form>
 <?php
 kembalikan ob_get_clean()
 ;}

Dan tempel di dalam cuplikan.

Sebelum menyimpannya, mari kita lihat lebih dekat kodenya. Di sini, kami menggunakan quadlayers_custom_product_search_form sebagai fungsinya. Jadi, jika Anda berencana untuk menambahkan CSS khusus langsung melalui kode PHP, gunakan bidang ini:

 <gaya>
 /*Sertakan aturan gaya Anda di sini*/
 </ gaya>

Setelah memodifikasi bagian CSS (jika Anda membutuhkannya) sesuai dengan preferensi Anda, simpan snippet.

Itu dia.

Ini adalah bagaimana Anda dapat memodifikasi pencarian produk WooCommerce secara terprogram.

Bonus: Tambahkan Filter Produk AJAX WooCommerec

Menambahkan AJAX ke instalasi WooCommerce Anda adalah ide bagus. Ini akan membantu pelanggan toko menemukan produk yang tepat yang mereka butuhkan tanpa kerumitan. Bagian ini akan menunjukkan cara mengaktifkan sistem penyaringan produk AJAX toko online Anda.

Secara default, sistem penyaringan default WooCommerce minimal. Anda harus menggunakan plugin WordPress pihak ketiga untuk membuka potensi penuh dari sistem penyaringan AJAX. Dan untuk tutorial ini, kita akan menggunakan Filter Produk AJAX Lanjutan.

Jadi, Anda perlu menginstal dan mengaktifkannya di instalasi WordPress Anda.

Setelah mengaktifkan plugin, Anda akan melihat pengaturannya di sisi kiri. Dari sana, buka opsi filter produk.

Ini adalah opsi konfigurasi global, dan Anda dapat memodifikasinya sesuai dengan preferensi Anda. Saat Anda siap untuk bergerak maju, klik opsi Filter . Dari sana, Anda dapat membuat filter produk khusus. Terakhir, klik tombol Tambahkan Filter untuk menambahkan opsi pemfilteran baru.

Pada halaman berikutnya, Anda akan melihat halaman khusus untuk menyesuaikan filter Anda.

Anda dapat menambahkan filter sebanyak yang Anda inginkan. Setelah memublikasikan filter, semuanya akan ditampilkan di bawah halaman Pengaturan plugin. Anda dapat mengelolanya dari sana.

Anda juga dapat membuat grup filter dari bagian grup.

Setelah Anda memodifikasi filter sesuai dengan kebutuhan Anda, Anda dapat menambahkan widget filter AAPF ke toko WooCommerce Anda.

Anda akan melihat aksi langsung jika Anda memeriksa situs web dari ujung depan.

Dengan cara ini, Anda dapat menambahkan filter produk WooCommerce AJAX tanpa masalah. Untuk artikel rinci, silakan periksa tautan ini.

Kesimpulan

Jadi ini adalah bagaimana Anda dapat menyesuaikan hasil pencarian produk WooCommerce. Tiga metode yang kami sarankan adalah:

• Widget pencarian WooCommerce
• Plugin
• Pengkodean

Jika Anda perlu menambahkan opsi pencarian ke area widget yang tersedia untuk membuatnya lebih mudah diakses, Anda dapat menggunakan metode pertama yang kami sebutkan di atas. Di sisi lain, jika Anda membutuhkan solusi lain yang mudah digunakan yang akan meningkatkan fitur pencarian, Anda harus mempertimbangkan untuk menggunakan plugin. Terakhir, jika Anda memerlukan metode yang lebih canggih dan dapat menangani kode, Anda harus memilih opsi ketiga.

Semua metode ini ramah pemula dan akan memberikan hasil yang diinginkan.

Kami harap Anda telah menemukan artikel ini bermanfaat dan menikmati membaca. Silakan pertimbangkan untuk membagikan posting ini dengan teman dan sesama blogger di media sosial jika Anda melakukannya. Juga, untuk artikel terkait lainnya, Anda perlu melihat arsip blog kami. Namun, berikut adalah beberapa artikel kami yang mungkin menarik bagi Anda:

• Cara Menambahkan Ulasan Produk WooCommerce
• Plugin Zoom Gambar Produk WooCommerce Terbaik
• Cara Menambahkan Blog ke WooCommerce