How to customize WooCommerce bread crumbs

Bread crumbs ( breadcrumbs ) of WooCommerce allow quick access to the routes of your online store, but not they always fit our tastes, so it's not wrong to learn how to personalize them.

The following codes, added to your customizations plugin or to the functions.php file of the active child theme customize different elements of bread crumbs of WooCommerce use them and adapt them as you like.

Change text Start

Change the separator [19659036] add_filter ('woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_delimiter');
function jk_change_breadcrumb_delimiter ($ defaults) {
// Change the bread crumb separator from '/' to '>'
$ defaults [‘delimiter’] = '& gt; ';
return $ defaults;

add_filter ( 'woocommerce_breadcrumb_defaults' 'jk_change_breadcrumb_delimiter' ) ;

function jk_change_breadcrumb_delimiter ( $ defaults ) {

// Change the separator of the crumbs of bread of '/' to '>'

$ defaults [ 'delimiter' ] = '& gt; '[19659000];

return $ defaults ;


Change it all

] To change all the elements here you have the codes to customize:

Change Start URL

A more typical customization than you might think is to change the default URL of Start the bread crumbs. You can do it with a code like this example:

Remove the breadcrumbs

And, to finish, just remind you that if you do not want to show the bread crumbs of WooCommerce the code to add is this: [19659158] add_action ('init', 'jk_remove_wc_breadcrumbs');
function jk_remove_wc_breadcrumbs () {
    remove_action ('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

add_action ( 'init' 'jk_remove_wc_breadcrumbs' ) ;

function jk_remove_wc_breadcrumbs () [

remove_action ( 'woocommerce_before_main_content' 'woocommerce_breadcrumb' ] 20 0 ) ;


Do you know more tricks for the breadcrumbs of WooCommerce?

Well, nothing, you tell us in the comments.

Loading …

That may also help you: