Cara Menampilkan Produk WooCommerce Berdasarkan Kategori

Diterbitkan: 2020-08-16

Produk Tampilan WooCommerce berdasarkan Kategori Apakah Anda menjalankan toko WooCommerce dan ingin menampilkan produk berdasarkan kategori di WordPress? Posting ini memiliki penjelasan rinci tentang cara menampilkan produk WooCommerce berdasarkan kategori. Jika Anda sudah familiar dengan WooCommerce, Anda tahu bahwa kategori produk memainkan peran penting dalam mengatur produk Anda untuk tampilan yang tepat dan akses oleh pelanggan Anda.

Tampilkan Produk WooCommerce berdasarkan Kategori

Langsung dari kotak, WooCommerce memberi Anda beberapa opsi tentang apa yang dapat Anda tampilkan di halaman arsip Anda seperti produk, kategori, atau subkategori atau keduanya produk dan kategori . Namun, sebagian besar pengguna WooCommerce memilih opsi ketiga untuk menampilkan produk dan kategori/subkategori. urutkan kategori woocommerce

Opsi ini akan memungkinkan pengunjung Anda untuk memilih produk langsung dari halaman beranda atau mempersempit pencarian mereka dengan mengklik arsip kategori produk.

Namun, kelemahan utama tentang ini adalah ia menampilkan kategori/subkategori bersama, tanpa pemisahan di antara keduanya. Hal ini membuat tata letak terlihat sedikit berantakan karena dimensi gambar yang berbeda.

Dari sudut pandang ahli, meskipun gambar Anda berukuran sama, jika salah satu baris di halaman arsip menyertakan kategori dan produk, tidak adanya tombol 'Tambahkan ke Keranjang' untuk kategori membuat baris tersebut terlihat tidak teratur, seperti tidak semua elemennya memiliki dimensi yang sama.

Dalam tutorial singkat ini, Anda akan belajar bagaimana menampilkan kategori dalam daftar terpisah sebelum menampilkan produk.

Identifikasi atau bedakan kode di WooCommerce, yang digunakan untuk menampilkan kategori dan subkategori pada halaman arsip.
Buat plugin khusus untuk kode tersebut.
Tulis fungsi yang akan menempatkan kategori atau subkategori sebelum daftar produk.
Buat gaya kustom untuk output.

a) Menampilkan Produk dan Kategori atau Subkategori

Langkah-langkah untuk Menampilkan Produk dan Kategori atau Subkategori.

Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
Dari menu Dashboard, klik pada Appearance Menu > Customize. Klik pada halaman Toko dan pilih WooCommerce > Katalog Produk. Pada opsi Tampilan Toko , pilih Tampilkan kategori & produk . Pada pilihan tampilan Kategori , pilih Tampilkan subkategori & produk seperti gambar di bawah ini:
Ingatlah untuk menyimpan perubahan yang Anda buat.
Ini akan menjadi hasilnya :

b) Tampilkan Kategori Produk WooCommerce

Namun, Anda dapat menampilkan Kategori Produk WooCommerce menggunakan cuplikan kode di bawah ini, yang harus ditempatkan di file functions.php.

Langkah-langkah untuk Menampilkan Kategori Produk WooCommerce

Berikut adalah langkah-langkah yang harus Anda ikuti:

Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Ketika halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan function yang akan menampilkan kategori WooCommerce Product.
Tambahkan kode berikut ke file php :

 function woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = array(

             'induk' => $woocommerce_category_id
  );

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

  jika ( $syarat ) {

             echo '<ul class="woocommerce-categories">';

             foreach ( $term sebagai $term ) {

             echo '<li class="woocommerce-product-category-page">';

            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', 'woocommerce_product_category', 100 );

Ini akan menjadi Hasil:

Namun, perlu beberapa CSS khusus agar dapat menampilkan produk dengan baik. Kita akan melakukannya nanti dalam tutorial ini.

Cara Kerja Kode

Kode ini bekerja hanya dengan menggunakan fungsi woocommerce_product_category() function yang mengeluarkan kategori atau subkategori sebelum menjalankan loop yang mengeluarkan produk. Itu dapat mengesampingkan tema, karena fungsinya dapat dipasang.

c) Daftar Subkategori dari Kategori Produk WooCommerce

Sangat mudah untuk mendapatkan subkategori kategori produk WooCommerce dengan menggunakan fungsi khusus yang memanfaatkan slug kategori produk induk.

Langkah-langkah untuk Mendaftar Subkategori dari Kategori Produk WooCommerce

Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Ketika halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan fungsi yang akan List Subkategori dari Kategori Produk WooCommerce.
Tambahkan kode berikut ke file php :

 fungsi woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = array();
$taksonomi = 'produk_kucing';
$parent = get_term_by( 'slug', $category_slug, $taxonomy );
$children_ids = get_term_children( $parent->term_id, $taxonomy );

foreach($children_ids sebagai $children_id){

    $term = get_term( $children_id, $taxonomy );

    $term_link = get_term_link( $term, $taxonomy );

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $istilah->nama . '</a>';
}

kembali '<span class="subkategori-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';

}

