How To Remove WooCommerce Breadcrumbs

You might not know it by its actual name but you are probably familiar with the tiny text links listed above the categories and products for sale on your WooCommerce store. These links are known as breadcrumbs or a breadcrumb trail and, yes, the name does originate with the famous Hansel and Gretel fairy tale.

Breadcrumbs are meant to show a heirarchy of content on a website and give users a quick means of navigating back and forth along that chain of information. For a WooCommerce site, that typically starts with the store’s front page and then goes from category, to sub-category and finally settles on an individual product.

This screenshot shows a typical breadcrumb trail on a WooCommerce store using the popular Storefront theme.

WooCommerce Breadcrumb Navigation
An example of Breadcrumb Navigation in WooCommerce

Breadcrumbs are a great way to give users an alternative navigation method when browsing your store but there are reasons you might find yourself wishing these links weren’t being display to your customers.

  • Your store doesn’t have a huge amount of categories or products to warrant breadcrumbs.
  • The WooCommerce theme your store uses is displaying the breadcrumb trail in an unattractive way that you don’t like the look of.

So how do you remove breadcrumbs from your site?

To do this manually requires editing some files in your theme, or creating a child theme if you want to do it properly, and then adding some code depending on a few different variables. Let’s go through the procedure.

How to Hide WooCommerce Breadcrumbs with Code

You can remove WooCommerce breadcrumbs from your theme with some code changes. There are a few steps involved and a lot can go wrong if you don’t pay attention. Follow these instructions carefully.

Warning! Please create a full backup of your WordPress site before proceeding. You should do backups on a regular basis but it’s important now when we are going to be messing around with code changes. If there is a problem you can use your backup to restore your site to its previous state.

Make a Child Theme

WordPress has a neat system for safely making changes to themes. When you have a theme you want to tweak you create something called a child theme. You can learn more about child themes, and how to make one, from a great Smashing Magazine tutorial. A child theme, in short, allows you to safely adjust your site’s look or code without worrying about future updates to your real theme replacing your changes in the future.

Add Code to the Child Theme

For simplicity’s sake, know that most code in a theme takes place inside of a file called functions.php. Create a file with that name in your new child theme and then add the following lines of code. Double-check for typos or mistakes and then save the file when you are done.

add_action( 'init', 'my_remove_breadcrumbs' );
function my_remove_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

Upload the Child Theme

Now it is time to get your child theme on your WooCommerce site’s server. You can upload themes via the WordPress admin’s Appearance section pretty easily. You will need to compress the child theme into a .zip file first.

Your other option is to upload the whole child theme directory right to the server with FTP. There are plenty of free FTP programs you can use and instructions on how to use them, and to connect to your server, should be available on your hosting provider’s website. If you struggle figuring it out we suggest you reach out to your host’s support channels for help.

Are you looking for a simple solution? You don’t have to go through the process of making your own child theme, editing files, and upload them to your site. Learn how our Remove WooCommerce Features plugin can help you save time.

Activate the Child Theme

When your child theme is successfully uploaded to the server you should see it under Appearance in the WordPress admin. If it’s not there you make a mistake with the upload process. Assuming everything went ok, just activate the child theme and your breadcrumbs should vanish from the site right away.

In a situation where the WooCommerce breadcrumbs still remain or your site is down then go back through and check your code one more time. Make any changes and then repeat the upload processes again.

Eventually, you’ll get it working Congratulations! You’ve done more work than the average site owner ever does on their own site. Of course, that was a lot of effort for something so simple. You can hire a WordPress or WooCommerce developer to handle this for you. Or you can save time and money and use our plugin.

How to Disable WooCommerce Breadcrumbs the Easy Way

Remove WooCommerce Features can take care of disabling breadcrumbs throughout your site. The process only takes a few moments.

First, purchase Remove WooCommerce features and install and activate it on your site. Then follow these simple steps.

Step #1

Go to the WooCommerce section of your WordPress installation’s admin menu and click the link that says Remove Features.

WooCommerce Admin Menu

Step #2

Find the setting for Breadcrumb Navigation and click the checkbox so that it’s marked like so:

Remove WooCommerce Features - Breadcrumb Navigation

Step #3

Press the button.

That’s all there is to it. Our Remove WooCommerce Features plugin will now automatically remove the breadcrumbs from your store. The change is reflected immediately as soon as you browse to your site the breadcrumbs will be gone.

The best part about this is that your change will work no matter what theme you are using now or in the future. There is no code maintenance to worry about, files to edit or WordPress developers to pay by the hour to make sure your WooCommerce store is free of breadcrumb navigation. The plugin takes care of everything behind-the-scenes for you.

In addition to disabling breadcrumbs, our Remove WooCommerce Features plugin lets you follow the same easy steps to remove dozens of other aspects of your store.

Remove WooCommerce Features Logo