How to customize breadcrumb navigation in woocommerce?

Mar 06 • 2 min read

Knowledge Base > eCommerce > How to customize breadcrumb navigation in woocommerce?

To customize breadcrumb navigation in WooCommerce, you can follow the steps below:

  1. Locate the breadcrumb template file: The breadcrumb template file is located in the woocommerce/templates/global/breadcrumb.php directory of your WordPress installation. Copy this file and paste it into your theme’s directory.
  2. Modify the breadcrumb template: Open the copied breadcrumb.php file and modify it to suit your needs. You can add, remove or rearrange the elements in the breadcrumb trail.
  3. Customize the breadcrumb separator: By default, WooCommerce uses the > symbol as the separator between breadcrumb elements. To customize the separator, you can modify the $separator variable in the breadcrumb.php file.
  4. Add the modified breadcrumb template to your theme: After making your modifications, save the breadcrumb.php file 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.

Useful Links:
  1. WooCommerce
  2. WPBeginner

Author

Common Questions

  • What is breadcrumb navigation in WooCommerce?

    Breadcrumb navigation is a user interface element that displays the user’s current location within a website or online store. In WooCommerce, the breadcrumb trail typically appears above the main content area and shows the path from the home page to the current product or category page.

  • Can I customize the breadcrumb trail in WooCommerce?

    Yes, you can customize the breadcrumb trail in WooCommerce by modifying the breadcrumb.php file or using a plugin like Yoast SEO or Breadcrumb NavXT.

  • Can I customize the order of elements in the breadcrumb trail?

    Yes, you can customize the order of elements in the breadcrumb trail by modifying the breadcrumb.php file. You can rearrange the elements or remove them entirely.

  • Can I use a plugin to customize the breadcrumb trail in WooCommerce?

    Yes, there are several plugins available for customizing the breadcrumb trail in WooCommerce. Some popular options include Yoast SEO, Breadcrumb NavXT, and WooCommerce Breadcrumbs.

  • How can I add schema markup to my WooCommerce breadcrumb trail?

    To add schema markup to your WooCommerce breadcrumb trail, you can use a plugin like Yoast SEO or Schema Pro. These plugins allow you to add structured data to your breadcrumb trail, which can help search engines understand the content and context of your website.

Related Articles