How to Customize WooCommerce Breadcrumb?

Breadcrumbs are an essential part of any eCommerce website that helps customers easily go around the sites, which offers visitors a great user experience. In this article, we are sharing with you the overall background on the breadcrumb navigation, and show you 3 different ways to customize WooCommerce breadcrumb and the way to remove it. Along with that, we also mention some of the best WooCommerce plugins for changing breadcrumb appearance on WordPress sites.

What is breadcrumb navigation?

As mentioned before, breadcrumbs are footprints which is a vital navigation part of any eCommerce site. They help your visitor navigate your WordPress website in an organized way, which is very useful especially in shops with hundreds of products.

In such online shops, products are frequently grouped into categories, subcategories, and sub-subcategories. It may take several clicks to return to one of the earlier levels in the hierarchy once a user has gone deep down the hierarchy. With suitable breadcrumb navigation, you can help customers to go back to any level above in the hierarchy easily. That will give the customers a great shopping experience while shopping on your online store.

However, WooCommerce does not support the breadcrumb navigation feature by default. In the sections below, we are presenting you how to add and change the appearance of the WooCommerce breadcrumb menu in your WordPress site.

The Benefits of Adding Breadcrumbs to Your WooCommerce Store

Below is a quick look at some major benefits of adding breadcrumbs to your WooCommerce store.

• Improve customer experience: Customers do not want to get lost in a WooCommerce store with no clue where to find related products or web pages. Breadcrumbs reduce visitors’ confusion by making it easy for them to know what page they are on and where to click to go to their desired web page.
• Boost SEO: Breadcrumb navigation makes your WooCommerce store easier to crawl for search engines and allows them to figure out your site’ structure more quickly. As a result, it enhances the chance of your online store appearing in search results.
• Reduce the bounce rate: Breadcrumbs reduce the bounce rate because they encourage visitors to explore and navigate through your WooCommerce store. If they find it hard to locate a web page on your website, they may rather go to your competitors.

Unfortunately, WooCommerce does not support the breadcrumb navigation feature by default. In the sections below, we are presenting you with how to add and change the appearance of the WooCommerce breadcrumb menu on your WordPress site.

Some of these methods require you to modify some core files. Even though the snippets are very simple, to avoid any issues, we highly recommend you use a child theme. This makes the process of making changes to your theme much safer and won’t revert the changes when you update your theme.

Some of these solutions involve the change of core theme files. Although the code snippets are easy, we strongly advise you to create and use a child theme to avoid any complications.

Now, let’s get strated!

How to Enable Breadcrumbs in WooCommerce?

Breadcrumb navigation is not available in the default WooCommerce, but it bases on the settings of the theme you use. So to add or enable breadcrumbs in WooCommerce, you need to install a WooCommerce theme that supports breadcrumb plugin or add custom WooCommerce breadcrumb shortcodes to your PHP file.

The settings may differ depending on the WooCommerce themes you are using on your WordPress site.

In this article, I suggest Woostify free WooComemrce theme which not only helps you with breadcrumbs but also gives you full control over your eCommerce site.

Suppose that you have had Woostify on your site, to enable WooCommerce breadcrumb navigation, from your WordPress dashboard, go to Appearance > Customize

You are then directed to the Customizer interface. Select Layout > Page Header

In Page Header section, you can enable WooCommerce breadcrumbs by turning the Page Header Display option.

Then, you can choose to display the Title, Breadcrumb, Text Align, and the Background image

You can also customize the WooCommerce breadcrumb design such as breadcrumb color and background color.

That is the way to show the WooCommerce breadcrumb menu in your WooCommerce site with Woostify theme.

In case the theme you are using does not allow you to display breadcrumb navigation, you can copy and paste the following code in the header.php file of the theme.

  <?php if (class_exists('WooCommerce') && is_woocommerce()) : ?>

           <?php woocommerce_breadcrumb(); ?>

  <?php endif; ?>

3 Ways to customize WooCommerce breadcrumb

All of the customizations covered in this blog necessitate adding a PHP code snippet to your theme’s functions.php file. The functions.php file can be accessed directly from the WordPress admin panel by referring to the process below:

• First, from the WordPress dashboard, navigate to Appearance > Theme Editor to get access to the WordPress Theme Editor page.

