A cleaner way to display a delimiter would be a CSS-border (like Aibrean suggested). But you can set up the filter to fit your needs:
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' ),
);
}
Update: To keep your HTML-markup clean and semantic you would leave the delimiter empty like this:
add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' );
function custom_woocommerce_breadcrumbs() {
return array(
'delimiter' => '', // no delimiter
'wrap_before' => '<div><ul class="crumbs">',
'wrap_after' => '</ul></div>',
'before' => '<li>',
'after' => '</li>',
'home' => _x( 'Home', 'breadcrumb', 'woocommerce' ),
);
}
And add a border or some similar styling in your style.css
:
.crumbs li {
padding: 10px;
border-right: 1px solid black;
}
.crumbs li:last-child {
border-right: none;
}