Cara Menampilkan Kategori di Halaman Toko WooCommerce

Bagian penting dari memiliki desain toko yang bagus adalah dapat mengkategorikan produk Anda. Menampilkan apa yang Anda jual dengan cara yang benar dapat membuat perbedaan besar dalam penjualan Anda. Semakin mudah diakses produk Anda, semakin tinggi kemungkinan pelanggan Anda akan memeriksanya dan membelinya. Itulah sebabnya dalam panduan ini, kami akan menunjukkan kepada Anda berbagai cara untuk menampilkan kategori di Halaman Toko WooCommerce.

Mengapa menampilkan kategori di halaman Toko?

Jika Anda menjual banyak produk dengan berbagai kategori, Anda ingin memastikan bahwa pengunjung menemukan apa yang mereka cari dengan mudah. Itu membutuhkan pengorganisasian yang cermat. Menampilkan semua produk Anda sekaligus mungkin membuat pembeli kewalahan dan bisa menjadi cara mudah untuk kehilangan prospek. Sebagai gantinya, Anda harus mempertimbangkan untuk mengatur halaman Toko Anda dengan cara yang menguntungkan toko Anda.

Salah satu cara terbaik untuk melakukannya adalah memanfaatkan sepenuhnya tata letak Toko Anda dengan menunjukkan kategori Anda satu per satu. Dengan cara ini pelanggan Anda dapat fokus pada kategori produk yang mereka inginkan dan dapat beralih di antara semua jenis produk yang mereka minati. Ini membuat navigasi lebih mudah, sehingga mereka menemukan apa yang mereka inginkan dengan cepat yang menghasilkan lebih banyak penjualan.

Menyiapkan Kategori dan Kategori Tertentu

Misalnya, jika Anda menjual produk elektronik, Anda ingin memastikan bahwa ponsel cerdas, PC desktop, suku cadang PC, dan peralatan lainnya ditampilkan dalam kategori terpisah. Dengan cara ini, jika pelanggan tertarik dengan suku cadang komputer, mereka dapat memeriksa kategori tertentu dan menemukan apa yang mereka inginkan di sana. Demikian pula, jika mereka tidak yakin tentang kategori apa produk yang mereka butuhkan terdaftar, referensi ke produk lain dalam kategori yang sama dapat membantu mereka mengetahuinya.

Atau, Anda juga dapat menampilkan hanya kategori produk tertentu di halaman Toko Anda untuk fokus pada katalog yang lebih kecil. Promosikan hanya produk tertentu di halaman toko Anda dan bantu mereka menonjol jika Anda menjual sejumlah kecil barang berkualitas.

Organisasi halaman toko Anda sangat penting karena tata letak yang ramah pelanggan dapat berdampak besar pada penjualan Anda. Dengan mengingat hal itu, mari kita lihat beberapa metode untuk menampilkan kategori di halaman Toko WooCommerce dan bagaimana Anda dapat menyesuaikannya.

Cara Menampilkan Kategori di Halaman Toko WooCommerce

Ada berbagai cara untuk menampilkan kategori pada halaman Toko di WooCommerce:

1. Dengan Penyesuai Tema dari dasbor
2. Menggunakan kode pendek
3. Secara terprogram

Mari kita lihat lebih dekat setiap metode.

CATATAN : Untuk demo ini, kami akan menggunakan tema Storefront, sehingga opsi pada tema Anda mungkin sedikit berbeda. Namun, sebagian besar opsi akan serupa, jadi Anda seharusnya tidak mengalami masalah dalam mengikuti panduan ini.

1) Tampilkan Kategori dengan Dasbor WooCommerce

Cara termudah untuk menampilkan kategori di halaman Toko Anda adalah dengan menggunakan pengaturan WooCommerce . Untuk ini, di dasbor Anda, ke Appearance > Customize lalu klik WooCommerce > Product Catalog di sidebar Customizer.

Dari sini, Anda dapat menggunakan Tampilan Halaman Toko dan memilih untuk Tampilkan Kategori atau Tampilkan Kategori dan Produk.

Opsi pertama hanya akan menampilkan Kategori Produk Anda di halaman Toko Anda sedangkan yang kedua akan menampilkan Kategori Produk Anda serta produk Anda lainnya. Misalnya, jika Anda mengaktifkan Tampilkan Kategori di bawah Tampilan Halaman Toko, halaman Toko Anda hanya akan menampilkan kategori produk seperti yang ditunjukkan di bawah ini:

