Add Snippet To Project
Navigating around an eCommerce website can be confusing for customers without a proper navigation system. Therefore, breadcrumbs are critical because they can improve the user navigation experience and SEO. Woocommerce, by default, uses a slash (/) as the breadcrumb delimiter. However, you may want to customize it to fit your site’s design and style. In this article, we will guide you step by step on how to set a custom breadcrumb delimiter in Woocommerce for a seamless custom tailored shopping experience.
function wpturbo_change_breadcrumb_delimiter( $defaults ) {
// Change the breadcrumb delimiter from '/' to '>'
$defaults['delimiter'] = ' > ';
return $defaults;
}
add_filter( 'woocommerce_breadcrumb_defaults', 'wpturbo_change_breadcrumb_delimiter' );
This code snippet enables you to customize the breadcrumb delimiter in WooCommerce, changing it from the default ‘/’ to ‘>’. Bread crumbs are important navigational aids on your website, letting users understand their current location relative to primary sections of your site. In this WooCommerce setting, you can define a different breadcrumb delimiter.
Let’s break it down:
In the first step, we define a new function called wpturbo_change_breadcrumb_delimiter() which is supposed to modify the breadcrumb delimiter in WooCommerce. This function will accept a parameter named $defaults.
function wpturbo_change_breadcrumb_delimiter( $defaults ) { // Change the breadcrumb delimiter from ‘/’ to ‘>’ $defaults[‘delimiter’] = ‘ > ‘; return $defaults; }
The $defaults parameter holds an array of breadcrumb settings used in WooCommerce. In this function, we change the value of the ‘delimiter’ key in this array. The delimiter is initially set as ‘/’, but we override it to a different value. Here, we use the HTML encoding for the ‘>’ character, which is > to replace the default delimiter.
$defaults['delimiter'] = ' > ';Finally, whatever changes we’ve made to the $defaults array in our function, we return it so that WooCommerce can use this updated settings in rendering the breadcrumb structure.
The last part is about adding a filter hook – woocommerce_breadcrumb_defaults that lets us modify the WooCommerce breadcrumb defaults values. We define wpturbo_change_breadcrumb_delimiter as the callback function. This filter will run our custom function each time WooCommerce sets up its breadcrumbs, ensuring that our custom delimiter is used.
add_filter( ‘woocommerce_breadcrumb_defaults’, ‘wpturbo_change_breadcrumb_delimiter’ );
So, whenever WooCommerce will generate breadcrumbs, it will call upon this filter to use the delimiter that we’ve set in our custom function.