Woocommerce tutorials

How to remove breadcrumbs in Woocommerce (WordPress)

Pinterest LinkedIn Tumblr

Breadcrumbs or Breadcrumbs trail is a type of navigation card with many different hierarchical links usually placed at the top of the page. To make things easier to understand, Breadcrumbs is a hierarchical anchor text link usually located at the top of the page.

The typical structure of Breadcrumbs can be written in the following form:

  • Home (Home)> Category> Subpage> Posts>…
  • Home (Home)> First viewed page> Second viewed page> …

Here is an example of breadcrumb in woocommerce

breadcrumb

By default, you will see breadcrumb in every page in Woocommerce product page.

In this tutorial, we will go through how to remove breadcrumb from product page in Woocomerce

Remove Breadcrumb in Woocommerce using function.php file

You can remove Woocommerce BreadCrumb using your current theme’s function.php file

There are 2 methods to edit this file:

Method 1: Using wordpress’s theme editor (the easiest and fastest way)

In WordPress admin section, go to Appearance > Theme Editor > Function.php

edit function php file

Next, insert the following code snipet at the end of this file

/**
 * Remove breadcrumbs in Woocommerce - Wooexplorer.com
 */
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

These code lines will completely remove breadcrumb from every page in Woocommerce

It will be like this after you insert the code

save function file

Finally, update file and refresh your store, clear cache to see the result

Method 2: You need to have access to file manager on your hosting/server/vps

Function.php can be found in /yourwebsite.com/wp-content/themes/your-current-theme/function.php

You can use Cpanel file manager or if you have ftp/sftp access you can use 3rd party file manager programs like: Winscp, Filezilla to manage files on your website.

edit function php file winscp
Using winscp to edit file on server

After you open the file, do the same as method 1 by inserting the following code:

/**
 * Remove breadcrumbs in Woocommerce - Wooexplorer.com
 */
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Save file then refresh your site to see the change

Remove Breadcrumb in Woocommerce using style.css

There’s another way to remove breadcrumb using style.css file of your theme

Method 1: Using wordpress’s theme editor (the easiest and fastest way)

In WordPress admin section, go to Appearance > Theme editor > Style.css file

edit style.css file

Next, insert these lines at the end of this file and save change

.woocommerce-breadcrumb {
visibility:hidden;
}

The code above will hide breadcrumb visually (that means breadcrumb still exists but you can not see it on your website)

Method 2: access and edit style.css file in your file manager

Style.css file of your current theme is located in /yourwebsite.com/wp-content/themes/your-current-theme/style.css

Add the code in method 1 at the end of this file and save change:

.woocommerce-breadcrumb {
visibility:hidden;
}

Note: in some cases, the css class of bread crumb is not woocommerce-breadcrumb  due to theme or plugin overide. If you don’t see breadcrumb hidden after applying the css above => You need to find the breadcrumb css class of your website.

You can use inspect tool of Chrome/Firefox to do that, for example, this site is running under Woocommerce but css class of Breadcrumb is page__breadcrumbs

inspect tool chrome

After finding out the css class of breadcrumb, do some adjust to the code and the breadcrumb will be hidden.

.page__breadcrumbs {
visibility:hidden;
}

Remove Breadcrumb in Woocommerce using WordPress plugin

If you find the above methods is too complicated, you can try the follow plugin

WooCommerce Breadcrumbs

Go to plugin option and disable breadcrumb

Finally, refresh your page to see the change

Wrapping up

In this tutorial, I mentioned 3 methods to hide/remove breadcrumb from Woocommerce product page

  1. Remove BreadCrumb via function.php file (this will completely remove breadcrumb)
  2. Remove Breadcrumb using style.css file (this will just hide breadcrumb from showing on your product page)
  3. Remove using a plugin (the easiest way)

If you use my method but still can’t not remove breadcrumb from your Woocommerce store, please drop a line below with your website URL and I will check it for you.

Hung Tran is the author of Wooexplorer.com, he loves to share knowledge about Woocommerce and Wordpress

Write A Comment