Namun, jika Anda memilih Kategori dan Produk , itu akan menampilkan Kategori Anda terlebih dahulu dan kemudian sisa katalog produk Anda:

Anda juga dapat menggunakan opsi Tampilan Kategori berlabel di bawah ini untuk menampilkan/menyembunyikan Subkategori Produk dan Produk pada halaman Kategori Produk Anda.

Setelah Anda puas dengan penyesuaian Anda, ingatlah untuk mengeklik Publikasikan untuk menyimpan perubahan.

Salah satu hal yang paling berguna tentang metode ini adalah Anda dapat melihat pratinjau perubahan Anda secara real-time, yang membuatnya mudah digunakan. Namun, itu tidak memberi Anda banyak kendali karena Anda hanya memiliki dua opsi. Jika Anda menginginkan lebih banyak fleksibilitas, lihat metode selanjutnya.

2) Tampilkan Kategori Menggunakan Kode Pendek

Jika Anda memiliki pengaturan halaman Toko khusus menggunakan pembuat Halaman atau halaman Toko yang dirancang khusus, Anda dapat mengaktifkan kode pendek WooCommerce untuk menampilkan kategori produk Anda. Ini memberi Anda kontrol lebih besar atas apa yang harus ditampilkan dan bagaimana menampilkan kategori produk Anda daripada menggunakan dasbor. Selanjutnya, Anda dapat menggunakan metode ini untuk menampilkan kategori Anda di halaman atau posting WordPress mana pun.

Untuk melakukan ini, Anda hanya perlu menambahkan kode pendek berikut ke halaman Toko Anda:

 [ product_categories ]

Ini akan menampilkan Kategori Produk Anda di halaman Toko Anda. Tapi itu tidak semua. Anda dapat menggunakan atribut tambahan untuk menyesuaikan kode pendek. Misalnya, Anda dapat mengubah urutan kategori Produk, hanya menampilkan kategori induk, menyembunyikan kategori kosong, menentukan jumlah kategori, dan banyak lagi.

Untuk mengetahui lebih lanjut tentang cara menggunakan shortcode WooCommerce, kami sarankan Anda melihat posting ini. Dan untuk informasi lebih lanjut tentang semua atribut kategori yang dapat Anda gunakan, lihat situs ini.

Jika Anda menggunakan Gutenberg, cukup buka halaman Toko, tambahkan blok kode pendek dan tempel kode pendek [ product_categories ] .

Sekarang mari kita lihat cara menggunakan kode pendek. Jika Anda ingin menampilkan kategori di halaman Toko WooCommerce, diurutkan berdasarkan ID kategori dalam urutan menaik, Anda akan menggunakan kode pendek berikut:

 [ product_categories orderby = “id” order = “ASC” ] 

Ini akan muncul di halaman Toko Anda seperti ini:

Cara Menampilkan Kategori Tertentu di Halaman Toko WooCommerce

Anda juga dapat menggunakan metode kode pendek untuk menampilkan Kategori Produk WooCommerce tertentu.

Untuk menggunakannya, Anda perlu menggunakan slug Kategori Produk Anda. Anda dapat melihat siput Kategori Anda di bawah Produk > Kategori .

Setelah Anda mengetahui slug produk spesifik Anda, Anda dapat menggunakannya di halaman Toko Anda sebagai berikut:

 [ product category category=”slug” ]

Cukup ganti teks slug dengan slug kategori Anda yang sesuai. Misalnya, jika siputnya adalah Tampilkan, kode pendeknya adalah:

Dan di frontend, Anda akan melihat sesuatu seperti ini:

Anda juga dapat menggunakan atribut yang sama yang tersedia untuk [ product categories ] untuk penyesuaian lebih lanjut.

3) Tampilkan Kategori Secara Terprogram

Cara lain untuk menambahkan kategori ke Halaman Toko WooCommerce adalah dengan menggunakan sedikit kode. Metode ini direkomendasikan untuk pengguna yang memiliki keterampilan pengkodean dan mampu mengonfigurasi file tema mereka. Selain pengetahuan tentang PHP, Anda juga disarankan untuk memiliki pemahaman dasar tentang CSS. Jika Anda tidak nyaman dengan bahasa ini, kami sarankan Anda mengikuti metode di atas.

Karena kami akan mengedit beberapa file inti, sebelum Anda memulai proses ini, kami sarankan Anda membuat cadangan situs Anda dan membuat tema anak jika Anda belum memilikinya. Jika Anda tidak yakin bagaimana melakukannya, lihat beberapa plugin tema anak terbaik.

Sekarang tanpa basa-basi lagi, mari kita lihat cara menampilkan kategori di halaman toko WooCommerce.

Menambahkan Fungsi untuk Menampilkan Kategori di halaman Toko

Setelah tema anak Anda diatur, buka file functions.php tema Anda dengan masuk ke Appearance > Theme Editor . Sesampai di sana, klik file functions.php di sidebar File Tema kanan.

Sekarang Anda siap untuk menempelkan skrip berikut ke editor untuk menambahkan fungsi kustom Anda.

Fungsi ini menambahkan kategori produk Anda sebelum memuat sisa produk halaman Toko Anda. Ini adalah cara yang bagus untuk menambahkan semua item Kategori Produk Anda sebelum menampilkan sisa katalog produk Anda.

 fungsi produk_subkategori( $args = array() ) {
$parentid = get_queried_object_id();

$args = array(
'induk' => $parentid
);

$terms = get_terms( 'product_cat', $args );

jika ( $syarat ) {
echo '<ul class="produk-kucing">';

foreach ( $term sebagai $term ) {
echo '<li kelas="kategori">'; 
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $istilah->nama;
gema '</a>';
gema '</h2>';
gema '</li>';
}

gema '</ul>';
}

}

add_action( 'woocommerce_before_shop_loop', 'produk_subkategori', 50 ); 

Seperti disebutkan di atas, fungsi ini akan menambahkan bagian Kategori Anda ke halaman Toko WooCommerce Anda. Namun, itu mungkin tidak terlihat seperti yang Anda inginkan dan mungkin tidak cocok dengan gaya situs Anda. Ini karena Anda masih perlu menata bagian Kategori yang baru Anda buat.

Menyiapkan Styling untuk Bagian Kategori Kustom Anda

Sekarang mari tambahkan CSS yang dapat disesuaikan ke bagian CSS tambahan dari penyesuai Tema Anda. Di dasbor WordPress Anda, buka Penampilan > Sesuaikan untuk membuka menu Penyesuai tema, lalu klik CSS Tambahan.

Kemudian, tempel cuplikan CSS berikut ke bagian CSS Tambahan dan sesuaikan agar cocok dengan gaya situs web Anda.

Seperti yang dapat Anda bayangkan, Anda akan memiliki lebih banyak pilihan jika Anda memiliki pengetahuan tentang CSS. Jika Anda tidak yakin bagaimana cara menambahkan kode, lihat panduan kami tentang cara menambahkan CSS ke WordPress.

Cuplikan berikut akan mengubah ukuran gambar dan teks di bawah gambar. Kode ini adalah contoh, jadi silakan sesuaikan dan berikan gaya yang tepat untuk situs Anda guna menyiapkan bagian kategori.

 ul.produk-kucing {
margin-kiri: 0;
}

ul.produk-kucing li {
gaya daftar: tidak ada;
margin-kiri: 0;
margin-bawah: 4.236em;
perataan teks: tengah;
posisi: relatif;
}

ul.product-cats li img {
margin: 0 otomatis; 
}

@media screen dan (min-width:768px) {

ul.produk-kucing li {
lebar: 29.4117647059%;
mengapung: kiri;
margin-kanan: .8823529412%;
}

ul.product-cats li:nth-of-type(3) {
margin-kanan: 0;
}
} 

Setelah Anda selesai dengan perubahan, perbarui pengaturan Penyesuai dan halaman Toko Anda akan diperbarui dengan bagian kategori baru Anda.

Bonus: Cara Tambahan untuk Meningkatkan Halaman Toko Anda

Ada perubahan lain yang dapat Anda terapkan untuk memastikan bahwa Halaman Toko Anda seramah mungkin kepada pelanggan. Ini termasuk mengelola berapa banyak produk yang ditampilkan, menambahkan bagian dengan produk dengan Nilai Tertinggi, dan banyak lagi. Idenya adalah untuk membuat produk Anda mudah ditemukan dan memberi pelanggan Anda pengalaman berbelanja yang lebih baik. Mari kita lihat bagaimana Anda dapat menyesuaikan halaman Toko Anda untuk meningkatkan penjualan Anda.

