How to Remove WooCommerce Breadcrumbs: A Simple Guide
WooCommerce breadcrumbs are a helpful navigational tool, allowing customers to easily understand their location within your online store. However, there might be instances where you want to remove them. Perhaps they clash with your website’s design, are redundant with your existing navigation, or you simply prefer a cleaner aesthetic. Whatever the reason, this article will guide you through the process of how to remove WooCommerce breadcrumbs effectively.
Introduction
Breadcrumbs are a secondary navigation aid that display a user’s path through a website. In WooCommerce, they typically appear above the product title on product pages and category pages, showing the hierarchy of categories leading to the current page. While beneficial for some, they aren’t always necessary or desirable. This guide will provide several methods to remove WooCommerce breadcrumbs without affecting the core functionality of your store.
Methods to Remove WooCommerce Breadcrumbs
There are several ways to remove WooCommerce breadcrumbs, each with its own advantages and disadvantages. Choose the method that best suits your technical expertise and comfort level.
1. Using Theme Options or Customizer
Many modern WordPress themes, especially those designed for WooCommerce, offer built-in options to disable breadcrumbs. This is often the easiest and safest method.
- Check your theme’s documentation: The exact location of this option varies depending on the theme.
- Navigate to Theme Options or Customizer: Look for sections like “Layout,” “Display Options,” or “WooCommerce Settings.”
- Search for a “Breadcrumbs” setting: You should find a toggle or checkbox to enable/disable breadcrumbs.
- Disable the breadcrumbs and save your changes.
- Access your `functions.php` file: You can access it through your WordPress dashboard: Appearance > Theme Editor > functions.php. Warning: editing this file directly can break your site. Using a child theme is highly recommended.
- Add the following code snippet:
2. Using a Code Snippet in `functions.php`
If your theme doesn’t offer a direct option, you can use a code snippet to remove the breadcrumbs. This method requires a bit more technical knowledge but is still relatively straightforward. Always back up your website before making changes to your theme’s `functions.php` file.
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
- Save the changes.
Important Note: Editing the parent theme’s `functions.php` directly is strongly discouraged. Any changes you make will be overwritten when the theme is updated. The best practice is to create a child theme and add the code to the child theme’s `functions.php` file.
3. Using a Child Theme and Template Override
This method is the most advanced and involves creating a child theme and overriding the WooCommerce template that displays the breadcrumbs. This provides the most control but requires a good understanding of WordPress and WooCommerce theming.
- Create a Child Theme: If you don’t already have one, create a child theme for your active theme. There are many tutorials available online on how to do this.
- Locate the `breadcrumb.php` template: This file is typically located in the `woocommerce/templates` directory within the WooCommerce plugin folder. You’ll need to access your server files to locate it.
- Copy the `breadcrumb.php` file to your child theme: Create a `woocommerce/templates` directory in your child theme and copy the file there. The path in your child theme should be: `your-child-theme/woocommerce/templates/breadcrumb.php`.
- Edit the `breadcrumb.php` file in your child theme: Open the file and either delete its contents or comment out all the code. This will prevent the breadcrumbs from being displayed.
- Save the changes.
4. Using CSS
While not technically *removing* the breadcrumbs, you can hide them using CSS. This is the simplest method, but it only hides them from view; the code is still present in the page source.
- Access your theme’s Customizer: Appearance > Customize > Additional CSS.
- Add the following CSS code:
.woocommerce-breadcrumb {
display: none !important;
}
- Save the changes.
Pros and Cons of Each Method
Here’s a quick summary of the advantages and disadvantages of each method:
- Theme Options/Customizer:
- Pros: Easiest and safest method. No coding required.
- Cons: Not all themes have this option.
- Pros: Relatively simple. Works if theme options aren’t available.
- Pros: Most control over the breadcrumb display. Best practice for customization.
- Pros: Simplest method. No code editing required.
Conclusion
Removing WooCommerce breadcrumbs is a relatively simple process with several options available. Choose the method that best suits your technical skill level and comfort zone. Remember to always back up your website before making any changes to your theme or code. By following the steps outlined in this guide, you can successfully remove WooCommerce breadcrumbs and customize your online store to your exact preferences.
