How to Edit a Breadcrumb Item in WooCommerce?

In WooCommerce, you can create shop, category, tag, single product breadcrumbs. These breadcrumbs generally follows WooCommerce permalink settings. In WordPress > Permalinks, you can select the ‘shop base with category’ option. Doing so, you will see a product with an ‘uncategorized’ category. The URL of the same will be “https://your-website.com/shop/uncategorized/product-name/”.   Also, the single product breadcrumbs will be “Home/Shop/Uncategorized/Product Name”. In this article, you will learn how to edit a breadcrumb item in WooCommerce.

You can alter the breadcrumb name using a simple woocommerce_get_breadcrumb filter.  With this filter, one can change breadcrumb content. Furthermore, you will learn to add a prefix to the WooCommerce product category. Also, you will see how to replace the product name with the SKU. 

Image suggestion to edit a breadcrumb item by adding prefix to WooCommerce product category

PHP Snippet #1: Add Prefix to WooCommerce Category to Edit a Breadcrumb Item

add_filter( 'woocommerce_get_breadcrumb', 'phpsof_single_product_edit_cat_breadcrumbs', 9999, 2 );
 
function phpsof_single_product_edit_cat_breadcrumbs( $crumbs, $breadcrumb ) {
    
   if ( is_product() ) {
      $index = count( $crumbs ) - 2; // cat is always second last item
      $value = $crumbs[$index];
      $crumbs[$index][0] = 'Category: ' . $crumbs[$index][0];
   }
    
   return $crumbs;
}

PHP Snippet #2: Rename Product Name with SKU Value to Edit a Breadcrumb Item

add_filter( 'woocommerce_get_breadcrumb', 'phpsof_single_product_edit_prod_name_breadcrumbs', 9999, 2 );
 
function phpsof_single_product_edit_prod_name_breadcrumbs( $crumbs, $breadcrumb ) {
    
   if ( is_product() ) {
      global $product;
      $index = count( $crumbs ) - 1; // product name is always last item
      $value = $crumbs[$index];
      $crumbs[$index][0] = $product->get_sku();
   }
    
   return $crumbs;
}

Where do you add this snippet?

So, this is how you can edit a breadcrumb item in WooCommerce. Also, it is easier to activate this function with this code. So, to apply this code, just add this PHP snippet at your child theme function.php file’s bottom. It should be placed before “?>”, if you have it there. Apart from this, CSS goes in your child theme style.css file. Make sure that you are editing these files in a right manner for best results.

Is this snippet still valid?

So, this is how you can learn about edit a breadcrumb item in WooCommerce. I have applied this code on the Storefront theme and WordPress friendly hosting PHP 7.3. Let me know if everything works as expected when you code. Share it further if you find this snippet useful for you and it had saved your time. 

Also Read, How to Save Terms & Conditions Acceptance at Checkout?

How to Hide Shipping Rates if Free Shipping Available in WooCommerce?

Important links: WooCommerce – https://woocommerce.com/