Kustomisasi Breadcrumb WooCommerce

TokoDaring.Com – Kustomisasi Breadcrumb WooCommerce. Breadcrumb adalah sebuah navigasi atau jejak berupa tautan teks yang ditampilkan pada sebuah halaman website, dan umumnya ditampilkan dibagian atas halaman. Breadcrumb memberi tahu pengunjung website anda di halaman mana mereka berada pada sebuah situs website dan bagaimana mereka sampai di sana.

Kustomisasi Breadcrumb WooCommerce

Artikel Terkait :

5 Masalah Terkait Themes WordPress Yang Harus Di Antisipasi

Saat ini hampir semua tema website WordPress WooCommerce baik premium bahkan gratis memiliki fitur untuk menampilkan breadcrumb. Lalu kenapa anda mungkin masih memerlukan untuk melakukan kustomisasi WooCommerce. Anda mungkin saja menggunakan tema WordPress WooCommerce starter, seperti misalnya tema Storefront.

Tema Storefront adalah tema yang bagus untuk anda gunakan jika anda ingin membangun toko daring berbasis WordPress WooCommerce. Itu karena seluruh kemampuan dan fitur WooCommerce sudah pasti bisa di akomodir atau 100% kompatibel tanpa khawatir ada masalah. Yang menantang adalah anda mungkin akan melihat bahwa desain dan fitur tema Storefront yang sangat dasar atau minim, selebihnya anda harus melakukan kustomisasi.

Kode Snippet untuk mengkustomisasi breadcrumb WooCommerce

Termasuk artikel yang sedang kita bahas ini yaitu mengkustomisasi breadcrumb WooCommerce. Kustomisasi yang dilakukan full dengan cara mengkatrol WooCommerce Hook via file function.php. Tambahkan kode berikut ke dalam file function.php child theme atau melalui plugin editor yang memungkinkan penambahan fungsi kustom.

Hindari menambahkan kode kustomisasi khusus secara langsung ke dalam file function.php tema induk Anda karena ini akan dihapus seluruhnya saat Anda memperbarui tema.

Mengganti prefix breadcrumb

Prefix breadcrumb biasanya yang paling umum adalah kata “Home” yang memiliki link ke halaman homepage, anda bisa merubahnya dengan menambahkan kode berikut :

/*
 * Merename prefix "home" breadcrumb
 * 
 */

add_filter( 'woocommerce_breadcrumb_defaults', 'tkdr_rename_prefix_breadcrumb' );
// Jika menggunakan tema storefront, tambahkan prioritas eksekusinya, misalnya 20
// add_filter( 'woocommerce_breadcrumb_defaults', 'tkdr_rename_prefix_breadcrumb', 20 );
function tkdr_rename_prefix_breadcrumb( $defaults ) {
    $defaults['home'] = 'Sitemap';
	return $defaults;
}

Mengganti link home breadcrumb

Seperti penjelasan di atas bahwa prefix home breadcrumb akan mengarah ke halaman homepage. Jika seperti kode diatas anda mengganti dengan prefix Sitemap dan ingin supaya linknya mengarah ke halaman sitemap, anda bisa menambahkan kode berikut :

/*
 * Mengganti home link URL breadcrumb
 *
 */
add_filter( 'woocommerce_breadcrumb_home_url', 'tkdr_custom_link_breadrumb' );
// Jika menggunakan tema storefront, tambahkan prioritas eksekusinya, misalnya 20
// add_filter( 'woocommerce_breadcrumb_home_url', 'tkdr_custom_link_breadrumb', 20 );
function tkdr_custom_link_breadrumb() {
    return 'http://domain-anda.com/sitemap/';
}

Mengganti Separator breadcrumb

Separator breadcrumb yang paling umum biasanya adalah berupa simbol pemisah berupa “/”, “>>”

/*
 * Mengganti simbol separator breadcrumb
 * 
 */

add_filter( 'woocommerce_breadcrumb_defaults', 'tkdr_change_breadcrumb_separator' );
// Jika menggunakan tema storefront, tambahkan prioritas eksekusinya, misalnya 20
// add_filter( 'woocommerce_breadcrumb_defaults', 'tkdr_change_breadcrumb_separator', 20 );
function tkdr_change_breadcrumb_separator( $defaults ) {
	$defaults['delimiter'] = ' > ';
	return $defaults;
}

Artikel terkait :