Aw Yiss! WooCommerce Breadcrumbs

WooCommerce Breadcrumbs – Control Product Categories

David Nash woocommerce, wordpress 2 Comments

WooCommerce breadcrumbs will show the first category it finds that a product is in, no matter how you got to it. This makes sense, as breadcrumbs should more be about categories than browser history.

Unfortunately if that category is alphabetically earlier, it will display that – no matter how many levels of categories it is deep.

It makes more sense to me to show the shortest path of categories to the product, which is what this tutorial is about.

I’m going to assume you’re using a child theme for this. If you’re not, sorry – you’ll need to go and set that up first. Take a look at this tutorial for a good introduction on how to do that.

There are two main steps here, and the first one seems scary, but isn’t.

Step 1: Customise the WooCommerce breadcrumbs class

Don’t panic. Everything will be fine.

We’re going to extend the WooCommerce Breadcrumbs class so that we can edit one of its functions without having to modify the WooCommerce core.

First, make a copy of plugins/woocommerce/includes/class-wc-breadcrumb.php . Let’s copy it to themes/[child-theme]/includes/class-custom-breadcrumb.php . It could be anywhere, but I think creating the includes directory is a good idea, just to keep it separate from the rest of your code.

Edit your new file, and change the line near the top from:

to:

Next we want to modify the add_crumbs_single() function so that instead of returning the category that is several layer deep but come first alphabetically, we return the shortest path.

Use a text search to find the function:

Just below this first if statement, we’re going to add the following:

The lines that you should see after this are:

Save your file. That’s it for Step 1.

Step 2: Override the WooCommerce breadcrumbs function

Hopefully this is more familiar territory for you. Edit the functions.php file in your child theme directory. Add this:

This is almost identical to the code in plugins/woocommerce/includes/wc-template-functions.php . First, all we’re doing is including the extended class we wrote in Step 1. The only other change is that instead of creating a WC_Breadcrumb object, we’re creating a Custom_Breadcrumb object.

Save the file and have a look at your site. Aw yiss! Slightly saner WooCommerce breadcrumbs!

Woocommerce version 2.3.0.

Image used without permission from Hark, a vagrant by the genius comic artist Kate Beaton.

Comments 2

  1. Hello David,
    I want to try this solution to see if it helps but I don’t understand where exactly to copy the code (Step 1). I get this part: “Just below this first if statement, we’re going to add the following” but not this one: “The lines that you should see after this are:” Could you post the whole code with the modifications?.
    Thanks,
    C.

Leave a Reply

Your email address will not be published. Required fields are marked *