The right direction or guidance plays a notable role in every work. If this guide is for a website where many visitors come and spend time, then the vastness of it is not left to say. Likewise, Breadcrumb plays a vital role for guidance in giving users the best friendly user experience.
It let the users know where they came from, where they can go, and how to return Home quickly with a bit of click. In a word, it’s a footprint that lets the user navigate the whole website with ease. Or, more precisely, it makes visitors aware of their current position inside the hierarchical frame of a website.
For that reason, some people love it, and some are not. However, if you are one of those who want to remove breadcrumb from WordPress, you must face writing codes.
And if you’re a developer, then it’s ok with you because of your coding experience. But max WP users are not from the technical field. So, they’ll need developers to work for them. And it’s a bit tricky, also made them depends on developers. Hence, they want to disable breadcrumbs.
No problem, there are a few ways to turn it off without making a line of code. So, read patiently and carefully to learn the process and methods to do that.
How to Remove Breadcrumbs in WordPress:
There are only 02 simple ways to enable or disable WordPress WooCommerce breadcrumbs. For instance:
- Some Plugins that Helps
- Some Themes that Helps
You can practice both of these methods one after another as per your comfort. Okay, let’s see how these two plans work:
Plan 01 – Plugins that Helps You
You can use WooCommerce Breadcrumbs to turn it off from your WP website. To clarify, it’s a WP plugin, and you can find it on WordPress.org. It has a Separator Option, Home Text & URL Option, and much more, with 8,000 active touches.
Process of Turn Off:
- Install and Run the Plugin
- Look for Admin Dashboard
- Run to Settings
- Hit the WC Breadcrumbs
- Unfollow “enable Breadcrumbs.”
- Click the Save Change Button
This practice will help you deactivate it from all your product pages created. It’s a free, easy, and ready-to-use plugin, plus no need to change the theme.
On a quick note, a free plugin can cause you much stress. And you can find many paid plugins to solve the problem with ease. Now that you know about free and paid plugins, so take the plugin that meets your comforts.
Plan 02 – Themes that Helps You
The next practice to turn it off is with a WP theme. If it includes in the theme code, you can shut it off manually. Or, you can sharply comment on respective code lines.
For example, you can speak with the developer to reduce it. Or, in your header.php file, you can locate this code and make it how to please your needs.
Still, applying custom CSS code, the best practice for shutting it off. Almost all user loves to work with this method. A specific segment is built to merge custom CSS. On top of that, no need to alter the installed theme StyleSheets.
Process of Turn Off:
- Sign in your WP Dashboard
- Run for Theme Appearance
- Navigate to Customize
- Hit Additional CSS
- Locate Display: none; attribute
To locate CSS Classes:
- Open Browser Developers Tool
- For Windows, Press F12
- For Mac, Press command+option+J
- Now You’ll See all HTML and CSS Classes (Visible “elements” in the first tab)
- To Get the Right CSS, Verify the Header’s Breadcrumb
Now copy the CSS and paste display: none; to the accurate panel. And your CSS result will seem as,
<pre>
.Breadcrumbs {
display: none;
}
</pre>
And finally, add this to the Custom CSS box, and your work is finished.
In addition to that, I love to add one more method for the WooCommerce website to remove breadcrumbs in WordPress. Below are mentions of that.
Extra 01 Plan – Use of Themes Function.PHP File
You can also remove it through your latest theme’s function.php file with ease. But to get your job done, it needs 02 simple, easy, and effective ways to walk.
Way Number 01 – WP Theme Editor
Inside the Admin Dashboard, run for Appearance > Theme Editor > Function.php.
After that, include the below code snippet at the bottom of the file:
<pre>
/**
* 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 );
}
</pre>
The code will remove it from every page on your site entirely. And the code will display like following:
After then, clear the cache, update the file, and refresh the store to see the results.
Way Number 02 – Using Hosting/Server/VPS
First, you need to access the file manager. And your Function.php can be found in /yournamesite.com/wp-content/themes/current-theme/function.php.
When your file open, do the same work:
<pre>
/**
* 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 );
}
</pre>
After adding the code snippet, save and reload the site to observe the changes.
Summary
So, these are the topmost and the easiest way to remove breadcrumbs in WordPress as of today. And I think if you practice any of these methods, you’ll never go wrong. And also, I believe these methods will guide you to take the right direction.
But if you use these methods and can’t remove breadcrumbs from your store, please drop a line following your website URL, and we will get back to you asap.
And suppose you’re interested to know about the best Free WooCommerce Storefront websites as of today. In that case, I suggest you take a look at my other article, named Elementor WooCommerce Theme.
In conclusion, I hope you can disable the breadcrumb created by WooCommerce with the practices implied in this article. And in this Corona Pandemic situation, don’t enter or leave anywhere before wearing a mask and do regular sanitize. Good Luck.
