How to Remove Breadcrumbs in WooCommerce
There is no denying that breadcrumbs play a vital role in every WooCommerce site. Especially, they are extremely effective in navigating your WooStore for customers to follow easily. It makes plenty of sense for Google to figure out how a WooCommerce website is structured.
However, there are some cases that you do not want to enable breadcrumbs within WooCommerce anymore. Or you have some other methods to assist your clients in doing that. In those cases, WooCommerce breadcrumbs are made redundant. Here we have come up with a detailed guide on how to remove WooCommerce breadcrumbs. Follow us and apply for your sites.
What are WooCommerce Breadcrumbs?
WooCommerce Breadcrumbs functions as helpful ways to navigate your WooStore. They are the things that you notice first on your product page. They specify the product hierarchy. To be more specific, they assist users in finding other items in a similar store’s category or visiting the parent category for exploring what it provides.
When you approach any site, you will encounter “Home” which refers to a link to the highest-level category by default. “Home” will connect to the WooCommerce homepage or site. In case you do not set your WooStore as the front page or homepage, you will wish this kind of link to direct to your WooCommerce store rather than the site. Or, in some cases, you might fancy set a different name for this breadcrumb in lieu of “Home”. If you aim at customizing breadcrumbs, using plugins or snippets is a perfect idea.
How to remove WooCommerce breadcrumbs?
In case you are using a different way to navigate your WooCommerce store, breadcrumbs will become redundant. So, you might need to remove them. There are several ways to perform this removal. Keep scrolling to see valuable instructions on how to remove WooCommerce breadcrumbs. Then, scrutinize each one to find out the solution to suit your store most.
1. Hide WooCommerce breadcrumbs with the use of CSS
The first thing to do is to understand what CSS is. It is known as a language that will specify how documents will be presented to online users. From how they are laid out or styled – that is what CSS will function.
When it comes to removing breadcrumbs in WooCommerce, applying CSS seems to be the safest and easiest method. The reason is that there is no requirement for experience in PHP code. Therefore, the risk that your site is broken will decrease.
On most occasions, your WooCommerce breadcrumbs come with such CSS class as “woocommerce-breadcrumb”. Hence, to remove it, your task is to go to section “Appearance”, then select “Customize” and go inside “Additional CSS”. After that you will enter the below code into that section “Additional CSS”:
.woocommerce-breadcrumb { display: none; }
After finishing, you need to publish what you have made changes. And you will see no breadcrumb at all.
Besides CSS, you can also use PHP to remove breadcrumbs in WooCommerce. By using the action “woocommerce_before_main_content”, this removal process becomes much easier. Follow the below code:
/**
* Remove WooCommerce breadcrumbs
*/
add_action( 'init', 'my_remove_breadcrumbs' );
function my_remove_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}
2. Remove breadcrumbs in WooCommerce completely from your page
In the first method, it is just hiding the breadcrumb. In case, you wish to remove them completely, you are required to add some kinds of code to the file functions.php of the child theme. So, the first thing in this method is to build your child’s theme for putting this code.
Keep continuing by entering the below code to finish your task. Remember to add the code at the end of the file functions.php in created child theme:
/**
* 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 );
}
When you are using the storefront theme, the code that you need to enter is as the below:
/**
* 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 what you have made changes and you will notice WooCommerce breadcrumbs have gone.
3. Remove WooCommerce breadcrumbs from certain pages or all pages
Are you seeking a method to implement the removal of WooCommerce breadcrumbs from certain pages or every page in your store? In this situation, we also come up with a helpful way that will meet your need and expectation. By applying snippets, you can remove breadcrumbs in WooStore from certain pages or all pages.
- Remove breadcrumbs in WooCommerce from certain pages
In case you do not want to witness the appearance of WooCommerce breadcrumbs in your store or you have another alternative to these breadcrumbs, see our below snippet:
add_action('template_redirect', 'remove_shop_breadcrumbs' );
function remove_shop_breadcrumbs(){
if (is_shop())
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
}
As you could see in the fourth line, there exist some functions for removing breadcrumbs from certain pages within WooCommerce. See the following examples to understand the step-by-step guide:
if(is_shop()){ ... } // shop page
if(is_front_page() ){ ... } // static front page
if(is_home()){ ... } // default page
- Remove breadcrumbs in WooCommerce from all pages
You can also implement the action of removing breadcrums in WooCommerce from every page. To do this, enter the following code:
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
4. Remove WooCommerce breadcrumbs with the use of the page builder
Do you know that there is a method that you could remove WooCommerce breadcrumbs without relying on writing code or any developer? The page builder functions as a theme component or a plugin to help you design as well as structure pages without spending much time and effort. To be more particular, this page builder could be seen as one visual editor’s advanced version.
So, what can you do with that kind of page builder? You are able to construct a brand-new product page with the use of no single code. Your task is to build a copy that bears the exact resemblance to the default product page of WooCommerce. After that, improve your design which will meet your requirements.
The next simple step is to switch to the page builder on your store’s product page. Then, it is a need to build your page without breadcrumbs in WooCommerce. This means you are removing them from your product page.
5. Remove breadcrumbs within WooCommerce with the use of a theme
Using the WordPress theme to remove WooCommerce breadcrumbs is also one of the best methods. In this situation, one suggestion is to apply the Astra theme. The benefits are its easy-to-use and free feature. This kind of theme promises to enable your working process with WooCommerce to be trouble-free by offering myriad great features. Now, let’s see how you could utilize the Astra theme to remove the breadcrumbs of WooCommerce.
- Install Astra theme
To use this theme, the requirement is to install, then activate it. Get started by logging into the dashboard of your WordPress. Next, proceed to the section “Appearance”, then choose “Themes”, and navigate to “Add New”.
In this “Add New” section, search for theme Astra, click “Install” to set it up, and then activate it. Be noted that if you need the Astra theme’s zip file, you could download the file from your WordPress Repository.
- Execute to remove WordPress breadcrumbs
Once you have done installing and activating the Astra them, it is time for this theme to help you remove breadcrumbs within WooCommerce. Approach your site’s front-end, then pick up “Customize” which lies in your site’s top bar.
After clicking that link, you will go to the panel of WordPress Customizer. In this section, choose “Layout”, and select “WooCommerce” before picking up “Single Product”. Here, you choose the checkbox “Disable Breadcrumb” and select the button “Publish”.
Congratulation! You have done removing WooCommerce breadcrumbs.
6. Remove breadcrumbs of WooCommerce with the use of a plugin
Apart from using a theme for the removal of WooCommerce breadcrumbs, applying a plugin to perform this is also a perfect method. There is a free and simple plugin named WooCommerce Breadcrumbs. This kind of plugin lets you restyle your WooCommerce breadcrumbs. Additionally, it also brings about an opportunity to disable and remove them completely.
By modifying the HTLM which is surrounding the breadcrumbs, you could restyle your breadcrumbs simply. Follow us strictly with the below instruction on how to remove WooCommerce breadcrumbs with the assistance of a free plugin.
- Install WooCommerce Breadcrumbs
Start with uploading the folder “woocommerce-breadcrumbs” to your directory “/wp-content/plugins/”. After that, activate it via the menu “Plugins” in your WordPress. Another step is to navigate to your menu “Settings” and choose “WC Breadcrumbs” for updating the settings of this plugin.
- Use the plugin to remove WooCommerce breadcrumbs
When you are at the panel of “WordPress admin”, you land on a page of WooCommerce Breadcrumbs. Once you are here, your task is to uncheck the checkbox “Enable breadcrumbs”. Next, choose the button “Save Changes” to make sure your action is recognized. And that is, you have finished removing breadcrumbs from every product page.
Final words
WooCommerce breadcrumbs are useful, but they might not be necessary for some situations. Just remove them if you have other alternatives. With this guide, hope that you can now find it easy to remove WooCommerce breadcrumbs. See which methods will suit your needs and expectations. Keep subscribing to us for many more enjoyable as well as helpful pieces of articles.
