Cara Membuat Tampilan Daftar Produk WooCommerce

Apakah Anda ingin membuat tampilan daftar produk WooCommerce di situs web Anda? Mereka sangat populer untuk menampilkan lebih banyak informasi tentang suatu produk kepada pelanggan Anda di halaman toko itu sendiri. Jadi, kami akan memberi Anda tutorial langkah demi langkah untuk beralih ke tampilan daftar produk dalam tutorial ini.

Namun sebelum kita melalui prosesnya, mari kita lihat apa yang mungkin Anda perlukan untuk membuat tampilan daftar produk.

Mengapa Membuat Tampilan Daftar Produk di WooCommerce?

Secara default, produk di halaman toko Anda ditampilkan dalam gaya kisi. Ya, mereka sepenuhnya bergantung pada tema aktif situs web Anda juga. Namun dalam kasus sebagian besar tema, mereka ditampilkan dengan representasi grid dengan produk satu demi satu seperti ubin.

Namun dalam tampilan daftar, produk ditampilkan dengan lebih detail. Setiap produk ditampilkan satu sama lain dalam daftar vertikal dengan informasi tambahan seperti detail pengiriman, deskripsi produk, dan lainnya. Sebagai contoh , mari kita bandingkan tampilan grid dan tampilan daftar toko online Best Buy.

Tampilan kisi default produk di situs web diwakili sebagai berikut:

Namun, Anda tidak dapat langsung beralih ke tampilan daftar situs web. Tetapi jika Anda ingin melihat lebih banyak produk, produk akan ditampilkan dalam tampilan daftar dengan tata letak sebagai berikut:

Kita dapat dengan jelas melihat bahwa lebih banyak detail produk ditampilkan dalam tampilan daftar daripada di tampilan kisi. Pelanggan dapat dengan mudah melihat detail pengiriman, model produk dan nomor SKU, membandingkan dan opsi wishlist, dan sebagainya dalam tampilan daftar. Sedangkan pada tampilan grid, informasi ini tidak dapat ditambahkan karena akan membuat website terlihat padat.

Bahkan, jika Anda menjalankan toko online dengan produk grosir, katalog produk, atau sistem pemesanan restoran , tampilan daftar lebih nyaman bagi pelanggan Anda. Semua detail yang diperlukan dapat diberikan kepada pelanggan Anda dalam satu halaman. Oleh karena itu, mereka tidak perlu mengklik halaman produk individual untuk melihat informasi tambahan.

Bagaimana Cara Membuat Tampilan Daftar Produk WooCommerce?

Cara termudah untuk membuat tampilan daftar produk WooCommerce adalah dengan menggunakan plugin . Plugin WordPress membantu situs web Anda untuk meningkatkan fungsionalitas dan meningkatkan fleksibilitasnya. Demikian pula, mereka dapat digunakan untuk melihat produk dalam daftar juga.

Meskipun ada banyak plugin yang memungkinkan Anda membuat tampilan daftar produk, berikut adalah beberapa yang terbaik:

Tampilan Kotak/Daftar untuk WooCommerce

Tampilan Grid/Daftar untuk WooCommerce adalah salah satu plugin gratis terbaik untuk membuat tampilan daftar produk. Ini sangat mudah digunakan dan hanya menambahkan sakelar untuk mengaktifkan daftar atau tampilan kisi di halaman toko WooCommerce Anda.

Plugin ini juga memberi Anda berbagai opsi penyesuaian gaya produk daftar dan kisi. Ini memberi Anda opsi lanjutan untuk memodifikasi tombol pengalih kisi/daftar di mana Anda bahkan dapat mengubah posisinya. Demikian pula, produk per halaman juga dapat diubah sesuai keinginan Anda dengan bantuan plugin ini.

Fitur Utama:

• Tombol pengalih daftar dan kisi
• Kustomisasi lanjutan untuk tombol pengalih
• Pilihan produk per halaman
• Ramah kode pendek
• Kompatibilitas dengan plugin utama WooCommerce

