This is How to Easily Remove WooCommerce Breadcrumbs from Your Shop, Categories, and Tags Pages
As an ecommerce store owner using WooCommerce, you may have noticed those navigation breadcrumbs appearing at the top of your shop, category, and tag pages. While breadcrumbs can be helpful for user navigation on certain pages, they're often unnecessary clutter on your core product listing pages.
Removing those WooCommerce breadcrumbs can help streamline your page design, improve loading times, and create a cleaner, more focused shopping experience for your customers. In this article, we'll walk you through two simple methods to banish those pesky breadcrumbs for good.
Why You Should Remove WooCommerce Breadcrumbs
Breadcrumbs are a type of secondary navigation that show users their current location within a website's hierarchy. They're often displayed at the top of a page, making it easy for shoppers to see where they are and quickly navigate back to higher-level categories or the homepage.
However, on core ecommerce pages like your main shop, individual product categories, and tag archives, breadcrumbs don't always serve a useful purpose. Here are a few reasons why you might want to remove them:
-
Cleaner Page Design: Breadcrumbs take up valuable real estate at the top of your pages. Removing them can create a more streamlined, visually appealing layout.
-
Faster Page Loading: Even though breadcrumbs are a relatively small element, they still add some extra weight to your pages. Removing them can shave a few milliseconds off your page load times, which is crucial for user experience and SEO.
-
Better User Focus: Without breadcrumbs drawing the eye, your customers will be more likely to focus on the main content of the page – your product listings, category descriptions, and other crucial ecommerce elements.
-
Consistent Branding: If breadcrumbs don't align with your overall website design and branding, removing them can help create a more cohesive visual experience.
In short, getting rid of those WooCommerce breadcrumbs can be a simple way to optimize your online store's performance and user experience. Let's dive into how to actually make it happen.
How to Remove WooCommerce Breadcrumbs with CSS
The easiest way to remove WooCommerce breadcrumbs is by using CSS. Here's the code you can add to your theme's stylesheet or custom CSS section:
.woocommerce-page section#title {
display: none;
}
This will completely hide the breadcrumbs section on your shop, category, and tag pages. However, it's important to note that this method isn't the most ideal solution.
Even though the breadcrumbs will be visually hidden, they will still be present in the HTML structure of your pages. This means they'll still be loaded and take up a small amount of time and resources during the page load process.
How to Remove WooCommerce Breadcrumbs with PHP
For a more comprehensive solution, you can use PHP to completely remove the breadcrumbs code from your pages. Here's how:
- Go to your theme's
functions.php
file and add the following code at the end:
// Remove breadcrumbs from shop & categories
add_filter( 'woocommerce_before_main_content', 'remove_breadcrumbs');
function remove_breadcrumbs() {
if(!is_product()) {
remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0);
}
}
This code will remove the breadcrumbs from your shop and category pages, but leave them intact on individual product pages.
- If you want to remove the breadcrumbs only from the main shop page (and leave them on category pages), you can modify the code like this:
// Remove breadcrumbs only from shop page
add_filter( 'woocommerce_before_main_content', 'remove_breadcrumbs');
function remove_breadcrumbs() {
if(!is_product() && !is_product_category()) {
remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0);
}
}
- You can also remove the breadcrumbs based on specific page IDs or slugs using the following code:
add_action('template_redirect', 'remove_page_breadcrumbs' );
function remove_page_breadcrumbs(){
if (is_page('YOUR_PAGE_ID_OR_SLUG'))
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
}
Replace 'YOUR_PAGE_ID_OR_SLUG'
with the actual ID or slug of the page(s) where you want to remove the breadcrumbs.
The key advantage of using PHP to remove the breadcrumbs is that it completely eliminates the breadcrumb code from your pages, rather than just hiding it. This results in faster page loading times and a cleaner, more efficient website.
Conclusion
Removing WooCommerce breadcrumbs from your shop, categories, and tags pages is a simple but effective way to improve your online store's performance and user experience. Whether you choose to use CSS or PHP, both methods are easy to implement and can have a noticeable impact on your website.
Remember, the key is to strike the right balance between providing helpful navigation tools for your customers and maintaining a clean, focused design. By selectively removing breadcrumbs from certain pages, you can create a more streamlined shopping experience that keeps your customers engaged and coming back for more.
If you're looking for more ways to optimize your WooCommerce store and boost your conversion rates, be sure to check out Flowpoint.ai. Our AI-powered analytics and optimization tools can help you identify and fix technical, UX, and content-related issues that may be hindering your sales
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.