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 );

 

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.