Skip to main content

Modify Breadcrumb in WooCommerce

Breadcrumbs are important for both SEO and usability. In WooCommerce, you can modify the breadcrumb to include your shop name and other information. This can help customers easily find their way around your shop, and it may also help improve your SEO.

In this snippet, we’ll show you how to hook the breadcrumb code and remove the Home item at the beginning of the breadcrumb.

add_filter('woocommerce_breadcrumb_defaults', function( $defaults ) {
    unset($defaults['home']); //removes home link.    
    return $defaults;
});

Or you can modify the HTML tag and delimiter.

add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' );
function custom_woocommerce_breadcrumbs() {
  return array(
    'delimiter'   => '<li class="separator"> | </li>',
    'wrap_before' => '<div><ul class="crumbs">',
    'wrap_after'  => '</ul></div>',
    'before'      => '<li>',
    'after'       => '</li>',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
  );
}

By continuing to use the site, you agree to the use of cookies.