• Then, find the functions.php file from the list of files under Theme Files on the right side of the page, click on it.

Now You have opened the functions.php file. Simply copy the appropriate WooCommerce breadcrumb shortcodes from the list below and paste them at the bottom of the functions.php file.

Change the Home text

In the WooCommerce breadcrumb menu created above, the default text will originate with “Home“. However, you can change the Home text to another text you want by copy and paste the following codes at the bottom of the theme functions.php file.

add_filter( 'woocommerce_breadcrumb_defaults', 'woo_change_breadcrumb_home_text' ); /**  * Change the breadcrumb home text from "Home" to "Shop".  * @param  array $defaults The default array items.  * @return array           Modified array  */ function woo_change_breadcrumb_home_text( $defaults ) { $defaults['home'] = 'Shop'; return $defaults; }

The shortcodes above will help you change the “Home” text in the breadcrumb menu to “Shop”.

Of course, you can completely replace the Shop text with anything you want.

Remember to Update File to save you changes.

This is the result of the change I have made.

Changing the home link to point to a different URL

With the code above, you have just replaced the text “Home” with “Shop“. But the link in the changed text still directs to the Home page. If you want to change the URL of the Home in the WooCommerce breadcrumb navigation, you can use the following code snippet.

 add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
 /*Change the breadcrumb home link URL from / to /shop.
 @return string New URL for Home link item. /
 function woo_custom_breadrumb_home_url() { return '/shop/'; } 

You can replace the target URL by changing the /shop/ at the end of the snippet code to another place in your WooCommerce site (it should be the places that have been named and put in the site menu).

Change the breadcrumb separator

The default separator in the WooCommerce breadcrumb menu is ‘/’ (forward slash). You can change it to any character by copying and pasting the following code snippet.

function woostify_change_breadcrumb_delimiter( $output ) {
    $output = ' > ';
    return $output;
}
add_filter( 'woostify_breadcrumb_delimiter', 'woostify_change_breadcrumb_delimiter' );

The above code will change the default WooCommerce breadcrumb separator ‘/’ to ‘>’. You can definitely change to another breadcrumb separator by replacing the > with any other HTML character entity code as you wish.

Here is how it works after you update the theme file with the codes:

The WooCommerce breadcrumb snippets above are applied for those who are using the Woostify theme only. If you do not use the Woostify theme, you can consider using the code below:

add_filter( 'woocommerce_breadcrumb_defaults', 'my_change_breadcrumb_delimiter' );
function my_change_breadcrumb_delimiter( $defaults ) {
	// Change the breadcrumb delimiter from '/' to '>'
	$defaults['delimiter'] = ' > ';
	return $defaults;
}

How to Style WooCommerce Breadcrumbs?

Styling the WooCommerce breadcrumbs is necessary if you are coding them yourself. But it can also be helpful if you are using a plugin or theme to add them. The default styles the tool provides may not fit your WooCommerce store, in which case you may want to adjust them to maintain consistency throughout your website.

You can add custom CSS code to style the breadcrumbs in the Customizer’s Additional CSS area:

There are many ways you can adjust the breadcrumbs to match the design of your WooCommerce store, such as by changing their font, size, and color. You can also consider other factors, like margins, padding, borders, and icons.

Here is an example of some CSS code that you can use to style breadcrumbs:

.breadcrumb {
	padding: 8px 15px;
	margin-bottom: 20px;
	list-style: none;
	background-color: #f5f5f5;
	border-radius: 4px;
}
.breadcrumb a {
	color: #428bca;
	text-decoration: none;
}

There are many possibilities when it comes to CSS code. Therefore, it may take some experimentation to make the breadcrumbs on your WooCommerce store look exactly the way you want them to.

How to Removing the breadcrumbs?

If you are using the Woostify theme and want to remove the default WooCommerce breadcrumb navigation from your online store, just follow the same process of enabling WooCommerce breadcrumb, but now, you are disabling it.

Use Woostify theme

Removing the WooCommerce breadcrumb on shop pages

Go to Appearance > Customize > Layout > Page Header to access to the Page header customizer interface.

Then simply turn off the Page Header Display or turn off the Breadcrumb option

The WooCommerce breadcrumb menu has disappeared from the shop page after I disable the breadcrumb button.

Removing the WooCommerce breadcrumb on single product pages

Follow the process below to disable the breadcrumb menu on WooCommerce single product page.

Go to Appearance > Customize > WooCommerce > Product Single

Just turn off the breadcrumb option, and then the WooCommerce breadcrumb menu will disappear on the WooCommerce single product page.

Once finishing, remember to click on the Publish button on the top page to save all changes.

Use shortcodes

If you do not use the Woostify theme, you can add the following code to your child theme functions.php file to remove breadcrumb from your WooCommerce site.

Remove the Breadcrumbs on the Shop Entirely

Use the following snippets if you wish to remove the breadcrumbs completely from your WooCommerce site:

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

Remove the Breadcrumb on the Shop Page

In case, you just don’t want to display the WooCommerce breadcrumb navigation on the shop page, copy and paste the lines of code below to your theme file.

function my_woocommerce_custom_breadcrumbs() {
    if(is_shop()){
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
    }
}
add_filter('woocommerce_before_main_content','my_woocommerce_custom_breadcrumbs');

WooCommerce breadcrumb Plugins

There are a large number of WooCommerce plugins that can help you create and customize WooCommerce breadcrumb in your WooCommerce theme, especially WooCommerce SEO plugins. Below are some of the best WooCommerce breadcrumb plugins worthy of mentioning.

Flexy Breadcrumb

Flexy Breadcrumb is a simple and powerful breadcrumb menu solution for WordPress websites. You may use the [flexy breadcrumb] shortcode to display breadcrumb navigation anywhere on your website. With this plugin, you can also design and customize the WordPress breadcrumbs’ appearance including text, links, and separators as you desire.

Key features:

• Search Engine Optimized (added schema structure).
• Use the [flexy breadcrumb] shortcode to display the breadcrumbs.
• Users should be able to change the breadcrumb separator.
• Enter the Home and End text.
• For the navigation menu, choose a word/character restriction.
• For Home, there’s a Font Awesome icon selection.
• Global settings include color options for text, links, separators, and backgrounds.
• Change the breadcrumb trail’s font size.

Breadcrumb NavXT

Breadcrumb NavXT is a free WordPress breadcrumb plugin is that includes all of the breadcrumb settings you may possibly require. It comes with fully customisable breadcrumb trails that provide the right alternatives for any scenario your website might face. Simply create the breadcrumbs and place them wherever you want on your website.

The plugin also supports multiple networks and an easy-to-use administer interface. You can set up your breadcrumbs for all of your network’s websites and set a default global priority for your breadcrumbs this way. To further extend your breadcrumbs routines, you may add OOP actions and filters.

Key features:

• Breadcrumbs with a lot of features, including network admin options for multi-sites
• Dedicated WordPress widget that you may use on any page of your website.
• Compatible with WPML and PolyLang translation plugins, as well as bbPress and BuddyPress social networking plugins.

Catch Breadcrumb

The next option is Catch Breadcrumb that allows you to experience a lightweight breadcrumb trail with a variety of options. This plugin comes with all of the customization options you’ll need to make your breadcrumb trails your own. In a few clicks, you may define your own breadcrumb selector and separator, as well as choose to display the breadcrumbs wherever you like.

This is a lightweight breadcrumb plugin that ensures your website’s SEO optimization. You may use a shortcode to activate your breadcrumbs or place a simple PHP code in your theme files to display them anywhere. Overall, this is a straightforward and user-friendly plugin that is ideal for individuals who want something functional without a plethora of options and capabilities.

Key features:

• Lightweight and user-friendly
• Breadcrumb separator and selector that can be customized
• Use shortcodes or explicitly add breadcrumbs to the theme files.

Conclusion

Customizing the WooCommerce breadcrumb’s appearance allows you to make it stand out and fit your online store. We hope that this article has been helpful in changing the WooCommerce breadcrumb navigation as you wish. Please leave a comment below if you have any WooCommerce breadcrumb issues that haven’t been addressed by the solutions above.

In case, you don’t want to install so many third-party plugins that can reduce your loading speed and make your site less secured, I highly recommend you use Woostify theme. That is an all-in-one WooCommerce theme offering you various functions to empower your online store, including the breadcrumb feature.