Posted on

Tips-trik Menambahkan Breadcrumbs Storefront WooCommerce

wpJakarta.Com – Tips-trik Menambahkan Breadcrumbs Storefront WooCommerce. Tema website storefront biasanya dipasang jika ingin membuat sebuah toko online. Sehingga pemasangan tema website storefront harus dipasang juga plugin WooCommerce. Beberapa fungsi dari tema website storefront maupun WooCommerce tidak akan bisa maksimal jika plugin WooCommerce tidak di install.

Baca juga :

Breadcrumbs

Namun sah-sah saja jika ada orang yang menggunakan tema website storefront tanpa menginstall WooCommerce, karena tujuannya untuk blogging dan bukan untuk membuat toko online. Dan salah satu fungsi yang tidak muncul adalah breadcrumbs. Tapi ada cara dan tips-trik untuk menambahkan breadcrumbs pada tema website storefront WooCommerce. Dengan dua syarat sebagai berikut :

  • Yaitu dengan menambahkan kode fungsi php untuk memunculkan breadcrumbs dan kode CSS untuk memberikan sedikit style pada breadcrumbs.
  • Syarat lainnya dengan mengaktifkan kode yoast breadcrumbs.

Tips-trik Menambahkan Breadcrumbs Storefront WooCommerce

Tips-trik Menambahkan Breadcrumbs Storefront WooCommerce

Ketikan atau tambahkan kode berikut ke dalam file function.php. Menambahkan kode tambahan ke dalam file function.php secara langsung beresiko akan kehilangan kode tersebut jika sewaktu-waktu terdapat update atau pembaruan tema website. Atau gunakan kode snippet plugin untuk menjaga kode tetap ada meskipun terdapat update tema website. Baca lebih lanjut tentang menambahkan kode fungsi tambahan menggunakan kode snippet plugin.

Tambahkan kode berikut ke dalam file function.php atau gunakan kode snippet plugin

function storefront_yoast_breadcrumb() {
	if ( function_exists( 'yoast_breadcrumb' ) && ! is_home() ) {
		yoast_breadcrumb( '<nav class="breadcrumbs">','</nav>' );
	}
}
add_action( 'storefront_content_top', 'storefront_yoast_breadcrumb' );

Setelah menambahkan kode php diatas, tambahkan kode css berikut pada kotak penambahan kode css (custom css).

.breadcrumbs {
	background-color: #f8f8f8;
	margin-left: -99em;
	margin-right: -99em;
	margin-bottom: 4.235801032em;
	padding: 1.41575em 99em;
}

.breadcrumbs a {
	color: #92969e;
	font-weight: initial;
}

.breadcrumbs > span > span > a:first-of-type:before {
	content: "\f015";
	display: inline-block;
	font: normal normal normal 1em/1 FontAwesome;
	-webkit-font-smoothing: antialiased;
	margin-right: .5407911001em;
	text-rendering: auto;
}

Aktifkan breadcrumbs plugin Yoast SEO

Setelah menambahkan kode php dan css diatas, aktifkan fitur breadcrumbs yoast SEO. Tanpa mengaktifkan fitur breadcrumbs yoast SEO atau jika tidak menginstall plugin yoast SEO, maka breadcrumbs tetap tidak akan muncul. Untuk yang mengalami error breadcrumbs pada tema website selain storefront. Kami memiliki tips-trik memperbaiki atau menambahkan breadcrumbs pada tema website selain storefront WooCommerce. Artikel ini mungkin bisa menjadi referensi. Memperbaiki Error Breadcrumbs Website WordPress.