You can customize the separator used between items in the WooCommerce breadcrumb navigation. This is useful for matching your website’s design and branding.
Steps
- Open your theme’s
functions.phpfile. - Add the code below.
- Save the file.
- Open a WooCommerce product page.
Done — the default breadcrumb separator will be replaced with your custom separator.
Output
Before:
Home → Shop → Product
After:
Home / Shop / Product
Customize the Separator
You can use different separators:
function change_woocommerce_breadcrumb_separator( $defaults ) {
$defaults['delimiter'] = ' / ';
return $defaults;
}
add_filter(
'woocommerce_breadcrumb_defaults',
'change_woocommerce_breadcrumb_separator'
);
