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.