X

How to Remove WooCommerce Breadcrumbs in WordPress

Snippets by IsItWP

Are you looking for a way to remove WooCommerce breadcrumbs on specific pages? The following snippets will let you remove breadcrumbs from within WooCommerce on all pages or specific pages.

Instructions:

Add one of the following snippets to your theme’s functions.php file or in a site-specific plugin.

  • This snippet will remove WooCommerce breadcrumbs on specific pages.

    add_action('template_redirect', 'remove_shop_breadcrumbs' );
    function remove_shop_breadcrumbs(){
    
    	if (is_shop())
    		remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
    
    }
    

    There are several functions you can use on line 4 to remove breadcrumbs from specific pages in WooCommerce. Here are a few examples:

    
    if(is_shop()){ ... } // shop page
    
    if(is_front_page() ){ ... } // static front page
    
    if(is_home()){ ... } // default page
    
    
  • This snippet will remove WooCommerce breadcrumbs on all pages.

    remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
    

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: 27 best WordPress themes for affiliate marketing and how to save partial form data in WordPress.

Comments  Leave a Reply

  1. how to remove for user logged in admin panel.
    .woocommerce-embed-page .woocommerce-layout__header .woocommerce-layout__header-breadcrumbs {
    display: none !important;
    }
    ++this doesn’t work

  2. Alternatively what I did is just go into; Appearence, Customise and add this to your Additional CSS:

    .woocommerce-breadcrumb {
    text-align: left;
    font-size: 0.6875rem;
    margin-bottom: 0.3125rem;
    display: none;
    }

    1. @CLAIRE – Best answer. Simple, fast, works! Add one simple line of CSS, and done! THANK YOU!

    2. Claire, all you really need is:

      .woocommerce-breadcrumb {
      display: none;
      }

      Why style it further if you’re not going to show it. I recommend this instead. 🙂

      1. this is the simple way without editing your theme… which gets overwritten if you ever update your theme. great thank you!

        1. CSS can also be added via the customizer or via a Child theme. This way the CSS won’t get overridden each time the theme is updated.

      2. Thanks Caroline!

    3. Perfect solution for me. Divi Theme.

  3. This code works:

    /**
    * Remove the breadcrumbs
    */
    add_action( ‘init’, ‘woo_remove_wc_breadcrumbs’ );
    function woo_remove_wc_breadcrumbs() {
    remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0 );
    }

  4. Worked great! So simple. Thank you!

  5. Didin’t work for me

  6. It doesn’t work

  7. it really works, I insert the code in theme functions.php

  8. Sorry. I tried this and it isn’t working. Any other workaround?

    1. It works fine… You’re just doing it wrong.

  9. Thanks

  10. I have been searching for a fix to remove breadcrumbs from a new site for 3 days. I finally stumbled upon your code. It works great!! Thanks,

    1. Good to know, Jack! I’m glad it helped.

Add a Comment Cancel reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[60% OFF Today!]
[60% OFF Today!]
[10% OFF Today!]
[10% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]