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_defaultsat 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:
/ , a forward slash with a non-breaking space on each side. It is set in woocommerce_breadcrumb() and can be changed through the woocommerce_breadcrumb_defaults filter.
<span>, an icon font element or an inline SVG all work. Mark decorative separators with aria-hidden="true".


