Membuat Deskripsi Pendek Di Halaman Arsip Produk WooCommerce

TokoDaring.Com – Membuat Deskripsi Pendek Di Halaman Arsip Produk WooCommerce. Artikel tutorial WooCommerce ini akan membuat deskripsi produk woocommerce di tampilkan pada halaman arsip.

WooCommerce

Artikel Lainnya:

Membuat Notifikasi Pendaftaran Akun Baru (WooCommerce)

WooCommerce memang hadir dengan kemampuan untuk menampilkan halaman katalog yang baik. Tapi mungkin saja anda ingin agar katalog produk dapat menampilkan lebih banyak informasi, tujuannya agar orang tau lebih baik dari produk yang anda jual.

Misalnya dengan membuat deskripsi produk WooCommerce bisa di baca oleh pengunjung atau customer langsung dari halaman katalog sebelum mereka mengklik lebih jauh ke halaman single produk.

Tutorial ini, akan memberikan cara bagaimana membuat deskripsi produk WooCommerce anda bisa ditampilkan dihalaman katalog dan arsip (kategori atau tag). Tepatnya itu adalah deskripsi pendek atau anda mungkin sering mendengar dengan istilah excerpt dan berada di bawah judul produk.

Membuat deskripsi produk WooCommerce

Untuk membuat deskripsi produk WooCommerce tentu saja biasa dilakukan dengan mengetikannya lebih dahulu secara manual yang mendeskripsikan secara lengkap tentang produk itu sendiri.

Lalu anda mungkin akan menemukan sebuah CPT yang biasa disebut dengan excerpt. Biasanya excerpt adalah summary pendek yang bisa menggambarkan secara keseluruhan produk itu. Nah pada tutorial ini, deskripsi pendek yang akan di tampilkan adalah apa yang ada pada the_excerpt.

WooCommerce Hook

Tutorial ini juga benar-benar bersih dari plugin. Maksudnya adalah untuk membuat deskripsi pendek di halaman katalog dan arsip bisa di lakukan tanpa harus menginstal plugin.

Pastikan anda mengerti dan memahami file function.php dan bagaimana mengaksesnya. Karena ada beberapa baris kode yang akan mengait hook WooCommerce dan harus di tambahkan ke dalam file itu.

Tentang WordPress dan WooCommerce hook, lihat artikel ini tentang apa itu WordPress hooks, dan ini adalah daftar lengkap hooks WooCommerce yang pernah kami tulis di website ini.

Membuat fungsi

Sekali lagi, deskripsi singkat produk WooCommerce akan menggunakan isi dari the_excerpt. Ini hanya perlu agar itu bisa ditampilkan di depan.

Di dalam file function.php, tambahkan kode berikut :

/* 
 * Membuat Deskripsi Produk WooCommerce
 * Agar di tampilkan pada halaman katalog / arsip
 *
 */

function tokodaring_produk_excerpt() {
   the_excerpt();
      
}

Berikutnya anda perlu untuk menghubungkan fungsi diatas dengan action hook yang tepat, sehingga deskripsi yang ada pada excerpt bisa ditampilkan di tempat yang tepat, dalam hal ini di halaman arsip dan katalog.

Mengaitkan action hook

File WooCommerce yang menampilkan konten loop pada halaman arsip adalah file content-product.php. Jika anda ingin tau, file itu bisa ditemukan di dalam folder templates plugin WooCommerce.

Ada beberapa action hook pada file tersebut yang semuanya digunakan oleh WooCommerce untuk menghasilkan konten yang berbeda-beda.

Tujuan kita adalah ingin menampilkan excerpt tepat berada di bawah judul produk, maka hook yang tepat untuk di gunakan adalah woocommerce_after_shop_loop_item_title.

Di dalam file content-product.php, sudah ada dua fungsi yang melekat, yaitu :

woocommerce_template_loop_rating() dengan prioritas 5 dan woocommerce_template_loop_price(), prioritas 10.

Agar fungsi kustom kita bisa berjalan, maka kita perlu mengaitkan fungsi kita dengan nomor prioritas yang lebih tinggi. Ini agar fungsi yang kita buat tidak dipanggil terlalu awal. Mari kita coba dengan menggunakan 20 sebagai prioritas.

