Customize the WooCommerce breadcrumb

This is a Developer level doc. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our Support Policy.

You need to add code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Please don’t add custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

Change the ‘Home’ text

↑ Back to top

Useful if you want to change the home text.

view raw

wc-customize-breadcrumb.php

hosted with ❤ by GitHub

For the Storefront theme, you need to increase the priority of execution:

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text', 20 );

Change the breadcrumb separator

↑ Back to top

Useful if you want to change the breadcrumb separator.

view raw

wc-change-breadcrumb-separator.php

hosted with ❤ by GitHub

For the Storefront theme, you need to increase the priority of execution:

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter', 20 );

Change all the things

↑ Back to top

Useful if you want to change a number of the breadcrumb defaults.

	/**
	* Change several of the breadcrumb defaults
	*/
	add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
	function jk_woocommerce_breadcrumbs() {
	return array(
	'delimiter' => ' / ',
	'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
	'wrap_after' => '</nav>',
	'before' => '',
	'after' => '',
	'home' => _x( 'Home', 'breadcrumb', 'woocommerce' ),
	);
	}

view raw

wc-change-all-the-things.php

hosted with ❤ by GitHub

For the Storefront theme, you need to increase the priority of execution:

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs', 20 );

Change the home link to a different URL

↑ Back to top

	/**
	* 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';
	}

view raw

wc-change-home-link.php

hosted with ❤ by GitHub

For the Storefront theme, you need to increase the priority of execution:

add_filter( 'woocommerce_breadcrumb_defaults', 'woo_custom_breadrumb_home_url', 20 );

Remove the breadcrumbs

↑ Back to top

Most themes can use this:

-/**
- * 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 );
-}

view raw

wc-remove-breadcrumbs.php

hosted with ❤ by GitHub

For the Storefront theme, use this:

-/**
- * 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 );
-}

view raw

wc-remove-storefront-breadcrumbs.php

hosted with ❤ by GitHub

If you prefer using CSS code to hide the breadcrumbs, then use this:

.woocommerce-breadcrumb { visibility:hidden; }

Using a Woo theme

↑ Back to top

If you’re using a Woo theme, the breadcrumbs are already removed and replaced with the WooFramework breadcrumb function.

To remove the breadcrumbs in a WooTheme, the following must be added. Be aware that this removes breadcrumbs site-wide, not only on WooCommerce pages:

-/**
- * Remove breadcrumbs in Woo developed themes
- */
-add_action( 'init', 'woo_remove_woo_breadcrumbs' );
-function woo_remove_woo_breadcrumbs() {
-    remove_action( 'woo_main_before', 'woo_display_breadcrumbs', 10 );
-}

view raw

wc-remove-breadcrumbs-woo-theme.php

hosted with ❤ by GitHub

If you want to remove breadcrumbs on WooCommerce pages when using a Woo theme, use:

-/**
- * Remove breadcrumbs on specific pages
- */
-add_action( 'init', 'wcc_remove_woo_wc_breadcrumbs' );
-function wcc_remove_woo_wc_breadcrumbs() {
-    if ( is_woocommerce() || is_cart() || is_checkout() ) {
-        remove_action( 'woo_main_before', 'woo_display_breadcrumbs', 10 );
-    }
-}

view raw

wc-remove-breadcrumbs-wc-pages.php

hosted with ❤ by GitHub

Read more about the WooFramework breadcrumb function at WooCommerce Breadcrumb.

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

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