Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Menampilkan Kategori, Subkategori, dan Produk WooCommerce dalam Daftar Terpisah

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image
What You'll Be Creating

WooCommerce memberi Anda beberapa pilihan tentang apa yang dapat Anda tampilkan di halaman arsip Anda:

  • produk
  • kategori (di halaman toko utama) atau subkategori (pada halaman kategori)
  • baik produk dan kategori.

Saat membuat toko, saya biasanya memilih opsi ketiga: produk dan kategori/subkategori. Ini berarti pengunjung ke toko saya dapat memilih produk langsung dari beranda atau memperbaiki penelusuran mereka dengan mengklik arsip kategori produk.

Namun, ada satu yang gagal dengan pendekatan ini: Ini menampilkan kategori/subkategori bersama-sama, tanpa pemisahan antara keduanya. Ini berarti jika gambar produk Anda memiliki dimensi yang berbeda dari gambar produk Anda, tata letaknya bisa terlihat agak berantakan. Bahkan jika gambar Anda berukuran sama, jika salah satu baris di halaman arsip mencakup kategori dan produk, tidak adanya tombol 'Add to Cart' untuk kategori membuat baris itu terlihat berantakan, karena tidak semua elemennya memiliki dimensi yang sama.

Dalam tutorial ini saya akan menunjukkan cara menampilkan kategori dalam daftar terpisah sebelum menampilkan produk.

Untuk melakukan ini, kita akan mengikuti empat langkah:

  1. Identifikasi kode yang digunakan WooCommerce untuk mengeluarkan kategori dan subkategori pada halaman arsip.
  2. Membuat plugin untuk kode kita.
  3. Menulis fungsi untuk menempatkan kategori atau subkategori sebelum daftar produk.
  4. Memberi gaya pada outputnya.

Tapi sebelum Anda memulai, Anda memerlukan instalasi WooCommerce dengan beberapa produk ditambahkan, dan kategori produk dan subkategori disiapkan.

Apa yang Akan Anda Butuhkan

Untuk mengikuti, Anda memerlukan:

  • Sebuah instalasi pengembangan WordPress.
  • Editor kode.
  • WooCommerce terinstal dan diaktifkan.
  • Produk yang ditambahkan—saya telah mengimpor data produk dummy yang disertakan dengan WooCommerce; untuk rincian bagaimana melakukan ini, lihat panduan ini.
  • Tema kompatibel WooCommerce diaktifkan—saya menggunakan Storefront.

Sebelum Kita Mulai: Opsi Default

Mari kita lihat apa yang WooCommerce berikan secara default.

Saya sudah mulai dengan menambahkan beberapa gambar ke kategori dan subkategori produk saya, karena data dummy WooCommerce tidak memasukkan di dalamnya. Saya hanya menggunakan satu gambar produk dari setiap kategori atau subkategori, seperti yang dapat Anda lihat di tangkapan layar:

Product categories screen in WordPress admin with category images added

Sekarang mari kita lihat bagaimana WooCommerce menampilkan kategori produk dan produk di halaman arsip.

Jika belum, buka WooCommerce > Settings, pilih tab Products, dan kemudian pilih opsi Display. Untuk masing-masing pilihan Shop Page Display dan Default Category Display, pilih Show both:

WooCommerce product display settings screen

Klik tombol Save changes untuk menyimpan pengaturan Anda dan kunjungi halaman toko situs Anda. Milik saya terlihat seperti ini:

The main shop page without any changes

Seperti yang terjadi, karena saya memiliki tiga kategori produk dan gambar kategori saya berukuran sama dengan gambar produk saya, tampilannya pun cukup rapi. Tapi inilah salah satu arsip kategori produk:

The Music category archive page without any changes

Karena kategori ini memiliki dua subkategori, produk pertama ditampilkan di sampingnya, dalam grid selebar tiga item. Saya ingin membuat kategori dan subkategori saya lebih menonjol, dan menyajikannya secara terpisah dari daftar produk. Jadi mari kita lakukan itu.

Mengidentifikasi Kode yang Digunakan WooCommerce Untuk Output Kategori dan Produk di Arsip

Langkah pertama adalah mengidentifikasi bagaimana WooCommerce mengeluarkan kategori dan subkategori. Jadi, mari kita bahas kode sumber WooCommerce untuk menemukan fungsi yang relevan.

File yang digunakan WooCommerce untuk menampilkan halaman arsip adalah archive-product.php, yang ada di folder templates.

Di dalam file itu, Anda dapat menemukan kode ini, yang menampilkan kategori dan produk:

Jadi, ada fungsi woocommerce_product_subcategories() yang menampilkan kategori atau subkategori sebelum menjalankan loop yang menampilkan produk.

Fungsinya pluggable, yang berarti kita bisa menggantikannya dengan tema kita. Sayangnya itu tidak cukup bekerja karena WooCommerce memiliki gaya bawaan untuk membersihkan barang, yang akan muncul di awal baris dengan tampilan default.

