Changing the Woocommerce breadcrumb menu [closed]

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;
}