Change the breadcrumb separator

- [Instructor] You may have seen these little links in the top left that lead back to the home page or category page. They're especially helpful to get a user back to our previous page, hence why they're called breadcrumbs. Breadcrumbs are really common in eCommerce, and with WooCommerce, if you want to change the way they look, you can do that. The first thing we need to do is filter that default value. But, before I do that, I need to add yet more comments to my functions files, so I can actually read this. Changing the breadcrumb.

So, the first thing you need to do is add a filter. We're gonna use, add_filter, followed by the filter name, woocommerce_breadcrumb_defaults. And then, we're gonna put in the function name that we're going to use to customize the breadcrumb, hplussports_breadcrumb, followed by a semicolon. Now, we're gonna write that function, I'm gonna copy this first, function and then V to paste, and we do have defaults, so I'm going to call this breadcrumb.

Breadcrumb is an array with a lot of values inside. If you wanted, you can print out everything you needed and view it on the page, something like this. But, I already know what I want to do, I want to change the delimiter value, which will look something like this. And I want to set that equal to a new value. In this case, I want to set it equal to the greater-than sign, which looks like that. You may have noticed that I didn't actually put in the greater-than sign. I put in ampersand G T. That's because, when you're writing PHP or HTML code, you can't just type in the greater-than sign, because a web browser would think that you're trying to close an HTML element.

You need to use the HTML entity instead, and that's exactly what this is. I also added spaces around the delimiter. You could remove these if you wanted, but then it would be a little bit tight for my liking. Lastly, we need to return the breadcrumb. Save the file. Go back to the front end and make sure that it works.