Tag: remove woocommerce breadcrumbs

WooCommerce breadcrumbs are a piece of information that display at the top of every product page indicating the hierarchy of the product. Usually, it shows the product’s parent categories. This widget is quite helpful for customers to navigate your store. However, if you have other way to help your customer do that, the breadcrumbs would be redundant. In this post, I’m going to show you two easy ways to remove WooCommerce breadcrumbs that you can complete within a few minutes.

Method 1: Remove WooCommerce breadcrums using CSS

This is the easiest and safest way to remove WooCommerce breadcrums. You don’t need to enter PHP code, thus minimize your risk of breaking your own site.

Most of the time, your breadcrumbs has this CSS class: woocommerce-breadcrumb.

So, in order to hide it, you will enter this block of code inside: Appearance->Customize->Additional CSS

.woocommerce-breadcrumb { display: none; }

Publish the change and you should see the breadcrumb is gone.

If you prefer, I made a video tutorial here.

Method 2: Actually remove WooCommerce breadcrumb from the page

You can see that, in method 1, we only hide the breadcrumb, not actually remove that. If you want to really remove WooCommerce breadcrumb, you will need to put some code in your theme functions.php. I would recommend you create a child theme for this purpose.

For most themes, you can enter the following code at the end of your child theme’s functions.php to get the job done:

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'bc_remove_wc_breadcrumbs' );
function bc_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Specifically, if you use storefront theme, you can enter the following code:

/**
 * Remove breadcrumbs for Storefront theme
 */
add_action( 'init', 'bc_remove_storefront_breadcrumbs');

function bc_remove_storefront_breadcrumbs() {
  remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

Save the file and you should see the breadcrumb removed.

Conclusion

There you have the two effective methods to remove WooCommerce breadcrumbs. If you use method 1, make sure you copy the code when you change your site’s theme since you will need to paste it again in the customize CSS box. Actually, you may need to do the same when you use method 2.