To customize breadcrumb navigation in WooCommerce, you can follow the steps below:
- Locate the breadcrumb template file: The breadcrumb template file is located in the
woocommerce/templates/global/breadcrumb.phpdirectory of your WordPress installation. Copy this file and paste it into your theme’s directory. - Modify the breadcrumb template: Open the copied
breadcrumb.phpfile and modify it to suit your needs. You can add, remove or rearrange the elements in the breadcrumb trail. - Customize the breadcrumb separator: By default, WooCommerce uses the
>symbol as the separator between breadcrumb elements. To customize the separator, you can modify the$separatorvariable in thebreadcrumb.phpfile. - Add the modified breadcrumb template to your theme: After making your modifications, save the
breadcrumb.phpfile and upload it to your theme directory. Your new breadcrumb template will now be used instead of the default WooCommerce breadcrumb template.
Customize different breadcrumb navigation easily:
Change the Home text
To change the Home text in WooCommerce breadcrumb, you can add the following code to your theme’s functions.php file:
add_filter(‘woocommerce_breadcrumb_defaults’, ‘custom_breadcrumb_home_text’);
function custom_breadcrumb_home_text($defaults) {
$defaults[‘home’] = ‘My Custom Home Text’;
return $defaults;
}
Change Home link to a different URL
To change the Home link to a different URL, you can add the following code to your theme’s functions.php file:
add_filter(‘woocommerce_breadcrumb_home_url’, ‘custom_breadcrumb_home_url’);
function custom_breadcrumb_home_url($url) {
return ‘http://example.com’; // Replace with the URL you want to use
}
Replace “http://example.com” with the URL you want to use instead of the default Home URL.
Change the breadcrumb separator
To change the breadcrumb separator in WooCommerce, you can add the following code to your theme’s functions.php file:
add_filter(‘woocommerce_breadcrumb_defaults’, ‘custom_breadcrumb_separator’);
function custom_breadcrumb_separator($defaults) {
$defaults[‘delimiter’] = ‘ > ‘; // Replace with the separator you want to use
return $defaults;
}
Replace “> ” with the separator you want to use instead of the default separator.
How to remove the breadcrumb
To remove the breadcrumb trail from WooCommerce, you can add the following code to your theme’s functions.php file:
remove_action(‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20);
This will remove the breadcrumb trail from all WooCommerce pages.