Pertama, mari kita lihat bagaimana Anda dapat menambahkan daftar Produk Paling Populer tepat di bawah Kategori Produk Anda.

Cara Menampilkan Produk Paling Populer di Halaman Toko WooCommerce

Selain menambahkan kategori Produk Anda, Anda juga dapat menambahkan katalog produk khusus menggunakan kode pendek. Ini termasuk bagian Produk Paling Populer yang dapat Anda tampilkan menggunakan kode pendek ini:

 [ products orderby="popularity" ]

Seperti yang terlihat sebelumnya, Anda dapat menambahkan atribut kode pendek yang dapat Anda temukan di sini.

Untuk menambahkan bagian Produk Paling Populer ke halaman Toko Anda, Anda cukup menambahkan kode pendek berikut. Dalam hal ini, kami menambahkan beberapa atribut untuk menampilkan produk dalam dua kolom.

 [ products orderby="popularity" class="m-popular" columns="2" limit="2" ] 

Selain itu, Anda dapat menambahkan beberapa bagian seperti produk On Sale, Best Selling, produk Top Rated dan lainnya menggunakan shortcode:

• [ best_selling_products ]
• [ top_rated_products ]
• [ recent_products ]

Bagian terbaiknya adalah Anda dapat menggunakan kode pendek ini di berbagai bagian halaman Toko Anda dan menyesuaikannya dengan menambahkan atribut. Dengan cara ini, Anda dapat mengontrol aliran Halaman Toko Anda dan meningkatkan penjualan Anda.

Ini hanya beberapa contoh tetapi masih banyak lagi yang dapat Anda lakukan untuk memaksimalkan halaman toko Anda. Untuk mempelajari lebih lanjut, lihat panduan lengkap kami tentang cara menyesuaikan halaman Toko WooCommerce .

Kesimpulan

Singkatnya, cara Anda menampilkan produk di halaman toko dapat berdampak besar pada penjualan Anda. Itulah mengapa menampilkan kategori dan mengatur produk Anda dengan cerdas adalah suatu keharusan bagi setiap pemilik toko.

Dalam tutorial ini, kami telah menunjukkan kepada Anda berbagai cara untuk menampilkan kategori di Halaman Toko WooCommerce:

• Dengan Pengaturan WooCommerce di bawah Penyesuai Tema
• Menggunakan kode pendek
• Dengan fungsi khusus dan sedikit CSS untuk menyesuaikannya

Jika Anda menginginkan solusi yang mudah, Anda dapat menggunakan opsi dari dasbor WordPress. Namun, metode itu tidak menyediakan banyak opsi penyesuaian. Opsi lainnya adalah menggunakan kode pendek yang dapat Anda sesuaikan. Namun, jika Anda menginginkan lebih banyak fleksibilitas dan memiliki keterampilan pengkodean, Anda dapat menampilkan kategori produk secara terprogram. Ingatlah bahwa untuk itu, Anda memerlukan pengetahuan tentang PHP dan CSS.

Selain itu, jika Anda sedang mencari cara untuk menyesuaikan Halaman Toko Anda menggunakan template daripada memulai dari awal, Anda dapat memilih untuk melakukannya juga. Namun, untuk ini, Anda harus mengonfigurasi file template dan memodifikasi file Tema. Kami memiliki panduan lengkap untuk menyesuaikan halaman Toko secara terprogram serta mengonfigurasi template WooCommerce Anda di sini:

• Cara Mengedit Halaman Toko WooCommerce Secara Terprogram
• Cara Menyesuaikan File Template WooCommerce

Sudahkah Anda menyesuaikan halaman toko Anda dan menampilkan kategori produk? Metode mana yang Anda gunakan? Beri tahu kami di bagian komentar di bawah!

Terakhir, jika Anda mencari cara lain untuk meningkatkan halaman toko Anda, lihat artikel berikut:

• Edit Halaman Toko WooCommerce Secara Terprogram (CSS dan PHP)
• Cara Menyesuaikan Halaman Toko WooCommerce di Elementor
• Bagaimana cara memperbaiki Halaman Toko WooCommerce Kosong