WordPress

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
$term_id=get_queried_object()->term_id;
 
if($term_id>0){
     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.

 

<?php
 
 $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );
 
         $counter=1;        
         foreach($product_cats as $cat) {
 
            $url=get_term_link( $cat->slug, 'product_cat' );
            $breadcrumb= "<a href='".$url."'>".$cat->name."</a>";
 
            $the_parent=$cat->parent;
 
            while($the_parent>0){
                $term=get_term( $the_parent, 'product_cat');
                $the_parent=$term->parent;
                $parent=get_parent_taxonomy($term);
                $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";
 
            $counter++;    
         }    
 
         function get_parent_taxonomy($term){
 
             if(isset($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:

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

4 Comments

  • 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,
    Mark

  • Daan

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

    jQuery(document).ready(function($){
    var path_id=”;
    if ($(‘.breadcrumbs[data-pathid=”‘+path_id+'”]’).length>0){
    $(‘.breadcrumbs’).hide();
    $(‘.breadcrumbs[data-pathid=”‘+path_id+'”]’).show();
    }
    });

Leave a Reply

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

 

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