Change the Breadcrumb Delimiter in WooCommerce

To change the breadcrumb delimiter in WooCommerce, filter the delimiter key of woocommerce_breadcrumb_defaults. By default WooCommerce prints a slash with a non-breaking space on each side.

For every other argument (wrap_before, wrap_after, before, after and home) with real examples, see Customize WooCommerce Breadcrumbs.

Replace the Breadcrumb Delimiter

Add this to your child theme’s functions.php file or to a small custom plugin:

/**
 * Replace the WooCommerce breadcrumb delimiter with a vertical bar.
 */
function savvy_wc_breadcrumb_delimiter( $defaults ) {
    $defaults['delimiter'] = ' | ';
    return $defaults;
}
add_filter( 'woocommerce_breadcrumb_defaults', 'savvy_wc_breadcrumb_delimiter', 20 );

A product breadcrumb now reads Home | Clothing | T-Shirt instead of Home / Clothing / T-Shirt.

How It Works

The function woocommerce_breadcrumb() builds an array of defaults and passes it through the woocommerce_breadcrumb_defaults filter. The template global/breadcrumb.php then echoes the delimiter between crumbs, but not after the last one.

These are the defaults in current WooCommerce source (includes/wc-template-functions.php):

array(
    'delimiter'   => ' / ',
    'wrap_before' => '<nav class="woocommerce-breadcrumb" aria-label="Breadcrumb">',
    'wrap_after'  => '</nav>',
    'before'      => '',
    'after'       => '',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
)

Only change the delimiter key and return the rest untouched. Returning a brand new array wipes out defaults you did not mean to change, such as the aria-label WooCommerce added to wrap_before in version 8.3.

Delimiter Variations

The delimiter is printed as raw HTML, not escaped, so you can use entities, a styled element or an inline SVG. A few common choices:

// Right-pointing angle: Home › Shop › Product
$defaults['delimiter'] = ' › ';

// Arrow: Home → Shop → Product
$defaults['delimiter'] = ' → ';

// A span you can style with CSS
$defaults['delimiter'] = '<span class="breadcrumb-sep" aria-hidden="true">/</span>';

The span version is the most flexible. Add aria-hidden="true" so screen readers skip the decorative character, then style .breadcrumb-sep in your theme CSS.

Why the Delimiter Does Not Change

If the separator stays the same after adding the filter, the cause is usually one of these:

• Storefront or another theme sets its own delimiter. Storefront hooks woocommerce_breadcrumb_defaults at the default priority 10 from the parent theme, which loads after your child theme. That is why the snippet above uses priority 20.
• The breadcrumb is not WooCommerce’s. Yoast SEO, Rank Math and many themes print their own trail, which this filter does not touch.
• A page cache is serving old HTML. Purge the cache and reload.

In block themes the Store Breadcrumbs block calls woocommerce_breadcrumb() internally, so the same filter applies there. To hide the trail on some pages instead, see Remove WooCommerce Breadcrumbs on Specific Pages.

FAQs

Common questions about the WooCommerce breadcrumb delimiter: