How to Modify Breadcrumb Appearance in WooCommerce

woocommerce-thumbWooCommerce is a great plugin for enabling eCommerce within your WordPress website. It provides great functionality and easy-of-use. One great feature are breadcrumbs.

Out of the box, WooCommerce has breadcrumbs that look pretty nice. Depending on the site you are building you may want to customize them. By default, they look something like this:

WooCommerce Standard Breadcrumbs

This looks pretty nice. I’ve added some basic styles, but I don’t like the forward slash as my separator. Luckily, modifying the WooCommerce breadcrumb is easy with the use of the woocommerce_breadcrumb_defaults filter.

Tip: Add the following functions to your theme’s functions.php file or your custom functionality plugin to use them.

Change the WooCommerce Breadcrumb Separator

Here is the function listed in the WooCommerce documentation to change the separator; this will change the breadcrumb delimiter from ‘/‘ to ‘>‘:

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

Here’s my end result. Note: I did place a span tag around the separator to provide additional padding between items.

WooCommerce Customized Breadcrumbs

More Control over Breadcrumbs

If all you want to change is the separator, the filter-function combo above will work like a charm. If you want more customization flexibility, the following function provides additional options:

function my_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' / ',
            'wrap_before' => '

‘, ‘before’ => ”, ‘after’ => ”, ‘home’ => _x( ‘Home’, ‘breadcrumb’, ‘woocommerce’ ), ); } add_filter( ‘woocommerce_breadcrumb_defaults’, ‘my_woocommerce_breadcrumbs’ );

With the function above you will be able to add custom classes and modify the elements of the breadcrumbs. You can also change the “Home” text and add elements before or after the breadcrumb. Nice little function here to customize the WooCommerce breadcrumb output and functionality.

More Useful Breadcrumb Snippets

Depending on your need, some of the following functions may be useful for your WooCommerce breadcrumbs.

Remove the Breadcrumbs Entirely

If you would like to remove the breadcrumbs completely for your site add the following:

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

Remove the Breadcrumb on the Shop Page

Perhaps you don’t want to show the breadcrumbs on the shop page, like this person over on WP.org forums: Remove breadcrumb from shop ‘homepage’

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

Customize the WooCommerce Breadcrumb Home URL

Maybe you want the “Home” url to be something other than your homepage:

//Change the breadcrumb home URL
//http://docs.woothemes.com/document/change-the-breadcrumb-home-url/
add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
    return get_permalink(8);
}

Further Customization

If you want to get down and dirty with the breadcrumb logic, don’t overwrite any WooCommerce plugin file but rather copy woocommerce/templates/shop/breadcrumb.php to your theme’s directory like so:

theme-directory

…and you can customize the logic all you want without having to worry about updating the plugin.

Anymore Breadcrumb Needs?

If you have a WooCommerce breadcrumb issue/need that hasn’t been resolved by the solutions above please leave a comment below. If this has resolved your needs and you want to give a shout out you can leave a comment too!