Harga:

Tampilan Grid/Daftar untuk WooCommerce adalah plugin gratis. Ini tersedia di repositori plugin WordPress resmi.

Tabel Produk WooCommerce

Tabel Produk WooCommerce adalah plugin premium yang dapat membantu Anda membuat tampilan daftar produk. Awalnya, ini adalah salah satu plugin WooCommerce untuk mendesain tabel di situs web Anda. Tetapi dapat dengan mudah dimodifikasi untuk menampilkan produk Anda dalam tampilan daftar tabel.

Plugin ini sangat mudah diatur dan memungkinkan pengguna untuk memesan beberapa produk sekaligus. Ini juga menyediakan opsi pencarian dan pengurutan bawaan untuk tampilan daftar. Ini bisa menjadi fitur yang sangat nyaman bagi pengguna Anda karena mereka dapat menemukan produk yang diinginkan dengan sangat mudah.

Fitur Utama:

• Opsi tampilan daftar tabel untuk produk
• Pencarian produk instan dan opsi pengurutan
• Pemesanan satu halaman cepat
• Antarmuka yang mudah digunakan
• Tombol "Tambahkan ke Keranjang" cepat

Harga:

Tabel Produk WooCommerce adalah plugin premium yang dimulai dari 499 USD per tahun. Ini mencakup 20 lisensi situs dengan jaminan uang kembali 30 hari dan dukungan prioritas.

Sekarang setelah kita melihat beberapa plugin, mari kita lihat cara menggunakannya juga. Namun sebelum kita mulai, pastikan Anda telah menyiapkan WooCommerce dengan benar tanpa melewatkan langkah apa pun dan menggunakan salah satu tema WooCommerce yang kompatibel.

Buat Tampilan Daftar Produk WooCommerce menggunakan Plugin

Untuk membuat tampilan daftar produk WooCommerce, kami akan menggunakan Tampilan Grid/Daftar untuk WooCommerce dalam demonstrasi ini. Ini gratis, sangat mudah digunakan, dan solusi langsung untuk membuat tampilan daftar produk.

Tetapi untuk mulai menggunakan plugin apa pun, Anda harus menginstal dan mengaktifkannya terlebih dahulu.

1. Instal dan Aktifkan plugin

Untuk menginstal plugin, buka Plugins > Add New dari dashboard WordPress Anda. Kemudian, cari kata kunci untuk plugin dan klik Instal Sekarang setelah Anda menemukannya.

Instalasi akan selesai setelah beberapa saat. Terakhir Aktifkan plugin setelah diinstal.

Jika Anda ingin menggunakan plugin premium, Anda harus mengunggah dan menginstalnya secara manual. Silakan lihat panduan terperinci kami untuk menginstal plugin WordPress secara manual untuk informasi lebih lanjut.

2. Konfigurasikan Pengaturan Plugin

Setelah Anda mengaktifkan plugin, Anda dapat mengonfigurasi pengaturannya untuk membuat tampilan daftar produk WooCommerce. Buka BeRocket > Grid/List View dari dashboard WordPress Anda. Anda akan dapat melihat semua opsi penyesuaian untuk tampilan daftar produk Anda di sini.

Tiga penyesuaian utama termasuk tombol, jumlah produk, dan CSS Kustom.

2.1. Opsi Tombol

Plugin ini memberi Anda banyak penyesuaian untuk tombol Anda untuk beralih kisi atau tampilan daftar untuk produk.

Opsi umum mencakup gaya tombol default untuk tampilan desktop dan seluler di situs web Anda. Anda juga dapat menambahkan gaya tombol tetap untuk halaman. Demikian pula, Anda juga dapat menyesuaikan posisi tombol untuk ditampilkan di halaman Anda dari kiri, kanan, di atas menu atau pagination, atau tepat di bawah menu.

Bersamaan dengan opsi ini, Anda juga dapat mengedit lebar seluler maksimum, kelas khusus, dan bantalan untuk tombol.

