WooCommerce Product Page Bread Crumbs Solution
-
I wanted to share a solution for a problem I had with getting breadcrumbs to fully propagate on my WooCommerce site using the Mystile theme. I think I found a solution for the issue of providing breadcrumbs on the product page that incorporates the categories and sub-categories that the product belongs to. The breadcrumb should look as follows:
Home / Products / Category / Sub Category / Product
With all but the final Product crumb being a link to their respective pages (Products links to Shop). My solution was to take a piece of code that from the WooCommerce Codex, and make a couple small alterations so that the subcategories would also show. The final code is pasted below:
// Add product categories to the "Product" breadcrumb in WooCommerce. // Get breadcrumbs on product pages that read: Home > Shop > Product category > Product Name add_filter( 'woo_breadcrumbs_trail', 'woo_custom_breadcrumbs_trail_add_product_categories', 20 ); function woo_custom_breadcrumbs_trail_add_product_categories ( $trail ) { if ( ( get_post_type() === 'product' ) && is_singular() ) { global $post; $taxonomy = 'product_cat'; $terms = get_the_terms( $post->ID, $taxonomy ); $links = array(); if ( $terms && ! is_wp_error( $terms ) ) { $count = 0; foreach ( $terms as $c ) { $count++; //if ( $count > 1 ) { continue; } $parents = woo_get_term_parents( $c->term_id, $taxonomy, true, ', ', $c->name, array() ); if ( $parents != '' && ! is_wp_error( $parents ) ) { $parents_arr = explode( ', ', $parents ); foreach ( $parents_arr as $p ) { if ( $p != '' ) { $links[] = $p; } } } } // Add the trail back on to the end. // $links[] = $trail['trail_end']; $trail_end = get_the_title($post->ID); // Add the new links, and the original trail's end, back into the trail. array_splice( $trail, 2, count( $trail ) - 1, $links ); $trail['trail_end'] = $trail_end; //remove any duplicate breadcrumbs $trail = array_unique($trail); } } return $trail; } // End woo_custom_breadcrumbs_trail_add_product_categories() /** * Retrieve term parents with separator. * * @param int $id Term ID. * @param string $taxonomy. * @param bool $link Optional, default is false. Whether to format with link. * @param string $separator Optional, default is '/'. How to separate terms. * @param bool $nicename Optional, default is false. Whether to use nice name for display. * @param array $visited Optional. Already linked to terms to prevent duplicates. * @return string */ if ( ! function_exists( 'woo_get_term_parents' ) ) { function woo_get_term_parents( $id, $taxonomy, $link = false, $separator = '/', $nicename = false, $visited = array() ) { $chain = ''; $parent = &get_term( $id, $taxonomy ); if ( is_wp_error( $parent ) ) return $parent; if ( $nicename ) { $name = $parent->slug; } else { $name = $parent->name; } if ( $parent->parent && ( $parent->parent != $parent->term_id ) && !in_array( $parent->parent, $visited ) ) { $visited[] = $parent->parent; $chain .= woo_get_term_parents( $parent->parent, $taxonomy, $link, $separator, $nicename, $visited ); } if ( $link ) { $chain .= '<a href="' . get_term_link( $parent, $taxonomy ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $parent->name ) ) . '">'.$parent->name.'</a>' . $separator; } else { $chain .= $name.$separator; } return $chain; } // End woo_get_term_parents() }In addition, I use the following code to change the word “Products” to “Shop”. You can easily alter the code to change the word Products to whatever you like.
/* * Change "Products" to "Shop" in WooCommerce breadcrumbs */ function woo_custom_product_breadcrumbs_trail ( $trail ) { $my_word = 'Shop'; //Change 'Shop' to whatever you want. foreach ( $trail as $k => $v ) { if ( strtolower( strip_tags( $v ) ) === 'products' ) { $trail[$k] = '<a href="' . home_url( '/shop' ) . '">' . $my_word . '</a>'; break; } } return $trail; } add_filter( 'woo_breadcrumbs_trail', 'woo_custom_product_breadcrumbs_trail', 10 );I hope this helps somebody out because I was looking around for this for quite a while. It works for me, but my site is still on my local computer, so I can’t show you the results.
If you want the breadcrumbs to fully appear on category pages, add whatever you used as $my_word in the code above to the “Shop category base” field in your WordPress Settings->permalinks page. More info here.
In case it’s not obvious, all code should be put in your theme’s function.php file. Or even better yet, your child theme’s function.php file.
The topic ‘WooCommerce Product Page Bread Crumbs Solution’ is closed to new replies.