Tambahkan kode ke dalam fungsi tadi sehingga akan menjadi seperti ini :

/* 
 * Membuat Deskripsi Produk WooCommerce
 * Agar di tampilkan pada halaman katalog / arsip
 *
 */

function tokodaring_produk_excerpt() {
  the_excerpt();
}

add_action( 'woocommerce_after_shop_loop_item_title', 'tokodaring_produk_excerpt', 20 );

Simpan perubahan file function.php dan refresh halaman katalog WooCommerce anda. Deskripsi singkat produk seharusnya berada di bawah nama produk.

Membatasi panjang kata deskripsi produk

Deskripsi produk anda mungkin terlalu panjang, dan anda mungkn tidak menyukainya. Deskripsi yang terlalu panjang memang hanya akan membuat tampilan katalog anda justru mengacaukan halaman yang seharusnya di desain secara cantik.

Untuk mengatasinya, itu bisa dilakukan dengan membatasi jumlah kata menggunakan hook wp_trim_words dan itu akan memangkas teks ke sejumlah kata tertentu.

Sekarang rubah kembali fungsi tadi hingga menjadi seperti ini. Dan 10 akan membatasi deskripsi itu terbatas pada 10 kata yang ada di awal.

/* 
 * Membuat Deskripsi Produk WooCommerce
 * Agar di tampilkan pada halaman katalog / arsip
 *
 */

function tokodaring_produk_excerpt() {
   echo wp_trim_words( get_the_excerpt(), 10 );
}

add_action( 'woocommerce_after_shop_loop_item_title', 'tokodaring_produk_excerpt', 20 );

Menyembunyikan deskripsi singkat di halaman produk single WooCommerce

Apa lagi yang ingin anda lakukan dari tutorial ini ? Anda mungkin ingin bahwa deskripsi singkat itu cukup untuk di tampilkan pada halaman katalog dan arsip. Lalu menggunakan deskripsi panjang pada halaman produk single.

Lihat juga artikel tutorial kami tentang memodifikasi halaman produk single WooCommerce

Secara default, WooCommerce menampilkan deskripsi singkat di bagian atas halaman produk atau biasa dilihat di samping kanan gambar, lalu menggunakan deskripsi panjang di bagian bawah.

Untuk menghapus deskripsi singkat dari halaman produk dan menambahkan deskripsi panjang sebagai gantinya. Anda perlu meremove action hook (remove_action) yang digunakan WooCommerce untuk menampilkan deskripsi singkat.

Lalu menggantinya dengan yang mengeluarkan deskripsi panjang, yaitu the_content menggunakan add_action.

Tambahkan beberapa baris kode ini ke dalam file function.php :

add_action( 'init', 'tokodaring_remove_short_product_description' );
function tokodaring_remove_short_product_description() {
   remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
    add_action( 'woocommerce_single_product_summary', 'the_content', 20 );
}

Kode di atas akan menghapus deskripsi singkat dari bagian atas halaman produk dan menggantinya dengan deskripsi panjang.

Upps… anda kembali menemukan masalah dan tidak membuat anda senang. Karena deskripsi panjang ternyata masih berada di bagian bawah halaman (tab product description). Jadi anda mungkin harus menghapusnya dari tab product description.

Kode berikut ini akan memecahkan masalah tersebut.

add_filter( 'woocommerce_product_tabs', 'tokodaring_remove_long_product_description', 99 );
function tokodaring_remove_long_product_description( $tabs ) {
  unset( $tabs['description'] );
  return $tabs;
}

Nah… sekarang, tidak ada lagi duplikasi deskripsi di halaman produk single WooCommerce anda.

Kesimpulan, Membuat Deskripsi Produk WooCommerce

Semua konten WooCommerce dalam hal ini adalah deskripsi produk ditampilkan di halaman website dengan menggunakan action hook.

Jadi sebenarnya sangat mudah untuk melakukan kustom atau membuat deskripsi produk WooCommerce pada halaman itu. Baik menambahkan lebih banyak konten dengan membuat fungsi kustom dan melampirkannya ke hook tersebut.

Artikel terkait :