Changing the breadcrumb separator

One of the really useful features built into WooCommerce allows the customer to see where they are in the store and then click on a link and go back to a previously visited page. In the programming world, these are called breadcrumbs.

Changing the breadcrumb separator

There are several hooks you can use to customize the breadcrumbs to your liking. We'll be using a little code snippet to change what the actual code looks like.

Getting ready

Make sure you have a product in your store and that it's in a product category. That way, you can see the breadcrumbs.

How to do it…

We'll need a little snippet of code to change the breadcrumb separator. We will also need to look up the HTML entity for the character we want to use. If you don't know what an HTML entity is, that's fine. Just know that certain characters (such as <, >, &, ©, and others) can't always be used directly in code. Sometimes, you need to help the computer translate those symbols. First, let's add the function we need.

  1. Add the following code to your theme's functions.php file, located under wp-content/themes/your-theme-name/, or your custom WooCommerce plugin:
    // Change the breadcrumb delimeter from '/' to '>'
add_filter( 'woocommerce_breadcrumb_defaults', 'woocommerce_cookbook_breadcrumb_delimiter' ); 
function woocommerce_cookbook_breadcrumb_delimiter( $defaults ) { 
}

    At this point, we have a function, but it's not doing anything. We need to add a bit of logic to the function. Before we do that, we need to know the HTML entity of the character we want to use. We'll be using the > character. A quick Google search will reveal that the HTML entity for the > character is &gt;. Optionally, you can use a website such as http://www.w3schools.com/html/html_entities.asp to find the HTML entity you need. Now that we have the value we need, we put it in our function.

  2. In the woocommerce_cookbook_breadcrumb_delimiter function, we just add the following code right after the beginning of the function:
    $defaults['delimiter'] = '&nbsp;&gt;&nbsp;'; 
return $defaults;
  3. Save your file and upload it to your site. You should see a new separator in your breadcrumbs.
    How to do it…

There's more...

There are plenty of other breadcrumb settings we haven't covered. A useful free plugin that allows you to customize all of this without code is called WooCommerce Breadcrumbs. If you need more control, I'd advise you to use that plugin.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset