How to Remove Breadcrumbs WooCommerce Storefront

A breadcrumb trail is a type of secondary navigation scheme that reveals the location of a user inside a website or a web application. In the Storefront theme, breadcrumbs are usually found below the header of your WooCommerce Store. They are helpful in websites that have a large amount of content organized in a hierarchical manner. They are horizontally arranged text links separated by the “greater than” symbol (>). This symbol indicates the level of that page relative to the page links beside it.

Table of Contents

Remove Breadcrumbs WooCommerce Storefront

In this brief guide, I will show you how to remove breadcrumbs in the Storefront theme. Using breadcrumbs for secondary navigation is used by large websites and websites that have hierarchically arranged pages. However, you should not use breadcrumbs for single-level websites that have no logical hierarchy or grouping.

To determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

It is also worth mentioning that you should not use breadcrumbs as primary navigation. This is because you will make it hard for customers in your store to navigate through certain sections of your online store.

With all that said, let us look at how you can remove breadcrumbs in the Storefront theme. I will share two methods that you can use.

Steps to Remove Breadcrumbs in the Storefront Theme Using PHP Code

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will remove breadcrumbs in the storefront theme.
Add the following code to the php file:

/**
 * Remove Breadcrumbs
 */
add_action( 'init', 'storefront_remove_storefront_breadcrumbs' );

function storefront_remove_storefront_breadcrumbs() {

   remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

To see the outcome, refresh the Homepage and you should see this:

Steps to Remove Breadcrumbs in the Storefront Theme Using a Plugin

In this section, I am going to use the WooCommerce Breadcrumbs plugin.

This plugin allows you to restyle the WooCommerce breadcrumbs. Moreover, it gives you the ability to disable them completely so they no longer display. However, it is worth mentioning that this plugin will not style your breadcrumbs for you, but it simply gives you the tools to change the HTML that wraps around your breadcrumbs.

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
Then, we are going to install the plugin that we have indicated earlier. To download it directly in the Admin Panel, simply navigate to Plugins > Add New. After that, you will need to do a keyword search for the plugin ‘WooCommerce Breadcrumbs’. You need to install and activate it as shown below:
After installing the plugin, go to Settings > WC Breadcrumbs in your WordPress Admin Panel. This will take you to the WooCommerce Breadcrumbs page.
You need to uncheck the “Enable breadcrumbs” checkbox and click the Save Changes button to remove the breadcrumbs from all product pages as shown below:
To see the outcome, refresh the Homepage and you should see this:

Conclusion

In this post, I have highlighted that websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. It acts as a secondary navigation scheme that reveals the user’s location on a website or Web application.

Moreover, I have shared two ways to remove Breadcrumbs in the Storefront theme. In the first method, I have used a PHP code. However, if you are not familiar with altering the code in your WooCommerce store, I recommend that you use the WooCommerce Breadcrumb plugin. This will make your work easier.

Editorial Staff

How to Remove Breadcrumbs WooCommerce Storefront

Remove Breadcrumbs WooCommerce Storefront

Steps to Remove Breadcrumbs in the Storefront Theme Using PHP Code

Steps to Remove Breadcrumbs in the Storefront Theme Using a Plugin

Conclusion

Similar Articles

Related