Ever wonder how you can remove the name of the product from the breadcrumb tree of products? Breadcrumb Hierarchy or tree is the tabs or the categories and the sub-categories of the product visited by a user.
Making the breadcrumb tree simple makes tracking the type of product easier to manage. This can be useful in scenarios where a customer wants to make multiple checkouts from the same category of products.
Adding this functionality is a simple task and wouldn’t require more than a couple of minutes. You will just have to add the code below in the theme functions.
Go to Dashboard > Appearance > Theme editor > Theme Functions
Then simply add the following code at the end of the existing code,
add_filter( 'woocommerce_get_breadcrumb', 'tm_child_remove_product_title', 10, 2 );
function tm_child_remove_product_title( $crumbs, $breadcrumb ) {
if ( is_product() ) {
array_pop( $crumbs );
}
return $crumbs;
}
Before Code
After Code:
Only by addition of a simple code, we can design our online store thanks to WooCommerce. This is why WooCommerce is a great tool in developing an e-commerce website. Let us know your thoughts in the comments section below.
Hello
This code is removing the product title but also the link to the product category to which the product belongs to which makes it hard to navigate for the customer. Is there a version where it keeps the link to the product category but only removes the title from the breadcrumbs?
Hello ! I found a solution with CSS 🙂 :
.woocommerce .woocommerce-breadcrumb{
font-size:0;
}
.woocommerce .woocommerce-breadcrumb a{
font-size:20px;
}
.woocommerce .woocommerce-breadcrumb a::after{
content:”>”;
}
.woocommerce .woocommerce-breadcrumb a:last-of-type:after{
content: “”;
}