Ini akan menjadi Hasil:

Cara kerja kode.

Objek WP_Term mendapatkan induk kategori produk. Kemudian, ia mendapatkan ID anak dalam sebuah larik, dan akhirnya, kategori anak ditampilkan dalam HTML dengan menjalankan loop melalui larik ID anak.

d) Mengidentifikasi Kode yang Digunakan WooCommerce untuk Menghasilkan Kategori dan Produk di Arsip

Sebelum kita membuat plugin, langkah pertama yang pasti adalah mengidentifikasi bagaimana WooCommerce mengeluarkan kategori dan subkategori. Ini berarti kita harus mencari kode sumber WooCommerce secara manual untuk menemukan fungsi yang relevan.

Untuk mempermudah prosesnya, cari saja archive-product.php , yang ada di folder templates. Ini adalah file yang digunakan WooCommerce untuk menampilkan halaman arsip. Anda sekarang perlu menemukan kode yang menampilkan kategori dan produk:

 <?php
/**
* pengait woocommerce_before_shop_loop
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action('woocommerce_before_shop_loop');
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( 'konten', 'produk' ); ?>

<?php akhir; // akhir perulangan. ?>

<?php woocommerce_product_loop_end(); ?>

Cara Kerja Kode:

Fungsi woocommerce_product_subcategories() function mengeluarkan kategori atau subkategori sebelum menjalankan loop yang mengeluarkan produk. Alasan mengapa saya menarik perhatian Anda ke fungsi ini adalah karena fungsi ini dapat dicolokkan, yang berarti kita dapat menimpanya di tema kita.

Namun, ini tidak akan berfungsi karena WooCommerce memiliki gaya bawaan untuk menghapus item, yang akan muncul di awal baris dengan tampilan default. Jadi apa yang harus kita lakukan? Jawabannya sederhana. Kami perlu mematikan tampilan kategori dan subkategori pada halaman arsip kami sehingga hanya produk yang ditampilkan.

Setelah ini, langkah selanjutnya adalah membuat fungsi baru yang menampilkan kategori atau subkategori produk dan mengaitkannya ke woocommerce_before_shop_loop action , memastikan kita menggunakan prioritas tinggi sehingga diaktifkan setelah fungsi yang sudah terhubung ke tindakan itu.

Namun penting untuk dicatat bahwa WooCommerce menambahkan pembersihan ke setiap daftar produk ketiga. Ini berarti bahwa kita tidak dapat menggunakan fungsi woocommerce_product_subcategories() function atau versi yang telah diedit untuk menampilkan kategori. Penjelasannya adalah bahwa fungsi ini akan menghapus kategori atau produk ketiga, keenam (dan seterusnya), bahkan ketika kita menggunakan fungsi ini untuk menampilkan kategori secara terpisah. Ini berarti bahwa kita harus membuat fungsi yang akan menimpanya. Ini dapat dilakukan dengan membuat plugin.

e) Membuat Plugin

Anda harus terlebih dahulu membuat yang baru yang lebih lama dan memberinya nama unik di direktori wp-content/plugins . Untuk contoh ini, berhati-hatilah saat mengikuti langkah-langkah agar Anda dapat mencapai fungsionalitas yang kami butuhkan. Saya akan menggunakan nama ini njengah-separate-products-categories-in-archives .

Di dalam folder ini, Anda perlu membuat file baru, sekali lagi dengan nama yang unik. Saya akan menggunakan nama yang sama juga untuk folder ini njengah-separate-products-categories-in-archives.php .

Langkah-langkah Membuat Plugin

Buka file Anda dan tambahkan kode berikut:

 <?php
/**
* Nama Plugin: Kategori Produk WooCommerce
* Deskripsi: Menampilkan kategori WooCommerce di halaman produk WooCommerce

**/

Sebelum menulis fungsi kami, Anda perlu mematikan daftar kategori di layar admin dengan Masuk ke situs WordPress Anda dan mengakses Dasbor sebagai pengguna admin.
Dari menu Dashboard, klik pada Appearance Menu > Customize. Klik pada halaman Toko dan pilih WooCommerce > Katalog Produk. Pada opsi Tampilan Toko , pilih Tampilkan produk . Pada opsi tampilan Kategori , pilih Perlihatkan produk .
Ingatlah untuk menyimpan perubahan yang Anda buat.
Ini akan menjadi hasilnya :
Tambahkan ini ke file plugin:

 function njengah_product_subcategories( $args = array()) {

}

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

