WooCommerce – breadcrumbs and multiple categories

When there are multiple possible breadcrumbs, WooCommerce picks the first possibility. If the product is found from following a different path, the breadcrumbs no longer match the expected order.  To make the breadcrumbs match the path used to reach the product I used the following strategy:

  1. Use a cookie to record the last visited product archive page.
  2. On the single product page, generate a list of all possible breadcrumbs.
  3. Hide all the breadcrumbs except for the desired path.

Step 1 – Record the Cookie

This goes in archive-product.php template at the very top before any information is outputted.

//record term id in a cookie to be used in breadcrumbs
     setcookie("path_id", "", time()-3600);
     setcookie("path_id",$term_id, time()+3600*24,COOKIEPATH, COOKIE_DOMAIN, false);

Step 2 – Generate All Possible Paths

This goes on the single-product.php page. By default, I hid them all except for the first one using CSS. The .first class provides a distinguishing element to select.


 $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );
         foreach($product_cats as $cat) {
            $url=get_term_link( $cat->slug, 'product_cat' );
            $breadcrumb= "<a href='".$url."'>".$cat->name."</a>";
                $term=get_term( $the_parent, 'product_cat');
                $breadcrumb=$parent." / ".$breadcrumb;
            $breadcrumb='<a class="home" href="'.get_site_url().'">Home</a> / <a  href="/transform-space/" >Transform Your Space</a> / '.$breadcrumb;
            if($counter==1){ $class='first';  } else { $class=false; }
            echo "\n <div class='breadcrumbs $class' xmlns:v='http://rdf.data-vocabulary.org/#' data-pathid='".$cat->term_id."'>".$breadcrumb." / ".get_the_title()."</div>\n";
         function get_parent_taxonomy($term){
                 $url=get_term_link( $term->slug, 'product_cat' );
                 return "<a href='".$url."'>".$term->name."</a>";
             } else { return false; }

Step 3 – Show the active breadcrumb

This goes below the breadcrumb:

        var path_id='<?php echo $_COOKIE['path_id']; ?>';
        if ($('.breadcrumbs[data-pathid="'+path_id+'"]').length>0){


  • Michael Levy

    The last bit is some jQuery to hide and show the breadcrumb. It could be added to the theme footer or an external JavaScript file.

  • Mark

    I would love to get this option to work, but I did all of the steps and it doesn’t seem to work for me. Do I have to add any CSS? Also, it seems that step 2 is working but on step 1 it doesn’t seem to add the cookie. Any assistance you could offer me would be greatly appreciated.

    Warm regards,

  • Daan

    It’s been a while since anybody commented, but for anyone visiting this page that has the same problem is Mark above, try:

    var path_id=”;
    if ($(‘.breadcrumbs[data-pathid=”‘+path_id+'”]’).length>0){

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.