How to remove WooCommerce breadcrumbs

In this short tutorial, we will learn 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 relation to the website structure.

What are WooCommerce breadcrumbs?

WooCommerce breadcrumbs are navigational links displayed on an online store, presenting a hierarchical trail of links that help users trace their path back to the homepage from the current page.

Breadcrumbs show the path to the page you are on. Compared to a simple navigation menu, breadcrumbs add context to your current webpage position. They show how far you are from the top of the website and where you 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. However, some WooCommerce store 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.

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:

/**
 * Remove WooCommerce breadcrumbs 
 */
add_action( 'init', 'my_remove_breadcrumbs' );

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

We can add the code to our child themes’ functions.php file. Alternatively, you can add the code via a 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, add the following code into the “Additional CSS” field of your child Theme Customiser panel:

.woocommerce-breadcrumb {visibility:hidden;}

Remember 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:

if(is_shop()){ ... } // for the shop page
if(is_front_page() ){ ... } // for the static front page
if(is_home()){ ... } // default home page

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:

/**
 * Change the breadcrumbs code 
 */
add_filter( 'woocommerce_breadcrumb_defaults', 'change_woocommerce_breadcrumbs' );

function change_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' / ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
            'wrap_after'  => '</nav>',
            'before'      => '',
            'after'       => '',
            'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
        );
}

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 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” in the sidebar might be the right approach. We hope you find this tutorial useful.