Adding the Breadcrumbs to Storefront Without WooCommerce

If you, like me, are using Storefront without using WooCommerce, then you probably noticed that the breadcrumbs are not included by default.

This is because Storefront uses WooCommerce functions to print the breadcrumbs, before the content. But there’s another way to have that, with the plugin Yoast SEO.

Add the Necessary Code

Make sure to install Yoast SEO on your site. You can also write the breadcrumbs code by yourself if you want, and use that, but I think it’s just easier and faster to use the breadcrumbs included in this plugin.

Once you installed and activated Yoast SEO, add this code to your functions.php file in wp-content/themes/your-child-theme-name/ at the end of the file:

* Prints the Breadcrumb in Storefront using the function by Yoast SEO.
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' );

view raw


hosted with ❤ by GitHub

Then, add this style in Customizer > Additional CSS or by using your preferred method to add 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;

view raw


hosted with ❤ by GitHub

This will show the breadcrumbs on any page, except the Home page, and it will show like the one that you can see in the Storefront demo site.

Note: I chose to not show the breadcrumbs on the Home page because I don’t think it’s useful, but if for any reason you want to show it, just remove the part && ! is_home() from the PHP script to show it also on the Home.

Activate the Breadcrumbs in Yoast SEO

Once the code is ready, you need to activate the breadcrumbs in Yoast SEO, and you can do so by going to SEO > Advanced > Breadcrumbs in your Dashboard.

More Posts That You Might Like…

2 responses to “Adding the Breadcrumbs to Storefront Without WooCommerce”

  1. Thanks for your writing. Cn yiu explain tge function of this artikel?

  2. Hi, it’s wonderful. I did as what mentioned, however, the prefix font awesome home icon not appearing prior to Home menu. How can I modify the content in css? Please share.

Leave a Reply



Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Blog at

%d bloggers like this: