Advertisement
  1. Code
  2. WordPress

WooCommerce: Menambahkan Deskripsi Singkat Produk ke Halaman Arsip

by
Difficulty:IntermediateLength:ShortLanguages:

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

Final product image
What You'll Be Creating

WooCommerce datang dibundel dengan halaman arsip dan loop yang melakukan pekerjaan yang besar, tapi kadang-kadang Anda mungkin perlu menampilkan informasi lebih pada toko utama Anda dan halaman arsip lainnya.

Dalam tutorial ini, saya akan menunjukkan bagaimana Anda dapat menambahkan deskripsi singkat produk ke halaman arsip Anda dan menampilkannya di bawah judul produk.

Apa yang Anda Perlukan

Untuk mengikutinya, Anda akan memerlukan:

  • Pembangunan instalasi WordPress.
  • Editor kode.
  • WooCommerce yang diinstal dan diaktifkan.
  • Produk yang ditambahkan—saya telah mengimpor data produk dummy yang datang dengan WooCommerce; untuk rincian bagaimana melakukannya, lihat panduan ini.
  • Tema WooCommerce-kompatibel diaktifkan—saya menggunakan Storefront.

Sebelum memulai, pastikan Anda mempunyai WooCommerce sudah diatur. Untuk menambahkan deskripsi singkat produk, Anda akan mengikuti tiga langkah:

  1. Membuat sebuah plugin untuk fungsi dan mengaktifkan plugin tersebut.
  2. Menambahkan fungsi yang meng-output deskripsi singkat produk.
  3. Mengidentifikasi hook di WooCommerce yang kita perlu untuk menghubungkan fungsinya, dan melampirkan fungsi untuk hook itu.

Jadi mari kita mulai!

Membuat Plugin

Dalam direktori wp-content/plugins Anda, buat file PHP baru. Saya memberinya nama tutsplus-product-archive-short-descriptions.php.

Buka file di editor kode Anda. Di bagian atas dari file, tambahkan ini:

Ini pengaturan plugin dan memberikan WordPress segalanya untuk mengaktifkannya.

Sekarang pergi ke layar Plugins di WordPress admin dan temukan plugin-nya:

Activating the plugin via the plugins screen

Sekarang aktifkan.

Pada awalnya itu tidak akan ada perbedaan karena Anda belum mengisinya. Berikut adalah yang tampak seperti sekarang di halaman toko utama:

The site with the Storefront theme activated with no product short descriptions on the main shop archive page

Menulis Fungsi untuk Output Deskripsi Pendek

Deskripsi singkat produk di WooCommerce menggunakan kutipan yang akan Anda temukan di posting normal, sehingga untuk menampilkan itu semua yang perlu Anda lakukan adalah menampilkan kutipan untuk postingnya.

Dalam file plugin Anda, tambahkan kode berikut:

Hanya sesederhana itu! Tapi sekarang Anda perlu untuk menkaitkan fungsi Anda ke tindakan yang tepat, sehingga output-nya berada di tempat yang benar di halaman arsip Anda.

Mengaitkan Fungsi ke Tindakan yang Benar

Mari kita lihat pada file dalam WooCommerce yang menampilkan isi dari loop pada halaman arsip. File-nya adalah content-product.php, dan Anda akan menemukannya dalam folder template plugin WooCommerce.

File ini mencakup sejumlah tindakan hook, semuanya adalah yang digunakan oleh WooCommerce untuk menampilkan konten yang berbeda.

Karena kita ingin menampilkan kutipan kita di bawah judul produk, hook yang kita perlukan adalah woocommerce_after_shop_loop_item_title. Seperti yang Anda lihat dari file content-product.php, ia telah mendapat dua fungsi yang melekat, woocommerce_template_loop_rating() dan woocommerce_template_loop_price(), yang memiliki prioritas masing-masing 5 dan 10. Jadi kita perlu untuk menghubungkan fungsi kita dengan sejumlah prioritas yang lebih tinggi, untuk memastikan ia dijalankan setelah mereka. Aku akan meninggalkan beberapa peluang dan menggunakan 40 sebagai prioritas.

Di bawah fungsi Anda, tambahkan ini:

Sekarang simpan file plugin Anda dan refresh halaman toko di browser Anda. Anda sekarang akan melihat deskripsi singkat produk di bawah nama produk:

The shop page with short descriptions added to products

Deskripsi berikut ini (yang disediakan oleh dummy data) sedikit agak panjang: secara pribadi saya akan menggunakan deskripsi yang lebih pendek pada situs asli. Tetapi Anda dapat dengan jelas melihat deskripsi yang ditampilkan di halaman arsip.

Ringkasan

Karena WooCommerce menampilkan hampir semua isinya menggunakan tindakan hook, maka mudah untuk menambahkan konten dengan menulis fungsi dan menyambungkannya ke hook tersebut. Dalam tutorial ini, Anda telah belajar bagaimana menambahkan deskripsi singkat produk ke arsip produk Anda. Jika Anda ingin mengambil ini lebih lanjut, Anda dapat memasukkan satu atau lebih tag bersyarat dalam fungsi Anda untuk melakukan ini pada halaman arsip tertentu.

Advertisement
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.