Maka Anda perlu menambahkan kode ini dalam fungsi:

 $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>';

}

Ini akan menjadi hasilnya: Tampilkan Produk WooCommerce berdasarkan Kategori

Seperti yang Anda lihat dari gambar di atas, kategorinya tidak terorganisir dengan baik. Ini berarti bahwa kita harus menambahkan gaya kustom kita. Namun, sebelum itu, mari kita pelajari cara kerja kode tersebut.

Cara Kerja Kode

Fungsi yang kita buat mengidentifikasi objek yang ditanyakan saat ini dan mendefinisikan id-nya sebagai $parentid . Kemudian menggunakan get_terms() untuk mengidentifikasi istilah dengan item yang saat ini ditanyakan sebagai induknya. Jika ini adalah halaman toko utama, itu akan mengembalikan kategori tingkat atas dan jika ini adalah arsip kategori, itu akan mengembalikan subkategori.

Selain itu, fungsi memeriksa apakah ada istilah, sebelum membuka a untuk setiap loop dan elemen ul . Ini berarti bahwa untuk setiap istilah, ia membuat elemen li , dan kemudian menampilkan category image using woocommerce_subcatgeory_thumbnail() , diikuti dengan nama kategori dalam tautan ke arsipnya.

Langkah-langkah untuk Menata Daftar Kategori

Ini adalah langkah-langkah yang perlu Anda ikuti, tetapi untuk melakukan ini kita memerlukan stylesheet di dalam plugin kita, yang perlu kita enqueue.

Buat folder bernama CSS , dan di dalamnya , buat file bernama CSS. Ini harus dilakukan di folder plugin agar ini berfungsi .
Tambahkan kode ini di bagian atas fungsi yang telah Anda buat:

 function njengah_product_cats_css() {




/* daftarkan stylesheet */

wp_register_style( ' njengah _product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );




/* mengantrekan stysheet */

wp_enqueue_style( ' njengah _product_cats_css' );




}




add_action( 'wp_enqueue_scripts', ' njengah _product_cats_css' );

Langkah selanjutnya adalah membuka stylesheet Anda dan menambahkan kode di bawah ini. Namun, penting untuk dicatat bahwa WooCommerce menggunakan gaya mobile-first, jadi itulah yang akan kami gunakan juga.

 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 {
margin-kiri: 0;
jelas: keduanya;
}

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

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

}

Ini akan menjadi hasilnya:

Kesimpulan

Dalam posting ini, saya telah menyoroti berbagai cara di mana Anda dapat menampilkan produk WooCommerce berdasarkan kategori. Dari tutorial singkat ini, Anda dapat memahami mengapa kategori produk adalah fitur hebat di WooCommerce, tetapi cara mereka ditampilkan tidak selalu ideal.

Selain itu, Anda telah mempelajari cara membuat plugin yang menampilkan kategori atau subkategori produk secara terpisah dari daftar produk, dan cara menata daftar kategori. Bagian yang paling menonjol dari tutorial ini adalah pembuatan plugin khusus yang menampilkan daftar kategori atau subkategori pada halaman, dengan mengaitkan fungsi ke kait tindakan yang berbeda di dalam file template WooCommerce.

Artikel Serupa

Cara Menghapus Penyortiran Produk Default WooCommerce
Cara Mendapatkan Nama Kategori Produk Saat Ini di WooCommerce
Cara Menjual Produk Digital Dengan WooCommerce
Cara Mengurutkan Kategori WooCommerce untuk Pengalaman Pengguna yang Lebih Baik
Cara Menambahkan Nomor GTIN Pada Produk Di WooCommerce
Sembunyikan atau Hapus Bidang Kuantitas dari Halaman Produk WooCommerce
Cara Menyembunyikan Bidang Kode Kupon WooCommerce
Bagaimana Menambahkan Teks Sebelum Harga di WooCommerce » Tambahkan Teks Sebelum Harga
Cara Mengubah Harga Produk Secara Terprogram di WooCommerce
Cara Memindahkan Deskripsi Di Bawah Gambar di WooCommerce
Cara Menghilangkan Efek Zoom pada Gambar Produk WooCommerce
Cara Menambahkan Deskripsi setelah Harga di WooCommerce
Cara Mengubah Ukuran Gambar Produk WooCommerce
Cara Menyembunyikan Produk di WooCommerce atau Menyembunyikan Produk berdasarkan Kategori atau Peran