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. thank you!

  2. Martin McQueenie July 7, 2020 at 3:20 pm

    remove_action(‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0);

    Worked wonders!!

    1. This worked thank you!

  3. Thanks this one worked for me

    .woocommerce-breadcrumb {
    display: none;
    }

    1. This solution can work, but hiding in this manner is usually not recommended due to SEO reasons.

    2. This one worked for me!

  4. .woocommerce-breadcrumb {
    display: none;
    }

    Does not work for Toy Store (Child) Kava (Parent) WooCommerce Theme. I have tried every possible way and it still is there.

    1. We don’t recommend using CSS to hide content in most cases due to SEO.

  5. Does not work

    1. Are you receiving any error messages?

      1. I have removed the breadcrumbs from my site by using this code in additional CSS and also breadcrumbs in disabled from yoast seo.
        .woocommerce-breadcrumb {
        display: none;
        }
        But it I am not removing from search console I have done live test multiple time, but it is still there in search console.

  6. I’m trying to enter the css snippet, but it’s not removing the breadcrumbs. I’m using

    .woocommerce-breadcrumb {
    display: none;
    }

    Where specifically should I be putting it?

  7. Thanks CAROLINE,

    I noticed in Analytics ten percent of visitors were clicking the breadcrumb links in stead of adding the product to their cart!

    Not expecting this will be a ten point ctr increase, but less distraction is always better.

  8. 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

  9. 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.

  10. 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 );
    }

  11. Worked great! So simple. Thank you!

  12. Didin’t work for me

  13. It doesn’t work

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

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

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

  16. Thanks

  17. 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

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!