How To Remove Breadcrumbs Woocommerce

How to Remove Breadcrumbs in WooCommerce: A Comprehensive Guide

Introduction:

Breadcrumbs are navigational aids that show users the path they’ve taken to reach a specific page on your website. In WooCommerce, they typically appear near the top of product pages and category archives, providing a helpful trail for visitors to navigate back to higher-level pages. While generally beneficial for SEO and user experience, there are instances where you might want to remove breadcrumbs from your WooCommerce store. Perhaps they clash with your website’s design, or you’re aiming for a cleaner, more minimalist aesthetic. Whatever your reason, this article will guide you through the various methods you can use to effectively remove breadcrumbs from your WooCommerce store. We’ll cover options ranging from code snippets to plugin solutions, ensuring you find the most suitable approach for your needs.

Main Part: Methods for Removing Breadcrumbs in WooCommerce

There are several ways to remove WooCommerce breadcrumbs, each with its own advantages and disadvantages. Let’s explore the most common methods:

1. Using CSS (The Simplest Approach)

The quickest and easiest method is often to simply hide the breadcrumbs using CSS. This doesn’t technically *remove* them from the code, but it makes them invisible to users. This is fine for minor aesthetic tweaks but less ideal for SEO as the breadcrumbs are still rendered in the HTML.

Here’s how to do it:

• Navigate to: Appearance > Customize > Additional CSS in your WordPress dashboard.
• Add the following CSS code:

.woocommerce-breadcrumb {

display: none !important;

}

• Click “Publish” to save your changes.

The `!important` rule ensures that this CSS overrides any other styles that might be affecting the breadcrumbs.

2. Removing Breadcrumbs via Theme’s `functions.php` File (Recommended for Custom Themes)

A more robust method is to use a code snippet in your theme’s `functions.php` file. This approach *unhooks* the breadcrumbs function, effectively preventing it from rendering in the first place. This is generally preferred over the CSS method as it prevents the extra (albeit small) overhead of rendering and then hiding the element.

Warning: Before editing your `functions.php` file, always create a backup of your theme. Incorrect code can break your website. Alternatively, use a child theme to avoid losing your changes during theme updates.

Here’s the code you’ll need:

add_action( 'init', 'remove_woocommerce_breadcrumbs' );
function remove_woocommerce_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Explanation:

• `add_action( ‘init’, ‘remove_woocommerce_breadcrumbs’ )`: This line schedules the `remove_woocommerce_breadcrumbs` function to run during the WordPress initialization process.
• `remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0 )`: This is the crucial line that removes the WooCommerce breadcrumb function. Let’s break it down:
• `woocommerce_before_main_content`: This is the WordPress hook where the breadcrumbs are typically added in WooCommerce.
• `woocommerce_breadcrumb`: This is the function responsible for displaying the breadcrumbs.
• `20`: This is the priority of the `woocommerce_breadcrumb` function. You need to use the same priority number to successfully remove it.
• `0`: This is the number of arguments passed to the `woocommerce_breadcrumb` function (in this case, none).

To add this code:

• Navigate to: Appearance > Theme File Editor (make sure you are editing your child theme if you have one!)
• Find the `functions.php` file.
• Add the code snippet to the bottom of the file.
• Click “Update File.”

3. Using a Plugin (The Easiest, but Potentially Bloated, Approach)

Several plugins can manage various aspects of your WooCommerce store, including breadcrumbs. While convenient, using a plugin solely for removing breadcrumbs might be overkill. Consider this option if you’re already using a plugin with similar functionality.

Examples of such plugins include:

• Yoast SEO: Yoast SEO has breadcrumb settings, allowing you to completely disable them or customize them significantly.
• Rank Math SEO: Rank Math is another SEO plugin offering similar breadcrumb control.
• Code Snippets Plugin: Instead of directly editing `functions.php`, you can use a plugin like “Code Snippets” to safely add and manage PHP code snippets without touching the core theme files.

The advantage of using a plugin is the ease of use. Simply install and activate the plugin, then navigate to its settings to find the breadcrumb options and disable them.

The potential disadvantage is plugin bloat. Installing a plugin solely for this small task might add unnecessary code and potentially slow down your website.

4. Editing Template Files (The Most Complex Approach – Not Recommended for Beginners)

This method involves directly editing the template files responsible for displaying the breadcrumbs. This is not recommended unless you’re an experienced developer with a strong understanding of WooCommerce templates.

Why it’s not recommended:

• Risk of breaking your site: Incorrect modifications to template files can lead to serious errors.
• Update issues: Changes to core WooCommerce templates can be overwritten during updates, requiring you to reapply your modifications.
• Child theme requirement: You *must* use a child theme when modifying template files to prevent losing your changes during theme updates.

How to do it (with caution):

1. Identify the correct template: The template file responsible for displaying breadcrumbs is usually located in `/woocommerce/templates/global/breadcrumb.php`.

2. Copy the file to your child theme: Create the same directory structure in your child theme (e.g., `/your-child-theme/woocommerce/templates/global/breadcrumb.php`) and copy the file into it.

3. Edit the copied file: Open the copied `breadcrumb.php` file in your child theme and remove or comment out the code responsible for displaying the breadcrumbs. This might involve removing the entire `woocommerce_breadcrumb()` function call or commenting out the relevant HTML.

<?php
/**
Shop breadcrumb
* This template can be overridden by copying it to yourtheme/woocommerce/global/breadcrumb.php.
* HOWEVER, on occasion WooCommerce will need to update template files and you
(the theme developer) will need to copy the new files to your theme to
maintain compatibility. If you copy this file to your theme, WooCommerce
will attempt to load the template file from your theme rather than the
WooCommerce template file.
* @see         https://docs.woocommerce.com/document/template-structure/
@package     WooCommerceTemplates
@version     2.3.0
@see         woocommerce_breadcrumb()

*/

if ( ! defined( ‘ABSPATH’ ) ) {

exit;

}

// This code displays the breadcrumbs, remove or comment it out to hide them.

// woocommerce_breadcrumb(

// [

// ‘delimiter’ => ‘ ⁄ ‘,

// ‘wrap_before’ => ‘

‘,

// ‘before’ => ‘‘,

// ‘after’ => ‘‘,

// ]

// );

Conclusion:

Removing breadcrumbs in WooCommerce can be accomplished through various methods, each with its own level of complexity. For most users, using CSS or a code snippet in the `functions.php` file of a child theme is the recommended approach. CSS is the simplest for quick aesthetic changes, but using `functions.php` to unhook the breadcrumb function is generally better for performance and SEO. Plugins offer convenience but may introduce unnecessary bloat. Editing template files is best left to experienced developers. Before making any changes, always back up your website or use a child theme to prevent data loss or site breakage. By carefully selecting the right method, you can successfully remove breadcrumbs from your WooCommerce store and achieve the desired look and feel for your website.