How to Customize the Home Link in WooCommerce Breadcrumbs

min read / Custom Code, Plugins, WooCommerce, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: WooCommerce provides posibillity to display breadcrumbs. These are usable especially for navigation between shop page and archive categories. By default the first link is called Home and url is set to the homepage. What if we want to set it to the shop page? BeforeAfter WooCommerce breadcrumb filter usage WooCommerce provides a straightforward way to…

WooCommerce provides posibillity to display breadcrumbs. These are usable especially for navigation between shop page and archive categories. By default the first link is called Home and url is set to the homepage. What if we want to set it to the shop page?

Before

After

WooCommerce breadcrumb filter usage

WooCommerce provides a straightforward way to modify the breadcrumb home link by using filters. Let’s break down the process step by step.

Step 1: Add Custom Text to the Breadcrumb Home Link

The first function, ‘woo_change_breadcrumb_home_text‘, is responsible for changing the text displayed for the home link from “Home” to “E-shop.” Here’s the code which you can use in your code snippets plugin:

add_filter('woocommerce_breadcrumb_defaults', 'woo_change_breadcrumb_home_text');

function woo_change_breadcrumb_home_text($defaults) {
    $defaults['home'] = 'E-shop';
    return $defaults;
}

This code applies a filter to ‘woocommerce_breadcrumb_defaults‘ which replaces the ‘home’ value in the default breadcrumb settings with ‘E-shop.’ As a result, the breadcrumb trail will now display “E-shop” instead of “Home.”

Step 2: Modifying the Breadcrumb Home Link URL

The second function, ‘woo_custom_breadcrumb_home_url,’ will change the URL of the home link. It changes the link from the default ‘/’ (root of the website) to ‘/shop’ (the shop page). Here’s the code:

add_filter('woocommerce_breadcrumb_home_url', 'woo_custom_breadcrumb_home_url');

function woo_custom_breadcrumb_home_url() {
    return '/shop/';
}

By applying a filter to ‘woocommerce_breadcrumb_home_url,’ this function returns the modified URL ‘/shop/’ when buyers click on the home link in the breadcrumbs trail.

Conclusion

Customizing the home link in WooCommerce breadcrumbs is a simple yet effective way to improve the user experience on your e-store. By following the provided code, you can change the default “Home” text to “E-shop” and update the URL to ‘/shop’ to better suit your online store’s URL structure.

0 comments