Add Shop page in Woocommerce breadcrumb

Who else uses breadcrumbs when they browser through websites? Because we do! WooCommerce is a popular eCommerce plugin for WordPress that allows you to create online stores with ease. While WooCommerce provides a Shop page by default, you might encounter scenarios where you want to customize the breadcrumb trail for this page, adding the Shop page link programmatically. In this article, we will explore how to achieve this by modifying the breadcrumb trail in your WordPress theme. By the end of this guide, you’ll be able to seamlessly integrate the Shop page link into your WooCommerce breadcrumbs, enhancing the navigation experience for your customers.

Understanding Breadcrumbs in WooCommerce:

Before we dive into adding the Shop page to the breadcrumb trail programmatically, it’s essential to understand how breadcrumbs work in WooCommerce. Breadcrumbs are navigation aids that provide users with a trail of links, allowing them to easily navigate back to previous pages. WooCommerce automatically generates breadcrumbs based on the product category and product hierarchy, helping customers navigate your online store efficiently.

Why Add the Shop Page to Breadcrumbs:

The Shop page is the central hub of your WooCommerce store, where customers can browse all available products. Including a link to the Shop page in your breadcrumbs provides an intuitive way for customers to return to the main shopping page at any point in their browsing journey. It enhances the user experience by simplifying navigation, especially for visitors who may have landed on specific product pages.

Adding the Shop Page to Breadcrumbs Programmatically:

To programmatically add the Shop page to your WooCommerce breadcrumbs, you’ll need to modify your theme’s functions.php file. Here’s a step-by-step guide:

1. Locate Your Child Theme’s functions.php File:

   • Access your WordPress site’s backend.
   • Navigate to “Appearance” and select “Theme Editor.”
   • On the right-hand side, find and click on “Theme Functions (functions.php).”
2. Add the PHP Code: 
   In the functions.php file, add the following PHP code to hook into WooCommerce’s breadcrumb trail and append the Shop page link:

   //add "shop" item link in woocommerce breadcrumb
   add_filter( 'woocommerce_get_breadcrumb', function($crumbs, $Breadcrumb){
           $shop_page_id = wc_get_page_id('shop'); //Get the shop page ID
           if($shop_page_id > 0 && !is_shop()) { //Check we got an ID (shop page is set). Added check for is_shop to prevent Home / Shop / Shop as suggested in comments
               $new_breadcrumb = [
                   _x( 'Shop', 'breadcrumb', 'woocommerce' ), //Title
                   get_permalink(wc_get_page_id('shop')) // URL
               ];
               array_splice($crumbs, 1, 0, [$new_breadcrumb]); //Insert a new breadcrumb after the 'Home' crumb
           }
           return $crumbs;
       }, 10, 2 );
   

3. Save the Changes: After adding the code, make sure to save the functions.php file.

Now, when visitors browse your WooCommerce store and navigate to product pages, the breadcrumb trail will include a link to the Shop page. This link allows users to easily return to the main shopping area, improving their overall shopping experience.

Customize to Fit Your Needs:

You can further customize the code by changing the name of the Shop page link or adjusting its styling to match your site’s design. This flexibility ensures that the breadcrumb integration seamlessly aligns with your eCommerce store’s branding and navigation requirements.

In conclusion, adding the Shop page to WooCommerce breadcrumbs programmatically is a valuable enhancement for your online store’s user experience. It simplifies navigation and helps customers find their way back to the primary shopping area effortlessly. By following the steps outlined in this guide, you can provide a more intuitive shopping journey for your website visitors.