How to remove WooCommerce breadcrumbs

In this short tutorial we will cover how to remove WooCommerce breadcrumbs from your WordPress site. Breadcrumbs are a very common website navigation method. It is used to show a visitor the hierarchy of the current page in relationship with the website structure.

Breadcrumbs show the path to the page you are on. Compared to a simple navigation menu, breadcrumbs add some context to your current webpage position. They show how far you are from the top of the website and where you actually are on the site.

Compared to a simple navigation menu, breadcrumbs add some context to your current webpage position.

WooCommerce and the Storefront theme follow this practice and show the breadcrumbs navigation at the top of every product page. Generally, using breadcrumbs navigation is considered a good web design practice. But some website owners might decide to remove the breadcrumbs navigation.

There are different steps to remove the breadcrumb from your website depending on the WordPress theme that you are using. In this post we will cover the most common ways of removing the breadcrumb. Additionally, we will explore different options to change and modify the breadcrumbs.

woocommerce remove breadcrumbs

Remove the breadcrumbs

In this article, we go over how to remove WooCommerce breadcrumbs using CSS and PHP. To remove the breadcrumbs menu using PHP we are going to use the woocommerce_before_main_content  action like this:

We can add the code to our child themes’ functions.php file. Alternatively you can add the code via dedicated code snippet plugin like the Code snippets plugin.

Another way to achieve a similar result is to use a simple CSS code. To hide the breadcrumbs from the website just add the following code into the “Additional CSS” field of your child Theme Customiser panel:

Keep in mind that this will only hide the breadcrumb navigation from the page view. The actual functionality will still be loaded in the code. This is why the PHP code snippet is the recommended one. If you want to remove the breadcrumbs from only some WooCommerce pages but not from all of them, you can if statement one of the following specific pages:

Customizing the WooCommerce breadcrumb

If instead of deleting the breadcrumbs, you want to modify some aspect of it you can do it with the following code snippet:

As you can see there are quite a few things that you can do here. You can change the:

  • breadcrumbs separator,
  • breadcrumbs “Home” text
  • CSS code wrapped around the breadcrumbs, add your custom CSS, etc.

Conclusion

Generally, breadcrumbs are considered as an improvement to website usability. But as always there are exceptions. Many shops have products with a large variety and diversity. The type of products can’t be easily classified and grouped in a single product category. For situations like this replacing the breadcrumbs navigation with something like “product tags” might be the right approach. We hope you find this tutorial useful.