Are you searching for a tutorial to help you hide breadcrumbs in the WooCommerce Storefront theme? This article explores the reasons behind removing breadcrumbs from WooCommerce and provides a detailed guide on achieving this through custom PHP code.
Breadcrumbs are a navigational feature that helps users understand their location within a website and navigate it efficiently. They’re particularly useful in e-commerce platforms like WooCommerce, providing a clear path from the product back to higher-level categories or the homepage.
For example, a breadcrumb trail might look something like this: Home > Category > Sub-Category > Product Name. This structure enhances user experience (UX) by providing context and a quick way to trace steps back through the website hierarchy.
However, there are scenarios where website owners prefer to remove or hide these breadcrumbs for aesthetic reasons, to simplify the navigation, or to focus the customer’s attention on specific page elements.
Why Remove Breadcrumbs?
Here are some of the reasons why some store owners remove breadcrumbs:
- Aesthetic Simplicity – Some website designs prioritize minimalism and clean lines. Breadcrumbs might clutter the page or disrupt the overall design theme in these cases. Removing them can create a cleaner look and feel that aligns with the site’s aesthetic goals.
- User Experience Focus – In certain contexts, breadcrumbs may distract users from the main call-to-action or important content. For stores with a straightforward structure or a single product line, breadcrumbs might be unnecessary. Removing them can help focus the user’s attention on key elements like product details, add-to-cart buttons, or promotional messages.
- Mobile Optimization – On mobile devices, screen real estate is precious. Breadcrumbs can take up valuable space that could be better used for other navigational elements or product information. Removing breadcrumbs can contribute to a more streamlined mobile UX.
Implications of Removing Breadcrumbs
While there are valid reasons for hiding breadcrumbs, it’s crucial to consider the potential implications:
- Reduced Navigational Clarity – Breadcrumbs offer a clear path back to broader product categories for complex stores with multiple categories and subcategories. Removing them might confuse users or make navigation less intuitive.
- SEO Impact – Breadcrumbs can contribute to SEO by providing structured data that search engines use to understand and index the site structure. Removing them could affect how well your pages perform in search rankings.
How to Hide Breadcrumbs in WooCommerce Using Custom PHP Code
Now, let’s explore how to remove breadcrumbs from your WooCommerce site using custom PHP code.
This method involves adding code to your theme’s functions.php file, which allows for more control and customization over the default WooCommerce setup.
Step 1: Access Your Theme’s Functions.php File
Access this file by navigating to Appearance > Theme Editor in your WordPress dashboard. Select your active theme and find the functions.php file in the right-hand column. We highly recommend using a child theme for this modification to prevent losing changes when updating the parent theme.
Step 2: Add Custom PHP Code
At the end of the functions.php file, paste the following code:
/**
* Remove breadcrumbs for Storefront theme
*/
add_action( 'init', 'bc_remove_storefront_breadcrumbs');
function bc_remove_storefront_breadcrumbs() {
remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}
This code hooks into WooCommerce’s initialization process and removes the action that adds breadcrumbs to pages. Using the remove_action function specifically targets the breadcrumbs without affecting other elements. It is worth mentioning that this code only works for the Storefront theme.
Step 3: Save Changes and Test
After adding the code, click “Update File” to save your changes. Visit your site and navigate various pages to ensure the breadcrumbs are no longer displayed. It’s also good to check different devices and browsers to ensure the change is consistent across all platforms.
Here is the outcome:
Why Use the Code Snippet
- If you are new to editing the code on a WordPress site, you may break your site.
- If you have many changes, code snippets tend to be cumbersome to update since some may require an update with every WooCommerce software update. (If the hooks or filters you are using change, the code snippet may no longer work.)
- Code snippets may create vulnerability to your website security since they are from different sources (third-party developers).
- Code snippets are freely available and with no upfront costs.
- Code snippets can be quick to implement for experienced developers who can customize them further.
What is the Alternative Solution
While code snippets do great work and get the job done quickly, they have some drawbacks, and that's the reason plugins exist.
Plugins are ideally organized code snippets that are scalable, dependable, and professionally written to help you keep your site safe and customize it with ease.
To make your work easier, I have put together my 10+ years of experience into a highly useful WooCommerce product (Whideit) that is geared toward hiding all unwanted elements on your store without wasting time.
- Using Hideit is easy, and you can simply click a button to immediately disable the Add to Cart button along with the price and several other features you may want to hide from users.
- I specifically designed it to help with my day-to-day work on client projects. I found it very useful and decided to share it with the WooCommerce community.
- If you are interested, you can find it here. As one of my blog readers, do not forget to subscribe to my mailing list using the form below so that you can CLAIM your 20% OFF introductory discount for WHIDEIT.
- I also occasionally send important updates in WooCommerce to help you update or keep your site up and running effectively and safely. You can also reach out if you need any further customization or help with hiding any feature on your WooCommerce store.
Conclusion
Removing breadcrumbs from your WooCommerce site will contribute to a cleaner design, a more focused user experience, or improved mobile optimization. However, it is important to weigh these benefits against the potential navigational clarity and SEO implications.
By carefully implementing the custom PHP code provided and following best practices for site modifications, you can effectively hide breadcrumbs in WooCommerce and tailor your site’s navigation to meet your specific needs and goals. If you need to hide other sections or elements on your WooCommerce store, consider checking out the WHideIt plugin. It is loaded with many impressive features to take your store to the next level!
We hope this post helped you learn how to customize your WooCommerce store.