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
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
Contents
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
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
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.
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
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
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
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
- Remove BreadCrumb via function.php file (this will completely remove breadcrumb)
- Remove Breadcrumb using style.css file (this will just hide breadcrumb from showing on your product page)
- 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.