Selain itu, ada beberapa preset tombol dan gaya yang tersedia dengan plugin. Anda dapat memilih tombol yang ada dan mengeditnya lebih banyak dengan opsi preset terperinci. Selain itu, Anda juga dapat mengubah gaya tombol dengan lebar tombol, tinggi, ukuran teks, tinggi garis, dan lainnya.

Selain itu, Anda juga dapat menyesuaikan tombol normal, tombol mouse di atas, dan gaya tombol yang dipilih. Masing-masing menyertakan penyesuaian untuk warna latar belakang, lebar dan warna batas, dan opsi bayangan.

Buat semua modifikasi yang Anda perlukan dan klik Simpan Perubahan .

2.2. Opsi Jumlah Produk

Anda juga dapat menyesuaikan opsi jumlah produk menggunakan plugin Grid/List View untuk WooCommerce saat Anda membuat tampilan daftar produk. Pertama, Anda dapat mengaktifkan atau menonaktifkan untuk menggunakan jumlah produk.

Jika Anda mengaktifkannya, Anda dapat menambahkan input lebih lanjut untuk produk per halaman, nilai jumlah produk, dan nilai pemisah. Posisi jumlah produk juga dapat diatur di sini bersama dengan opsi tombolnya sendiri dan tempat untuk menampilkannya.

2.3. CSS/JavaScript Khusus

Plugin ini juga memungkinkan Anda untuk menambahkan CSS atau JavaScript khusus saat Anda membuat tampilan daftar produk WooCommerce Anda. Ada kotak skrip khusus untuk menambahkan CSS dan JavaScript khusus Anda. JavaScript dapat ditambahkan dalam berbagai keadaan seperti sebelum atau sesudah daftar atau set gaya kisi, cookie, tombol yang dipilih untuk kisi/daftar, dan sebagainya.

Anda juga dapat menonaktifkan file CSS Font Awesome dari sini atau memilih versi Font Awesome.

Setelah Anda menambahkan CSS atau JavaScript khusus yang diperlukan, jangan lupa untuk menyimpan perubahan .

Setelah Anda melihat pratinjau halaman toko Anda, Anda akan dapat melihat tombol untuk beralih antara tampilan kisi dan tampilan daftar. Jumlah produk juga ditampilkan di sini dan deskripsi produk juga disertakan dengan produk.

Dan seperti yang ditunjukkan pada demonstrasi di bawah ini, Anda dapat beralih ke tampilan daftar produk dengan mengklik tombol tampilan daftar .

Pelanggan Anda bahkan dapat beralih kembali ke tampilan kisi jika perlu. Mereka cukup mengklik tombol tampilan kisi .

Itu dia! Ini adalah bagaimana Anda dapat membuat tampilan daftar produk WooCommerce dan memungkinkan pelanggan Anda untuk beralih antara tampilan kisi dan daftar.

Bonus: Aktifkan Mode Katalog di WooCommerce

Kami telah memberi Anda salah satu cara termudah untuk membuat tampilan daftar produk WooCommerce. Mereka sangat berguna untuk memamerkan produk Anda di situs web katalog. Namun, untuk membantu Anda mengaktifkan mode katalog di WooCommerce , kami juga akan memberi Anda panduan sederhana sebagai bonus.

Untuk melakukannya, Anda harus menambahkan beberapa cuplikan kode ke file functions.php di situs web Anda yang merupakan salah satu file inti tema Anda. Jadi silakan buat tema anak untuk langkah selanjutnya dan buat cadangan situs web Anda sehingga perubahan Anda disimpan saat Anda memperbarui tema WordPress Anda. Jika Anda memerlukan bantuan, Anda juga dapat menggunakan salah satu plugin tema anak untuk WordPress untuk membuat tema anak.

Setelah Anda mengaktifkan tema anak Anda, buka Appearance > Theme File Editor dan buka file functions.php dari tema Anda. Kemudian, Anda dapat mulai menambahkan cuplikan kode di akhir editor dan Perbarui file .

