Woocommerce How To Hide Breadcrumb Navigation

WooCommerce: How to Hide Breadcrumb Navigation (The Easy Guide for Beginners!)

Breadcrumb navigation. Sounds fancy, right? In WooCommerce, it’s that little line of links you see at the top of your product or category pages, showing the visitor their path: Home > Category > Product. While breadcrumbs are generally great for user experience and SEO, there are times you might want to hide them. Maybe they clash with your design, or perhaps you have a unique navigation system already in place.

This article will walk you through simple methods to hide breadcrumbs in your WooCommerce store. No coding experience required for some options! We’ll cover everything in a way that’s easy to understand, even if you’re brand new to WooCommerce.

Why Hide Breadcrumbs in WooCommerce?

Before diving into the “how,” let’s briefly cover the “why.” Here are a few common reasons:

• Design Conflicts: Breadcrumbs might not visually align with your carefully crafted website design.
• Redundant Navigation: If you have a sticky, well-defined main navigation, breadcrumbs might feel repetitive.
• Mobile Responsiveness: On small screens, breadcrumbs can sometimes break the layout or take up valuable screen real estate.
• Simplified User Experience: Sometimes, a simpler, cleaner look is preferred, and breadcrumbs can be seen as unnecessary clutter. Imagine a minimalist store selling high-end watches – the breadcrumbs might detract from the product’s visual appeal.
• Special Landing Pages: You may create landing pages for specific promotional campaigns. Hiding breadcrumbs ensures visitors focus only on the campaign message.

Method 1: Using the WooCommerce Settings (Simplest!)

The easiest way to disable breadcrumbs is often directly within your WooCommerce settings. However, not all themes support this option in the WooCommerce settings. If you don’t see the option outlined below, proceed to the other methods.

Steps:

1. Go to WooCommerce > Settings > Products.

2. Look for a section related to Display or Product Display. (The exact wording may vary depending on your WooCommerce version).

3. See if there’s an option to Enable breadcrumbs or Show breadcrumbs on product pages.

4. If you find it, uncheck the box or set the option to “No.”

5. Save your changes.

Important Note: As mentioned before, the presence of this option depends on your active theme. If your theme doesn’t offer this, try the following methods.

Method 2: Using Custom CSS (Easy & Theme-Independent)

This method uses CSS (Cascading Style Sheets) to visually hide the breadcrumbs. CSS is how websites control the look and feel of elements. This is usually the most versatile and recommended method for hiding elements.

1. Identify the Breadcrumb’s CSS Class: Right-click on the breadcrumb area on your website (on a product or category page) and select “Inspect” or “Inspect Element” in your browser’s developer tools (usually accessed by pressing F12). Look for the HTML element containing the breadcrumbs and note its CSS class. Common classes might be:

• `woocommerce-breadcrumb`
• `.breadcrumb`
• `.breadcrumbs`
• `nav.woocommerce-breadcrumb`
• `div.woocommerce>nav.woocommerce-breadcrumb`

2. Add the CSS Discover insights on How To Use Elegant Themes Divi To Set Up Woocommerce Code: There are a few ways to add custom CSS:

• WordPress Customizer: Go to Appearance > Customize > Additional CSS. Paste the following code, replacing `[your-breadcrumb-class]` with the actual class you found:

.woocommerce-breadcrumb {

display: none !important;

}

• Child Theme’s `style.css`: If you’re using a child theme (which is highly recommended for customizations), add the CSS code to the `style.css` file in your child theme’s directory. This is the cleanest approach.
• Theme Options (if available): Some themes have a dedicated area for adding custom CSS within their theme options panel. Check your theme’s documentation.

Explanation of the CSS code:

• `.woocommerce-breadcrumb`: This is the selector, targeting the element with the specified class.
• `display: none;`: This CSS property hides the element.
• `!important`: This ensures that your CSS rule overrides any conflicting styles set by your theme. Use it carefully, as excessive use can make your CSS harder to manage.

3. Save and Check: Save your changes and refresh your website. The breadcrumbs should now be gone!

Example: If your inspector shows the breadcrumb’s class is `nav.woocommerce-breadcrumb`, you’d use this CSS:

nav.woocommerce-breadcrumb {

display: none !important;

}

Method 3: Using PHP Code (Advanced – Use with Caution!)

This method involves adding PHP code to your theme’s `functions.php` file or a custom plugin. This is more technical and requires a basic understanding of PHP. Mistakes can break your website, so proceed with caution and back up Explore this article on How To Get Default Settings In Woocommerce your website before making any changes!

1. Access your `functions.php` file: The simplest is to go to Appearance > Theme File Editor and make sure you’re editing the `functions.php` file for your currently active theme (ideally a child theme). Alternatively, you can use an FTP client or your hosting provider’s file manager.

2. Add the code: Add the following PHP code to the `functions.php` file:

 remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 ); 

3. Save Changes: Save the `functions.php` file.

Explanation of the code:

• `remove_action()`: This is a WordPress function that removes a previously added action hook.
• `’woocommerce_before_main_content’`: This specifies the action hook where the WooCommerce breadcrumbs are usually displayed.
• `’woocommerce_breadcrumb’`: This is the function that generates the breadcrumbs.
• `20`: This is the priority of the action.

Explore this article on How To Change Term And Condition Text In Woocommerce

• `0`: This Read more about How To Tell What Images Are Used In Woocommerce is the number of arguments passed to the function.

Important Notes for PHP Method:

• Child Theme is a MUST: Always use a child theme when making changes to `functions.php`. Updating your main theme will overwrite your changes, and your breadcrumbs will reappear.
• Backup First: Before making any changes to `functions.php`, back up your website!
• Syntax Errors: Be extremely careful with syntax (commas, semicolons, etc.). Even a small error can break your website.
• Functionality Conflicts: In rare cases, this code might conflict with other plugins or theme functions. If you experience issues, try temporarily disabling other plugins to identify the conflict.

Choosing the Right Method

• Simplest (and potentially available): Check WooCommerce settings first.
• Most Versatile and Recommended: Use CSS. It’s easy, theme-independent, and doesn’t require code knowledge.
• Advanced (Use with caution): Use PHP only if you’re comfortable with code and need a more programmatic solution.

Remember to clear your browser cache after making changes to see the updated results. Good luck hiding those breadcrumbs!