Posted on

Tips-trik Memunculkan Breadcrumbs Pada Halaman Produk WooCommerce

wpJakarta.Com – Tips-trik Memunculkan Breadcrumbs Pada Halaman Produk WooCommerce. Breadcrumbs menjadi sesuatu hal yang penting dalam konteks SEO (Search Engine Optimization). Pada september tahun lalu (2019), google memasukan breadcrumbs sebagai salah satu point “enhancement” google search console. Untuk memasukan breadcrumbs sebagai salah satu element yang akan ditampilkan pada halaman pencarian google. Jika anda menggunakan plugin Yoast SEO maka akan ada pilihan untuk mengaktifkan breadcrumbs. Baca artikel lama kami tentang mengatasi error breadcrumbs. Dan juga bagaimana menampilkan breadcrumbs pada halaman dan artikel/post dengan plugin yoast SEO. Tips Trik Mengatasi Error Breadcrumbs dan Memunculkan breadcrumbs pada halaman WordPress.

Jika memunculkan breadcrumbs pada halaman dan “regular post” dapat dilakukan dengan sangat mudah dan menggunakan yoast versi gratis. Maka lain halnya memunculkan breadcrumbs pada halaman produk WooCommerce. Untuk memunculkan breadcrumbs pada halaman single produk WooCommerce menggunakan plugin Yoast SEO. Maka hal tersebut tidak dapat dilakukan dengan plugin yoast versi gratis. Melainkan harus dengan plugin versi premium. Sama halnya jika anda menggunakan plugin elementor. Meskipun ada pilihan widget untuk menampilkan widget breadcrumbs, tetapi hal tersebut hanya dapat dilakukan dengan Elementor WooCommerce builder yang notabene juga versi PRO alias berbayar.

Tips-trik memunculkan breadcrumbs pada halaman produk WooCommerce tanpa plugin

Lalu bagaimana jika anda ingin menampilkan breadcrumbs tanpa harus menggunakan plugin berbayar yoast atau elementor ? Yup… anda tidak harus merogoh kocek hanya untuk menampilkan sebaris link informasi di atas halaman produk anda. Karena logikanya jika ada plugin yang bisa menampilkan breadcrumbs pada halaman produk WooCommerce. Maka seharusnya ada semacam tips-trik yang bisa dilakukan untuk memunculkan breadcrumbs pada halaman produk WooCommerce tanpa plugin. Caranya tentu dengan memasukan “snippet” kode atau skrip php ke dalam file php WordPress. Ada beberapa cara yang dapat dilakukan dengan memasukan kode ke dalam file php WordPress. Anda dapat memilih mana yang “cocok” untuk diterapkan pada tema website WordPress anda. Karena perbedaan tema, mungkin ada perbedaaan bagaimana tema tersebut menghandle fungsi breadcrumbs.

Tips-trik memunculkan breadcrumbs pada halaman produk WooCommerce tanpa plugin melalui file header.php

Cara pertama adalah dengan memasukan beberapa baris kode berikut ke dalam file header.php. Masukan pada baris paling bawah file header.php anda.

 <?php if (class_exists('WooCommerce') && is_woocommerce()) : ?>
 	<?php woocommerce_breadcrumb(); ?>
 <?php endif; ?>

Tips-trik memunculkan breadcrumbs pada halaman produk WooCommerce tanpa plugin melalui file woocommerce.php

Cara kedua adalah dengan memasukan fungsi yang sama seperti diatas kedalam file “woocommerce.php”. Tapi ingat bahwa ini bukan file woocommerce.php yang ada pada folder plugin WooCommerce. Melainkan file woocommerce.php yang ada pada folder themes (wp-content/themes/inc/woocommerce.php). Masukan fungsi berikut sebelum statement fungsi “woocommerce_content()”.

 <?php woocommerce_breadcrumb(); ?>

Fungsi yang anda masukan baik ke dalam file header.php ataupun woocommerce.php, mungkin tidak sesuai atau tidak serapi yang anda harapkan. Selanjutnya lakukan penyesuaian dengan memasukan kode css ke dalam file tambahan css.

 /* anda bisa mengatur sesuai yang anda suka menggunakan style CSS */ 
 
 .woocommerce .woocommerce-breadcrumb {
   background:transparent; //atau gunakan kode warna yang sesuai dengan tema website anda
   margin-bottom:10px; //atur sesuai yang anda inginkan
 }

Tips dan trouble shooting breadcrumbs

Jika dengan kedua cara diatas, breadcrumbs tidak muncul. Mungkin ada fungsi breadcrumbs yang memang sengaja tidak diaktifkan oleh pengembang tema website anda. Anda bisa mengeceknya pada file woocommerce.php yang sama, dan coba cari kode sebagai berikut.

/**
 * Remove WooCommerce breadcrumbs.
 */

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

Jika memang benar ada, maka hapus saja kode tersebut. Atau non aktifkan dengan memberikan tag komen php (// atau /* */).

Bonus : kustom breadcrumbs pada halaman produk WooCommerce

Setelah berhasil dengan tips-trik memunculkan breadcrumbs pada halaman produk WooCommerce. Mungkin anda ingin membuatnya tampil beda dengan tampilan default breadcrumbs tersebut. Berikut adalah tambahan kode / skrip php yang bisa anda masukan ke dalam file function.php untuk mengkustomisasi breadcrumbs. Secara default breadcrumbs yang muncul pada halaman produk adalah sebagai berikut : Home / Jaket / Jaket Kulit Asli. Dan mungkin anda ingin menggantinya dengan : Nama-Toko » Category: Jaket » Jaket Kulit Asli. Berikut modifikasi dengan menambahkan kode php berikut ke dalam file function.php.

 add_filter( 'woocommerce_breadcrumb_defaults', 'wpjkt_ganti_text_breadcrumb',20);

 function wpjkt_ganti_text_breadcrumb( $defaults ) {
 $defaults['home'] = 'Nama-Toko'; //ganti dengan nama toko online anda
 $defaults['delimiter'] = ' » '; //atau bisa dengan yang lainnya /, >> ,# dan lain-lain
 return $defaults;
 }