Jadi, daripada itu, kita akan mematikan tampilan kategori dan subkategori di halaman arsip kita, sehingga hanya produk yang ditampilkan. Kemudian kita akan membuat fungsi baru yang mengeluarkan kategori atau subkategori produk, dan menghubungkannya ke tindakan woocommerce_before_shop_loop, memastikan kita menggunakan prioritas tinggi sehingga ia dijalankan setelah fungsi yang sudah terkait dengan tindakan itu.

Catatan: Karena WooCommerce menambahkan pembersihan pada setiap cantuman produk ketiga, kita tidak dapat menggunakan fungsi woocommerce_product_subcategories() atau versi yang diedit untuk menampilkan kategori. Ini karena ia akan menghapus kategori atau produk ketiga, keenam (dan seterusnya) yang dicantumkan, bahkan saat kita menggunakan fungsi ini untuk menampilkan kategori secara terpisah. Kita bisa mencoba menggantinya, tapi lebih sederhana hanya menulis fungsi kita sendiri.

Jadi mari kita buat sebuah plugin yang melakukan itu.

Membuat Plugin

Di direktori wp-content/plugins Anda, buat folder baru dan beri nama yang unik. Saya menyebutnya tutsplus-separate-products-categories-in-archives. Di dalamnya, buat file baru, lagi dengan nama yang unik. Saya menggunakan nama yang sama: tutsplus-separate-products-categories-in-archives.php.

Buka file Anda dan tambahkan kode ini ke sana:

Anda mungkin ingin mengedit rincian penulis karena ini adalah plugin yang Anda tulis. Simpan file Anda dan aktifkan plugin via admin WordPress.

Menulis Fungsi Kita

Sekarang mari kita tulis fungsinya. Tapi sebelum memulai, matikan daftar kategori di layar admin. Buka WooCommerce > Settings, pilih tab Products, dan kemudian pilih opsi Display. Untuk masing-masing pilihan Shop Page Display dan Default Category Display, pilih Show products. Simpan perubahan Anda

Halaman toko Anda sekarang akan terlihat seperti ini:

The main shop page with just products displayed

Di file plugin Anda, tambahkan ini:

Sekarang tambahkan kode ini di dalam fungsi:

Mari kita lihat apa fungsinya:

  • Ini mengidentifikasi objek yang diminta saat ini dan mendefinisikan id-nya sebagai $parentid.
  • Menggunakan get_terms() untuk mengidentifikasi terms dengan item yang diminta saat ini sebagai induk mereka. Jika ini adalah halaman toko utama, ini akan mengembalikan kategori tingkat atas; jika ini adalah arsip kategori, ia akan mengembalikan subkategori.
  • Kemudian memeriksa apakah ada terms apapun, sebelum pembukaan loop foreach dan elemen ul.
  • Untuk setiap terms, ia menciptakan elemen li, dan kemudian menampilkan gambar kategori menggunakan woocommerce_subcatgeory_thumbnail(), diikuti oleh nama kategori dalam tautan ke arsipnya.

Sekarang simpan file Anda dan segarkan halaman toko utama. Milik saya terlihat seperti ini:

Main shop page - categories are separate but too big and with list styling bullets etc

Kategori ditampilkan, tapi butuh beberapa gaya. Mari kita lakukan selanjutnya.

Menata Daftar Kategori

Agar kita bisa menambahkan gaya, kita membutuhkan stylesheet di dalam plugin kita, yang perlu kita enqueue.

Di folder plugin Anda, buatlah sebuah folder bernama css, dan di dalamnya, buatlah sebuah file bernama style.css.

Sekarang, di file plugin Anda, tambahkan ini di atas fungsi yang telah Anda buat:

Ini melakukan enqueues stylesheet dengan benar pada yang baru saja Anda buat.

Sekarang buka stylesheet Anda dan tambahkan kode di bawah ini. WooCommerce menggunakan penataan mobile first, jadi itulah yang akan kita gunakan juga.

Saya telah menyalin lebar dan margin yang tepat dari penataan yang digunakan oleh WooCommerce.

Sekarang periksa halaman utama toko Anda lagi. Inilah milik saya:

The main shop page Categories are above products and styled consistently in a grid

Inilah arsip kategori Music:

The Music archive Two subcategories are above the 3 wide grid of products

Dan inilah tampilannya di layar yang lebih kecil:

The categories on narrower screens full width not in a grid

Ringkasan

Kategori produk adalah fitur hebat WooCommerce, namun cara mereka ditampilkan tidak selalu ideal. Dalam tutorial ini, Anda telah belajar membuat plugin yang menghasilkan kategori atau subkategori produk secara terpisah dari daftar produk, dan kemudian Anda telah menata daftar kategori Anda.

Anda bisa menggunakan kode ini untuk mengeluarkan daftar kategori atau subkategori di tempat lain pada halaman (misalnya di bawah produk), dengan mengaitkan fungsi ke hook tindakan yang berbeda dalam file template WooCommerce.

Jika saat ini Anda menjalankan toko yang ingin Anda perluas, atau Anda mencari beberapa plugin tambahan untuk dipelajari karena berhubungan dengan WooCommerce, jangan ragu untuk melihat plugin apa yang tersedia di Envato Market.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.