File tema bergantung pada tema aktif situs web Anda. Kami telah menggunakan tema Divi di sini sehingga editor Anda mungkin terlihat sedikit berbeda.

Pertama, Anda perlu menghapus tombol tambahkan ke troli dan kemudian menyembunyikan harga produk. Oleh karena itu, Anda harus menambahkan cuplikan kode berikut di editor.

1. Hapus Tombol Tambahkan ke Keranjang

Anda dapat menggunakan skrip berikut untuk menyembunyikan tombol tambahkan ke keranjang untuk halaman toko dan halaman produk. Jadi, tempel saja ke file functions.php dari tema Anda.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Fungsi ini akan menghapus halaman tambahkan ke troli untuk halaman produk WooCommerce serta halaman toko.

Jika Anda ingin membuat produk tidak dapat dibeli , Anda juga dapat menambahkan cuplikan kode berikut.

 add_filter( 'woocommerce_is_purchasable', '__return_false');

Ini juga akan menggantikan tombol tambahkan ke troli dengan tombol "Baca Selengkapnya".

2. Sembunyikan Harga Produk

Anda dapat menyembunyikan harga produk dengan berbagai cara di WooCommerce. Mereka dapat disembunyikan untuk semua pengguna atau semua orang kecuali admin.

Jika Anda ingin menyembunyikan harga produk untuk semua pengguna , gunakan skrip berikut:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
fungsi QuadLayers_remove_price($price){
kembali ;
}

Atau, jika Anda ingin menyembunyikan harga untuk semua orang kecuali admin , gunakan cuplikan berikut:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
fungsi QuadLayers_remove_price($price){
if ( is_admin() ) mengembalikan $harga;
kembali ;
} 

Selain itu, Anda juga dapat menyembunyikan produk hanya di halaman toko jika diperlukan. Yang harus Anda lakukan adalah menempelkan cuplikan kode berikut di file functions.php

 add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
fungsi remove_woocommerce_loop_price() {
if( ! is_shop() ) kembali; // Sembunyikan harga hanya di halaman toko
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}

Kerja yang baik! Anda sekarang dapat membuat tampilan daftar produk WooCommerce dan mengaktifkan mode katalog dengan benar di situs web Anda. Jika Anda ingin metode alternatif untuk menampilkan mode katalog, kami memiliki panduan terperinci untuk mengaktifkan mode katalog di WooCommerce. Demikian pula, jika Anda memerlukan beberapa informasi lebih lanjut untuk menghapus tombol tambahkan ke keranjang, atau menyembunyikan harga di WooCommerce, kami telah membahasnya juga.

Kesimpulan

Kami berharap Anda dapat membuat daftar produk WooCommerce untuk toko online Anda sekarang. Anda dapat dengan mudah menggunakan plugin khusus untuk memungkinkan pelanggan Anda beralih ke tampilan daftar produk. Plugin bahkan memungkinkan mereka untuk beralih kembali ke tampilan grid jika perlu bersama dengan banyak opsi penyesuaian lainnya.

Kami juga telah menyediakan Anda dengan beberapa langkah dasar untuk menyesuaikan halaman toko mengaktifkan mode katalog di situs web Anda di mana Anda dapat menampilkan tampilan daftar produk juga. Jika Anda ingin membuat perubahan pada beberapa halaman WooCommerce lainnya, Anda juga dapat menyesuaikan halaman keranjang, halaman kategori, atau bahkan halaman checkout dengan plugin seperti WooCommerce Checkout Manager.

Jadi, dapatkah Anda menambahkan tampilan daftar produk di toko online Anda tanpa masalah? Apakah Anda pernah mencobanya? Beri tahu kami di komentar.

Sementara itu, berikut beberapa artikel kami yang mungkin menarik bagi Anda:

• Cara Menyesuaikan Galeri Produk WooCommerce
• Ubah Tidak Ada Produk di Pesan Keranjang
• Cara Menambahkan Gambar Produk ke Pembayaran WooCommerce