How to customize breadcrumb navigation in WooCommerce
How to customize breadcrumb navigation in WooCommerce

Breadcrumb navigation is an essential part of user experience, especially on eCommerce websites.
In online stores with hundreds of products, the products are usually organized with categories, subcategories, and sub-subcategories. When a user goes deep into the hierarchy, it may take several clicks to go back to one of the previous levels in the hierarchy. That is where breadcrumb navigation comes to the rescue.
It allows customers to go back to any level above in the hierarchy with one click. Moreover, it also helps the customers know where they are in the hierarchy. That is why WooCommerce offers the breadcrumb navigation feature by default. However, WooCommerce offers any easy way to change the appearance of the breadcrumb menu. In this blog, we show you how to customize WooCommerce breadcrumb navigation.
All customization mentioned in this blog requires you to add a PHP code snippet to the functions.php file in your theme. You can open the functions.php file form the WordPress admin dashboard itself.
Step 1: Log in to WordPress Admin Dashboard.
Step 2: Go to Appearance > Theme Editor to open the WordPress Theme Editor page.
Step 3: Click on the functions.php file which you can find among the list of files under Theme Files on the right side of the WordPress Theme Editor page.
Now functions.php file is opened in the text editor screen in the middle of the page. All you need to do is copy the appropriate code snippet form below and add it to the bottom of the functions.php file.
Change the Home text
/**
* Rename “home” in breadcrumb
*/
add_filter( ‘woocommerce_breadcrumb_defaults’, ‘wcc_change_breadcrumb_home_text’ );
function wcc_change_breadcrumb_home_text( $defaults ) {
// Change the breadcrumb home text from ‘Home’ to ‘Apartment’
$defaults[‘home’] = ‘Apartment’;
return $defaults;
}
This code will change the Home text in the breadcrumb menu Apartment. You can replace the Apartment text with anything you want.
If you are using the Storefront theme, you need to increase the priority of the execution of the above code. All you need to is add 20 as the third parameter for the add _filter function in the third line. So, the line will look like the following.
add_filter( ‘woocommerce_breadcrumb_defaults’, ‘wcc_change_breadcrumb_home_text’, 20 );
Change Home link to a different URL
Please remember that this will only change the text not the link. If you want to change the URL of the Home in the WooCommerce breadcrumb navigation, you can use the following code snippet.
/**
* Replace the home link URL
*/
add_filter( ‘woocommerce_breadcrumb_home_url’, ‘woo_custom_breadrumb_home_url’ );
function woo_custom_breadrumb_home_url() {
return ‘http://woocommerce.com’;
}
You can replace the ‘https://woocommerce.com’ with your desired URL.
If you are using the Storefront theme, you need to increase the priority of the execution of the above code. All you need to do is add 20 as the third parameter for the add _filter function in the third line. So, the third line will look like the following.
add_filter( 'woocommerce_breadcrumb_defaults', 'woo_custom_breadrumb_home_url', 20 );
Change the breadcrumb separator
The default separator in the WooCommerce breadcrumb menu is ‘/’ (forward slash). You can change it to any character you wish with the following code snippet.
/**
* Change the breadcrumb separator
*/
add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter' );
function wcc_change_breadcrumb_delimiter( $defaults ) {
// Change the breadcrumb delimeter from '/' to '>'
$defaults['delimiter'] = ' > ';
return $defaults;
}
The above code will change the default separator ‘/’ to ‘>’
You can replace the > with the HTML character entity code, you wish. Here are a few examples.
If you are using the Storefront theme, you need to increase the priority of the execution of the above code. All you need to do is add 20 as the third parameter for the add _filter function in the third line. So, the third line will look like the following.
/**
* Remove the breadcrumbs
*/
add_action( 'init', 'woo_remove_wc_breadcrumbs' );
function woo_remove_wc_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
How to remove the breadcrumb
If you want to remove the default WooCommerce breadcrumb navigation from your online store, you can add the following code to the functions.php file.
/**
* Remove breadcrumbs for Storefront theme
*/
add_action( ‘init’, ‘wc_remove_storefront_breadcrumbs’);
function wc_remove_storefront_breadcrumbs() {
remove_action( ‘storefront_before_content’, ‘woocommerce_breadcrumb’, 10 );
}
This code will work in most WordPress themes. But if you are using the Storefront theme, you may want to try the following code instead.
Summary
Customizing the appearance of WooCommerce breadcrumb helps you to make it look unique. It also allows you to make it suitable for your online store. We hope that this blog helps you to customize the WooCommerce breadcrumb navigation the way you want.