How to modify breadcrumb appearance in WooCommerce

modify-woocommerce-breadcrumb.md

How to modify breadcrumb appearance in WooCommerce

There are two files you need look around if you want to change your breadcrumb's appearance in WooCommerce. You'll find those files in your WooCommerce plugin directory:

1. The first file: /woocommerce/woocommerce-template.php, this file contains function definition for woocommerce_breadcrumb()

  if ( ! function_exists( 'woocommerce_breadcrumb' ) ) {

	/**
	 * Output the WooCommerce Breadcrumb
	 *
	 * @access public
	 * @return void
	 */
	function woocommerce_breadcrumb( $args = array() ) {

		$defaults = array(
			'delimiter'  => ' › ',
			'wrap_before'  => '<div id="breadcrumb" itemprop="breadcrumb">',
			'wrap_after' => '</div>',
			'before'   => '',
			'after'   => '',
			'home'    => null
		);

		$args = wp_parse_args( $args, $defaults  );

		woocommerce_get_template( 'shop/breadcrumb.php', $args );
	}
  }

2. The second file: /woocommerce/templates/shop/breadcrumb.php, it's the template file for breadcrumb component in WooCommerce. This is the template file that will be called by the woocommerce_breadcrumb() function.

If you're going to change it's basic HTML structure such as its wrapper and delimiter, you only need to override the woocommerce_breadcrumb() function in your functions.php file. But if you're going to change its whole inner HTML structure, you'll need to override the template function. To do so, you need to copy the /woocommerce/templates/shop/breadcrumb.php file to /woocommerce/shop/breadcrumb.php in your theme directory

is there a best practice for overriding the function? currently I'm changing $delimiter to a specific value inside breadcrumb.php instead of overriding woocommerce_breadcrumb() because I don't understand how.

You don't actually have to override the function (as of 2.0) to change the breadcrumb settings.

function my_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' / ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
            'wrap_after'  => '</nav>',
            'before'      => '',
            'after'       => '',
            'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
        );
}

add_filter( 'woocommerce_breadcrumb_defaults', 'my_woocommerce_breadcrumbs' );

Howdy Zachthezman

I can't move the breadcrumb using your code above.

http://pastebin.com/fHdHqJh9

(sorry don't know the code on github to box code)

you can see here http://dev.downtherabbithole.co.uk/shop that the breadcrumb is not where I moved it

http://dev.downtherabbithole.co.uk/pr-disclosure as you can see here where it's meant to be.

Cheers