Customize the WooCommerce breadcrumb

You are here:
In this article
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

Useful if you want to 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;
  }

 

 

 

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

Useful if you want to change the breadcrumb separator.

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

 

 

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

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’ ),
  );
  }

 

 

 

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

 

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

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

 

 

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

 

 

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

.woocommerce-breadcrumb {
visibility:hidden;
}

Using a Woo theme

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

 

 

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

 

 

Read more about the WooFramework breadcrumb function at WooCommerce Breadcrumb.

Was this article helpful?
Dislike 0
Views: 15