The WooCommerce plugin provides a built-in feature for displaying breadcrumbs on your online store. However, there may be cases where the breadcrumbs are not being displayed as expected. This can happen due to various reasons, such as theme conflicts or customization issues. To troubleshoot and fix this problem, you can follow these steps:
Check if Breadcrumbs are Enabled: First, ensure that breadcrumbs are enabled in your WooCommerce settings. Go to your WordPress admin dashboard, navigate to “WooCommerce” -> “Settings” -> “Products” -> “Display”, and make sure the “Enable breadcrumbs” option is checked.
Verify Theme Compatibility: Some themes may not fully support WooCommerce breadcrumbs or have their own breadcrumb functionality. In such cases, you can try switching to a default WordPress theme (e.g., Twenty Twenty-One) temporarily to see if the breadcrumbs appear correctly. If they do, you may need to contact the theme developer for assistance or consider using a different theme.
Use a Custom Code Snippet: If the above steps don’t resolve the issue, you can use a custom code snippet to manually display the breadcrumbs. Add the following code to your theme’s functions.php file or create a custom plugin:
function wpsnippets_custom_woocommerce_breadcrumbs() {
if ( function_exists( 'woocommerce_breadcrumb' ) ) {
woocommerce_breadcrumb();
}
}
This code snippet creates a custom function wpsnippets_custom_woocommerce_breadcrumbs()
that checks if the woocommerce_breadcrumb()
function exists (provided by WooCommerce). If it does, the function is called to display the breadcrumbs.
- Display Breadcrumbs in Theme Templates: If you prefer to display the breadcrumbs in specific theme templates, you can use the following code snippet:
<?php if ( function_exists( 'woocommerce_breadcrumb' ) ) : ?>
<div class="woocommerce-breadcrumbs">
<?php woocommerce_breadcrumb(); ?>
</div>
<?php endif; ?>
This code checks if the woocommerce_breadcrumb()
function exists and then displays the breadcrumbs within a <div>
element with the class “woocommerce-breadcrumbs”. You can place this code snippet in your theme’s template files (e.g., single-product.php, archive-product.php) where you want the breadcrumbs to appear.
By following these steps and using the provided code snippets, you should be able to troubleshoot and display WooCommerce breadcrumbs on your website.
Examples
Example 1: Customizing WooCommerce Breadcrumbs
This example demonstrates how to customize the WooCommerce breadcrumbs to display them when they are not being shown by default.
function wpsnippets_custom_woocommerce_breadcrumbs() {
if ( ! is_front_page() && ! is_home() && ! is_shop() ) {
woocommerce_breadcrumb();
}
}
add_action( 'woocommerce_before_main_content', 'wpsnippets_custom_woocommerce_breadcrumbs', 20 );
In this code example, we define a custom function wpsnippets_custom_woocommerce_breadcrumbs()
that checks if the current page is not the front page, home page, or shop page. If it’s not any of these pages, we call the woocommerce_breadcrumb()
function to display the breadcrumbs. We then hook this custom function to the woocommerce_before_main_content
action with a priority of 20.
Example 2: Modifying WooCommerce Breadcrumb Separator
This example demonstrates how to modify the separator used in the WooCommerce breadcrumbs.
function wpsnippets_modify_woocommerce_breadcrumb_separator( $separator ) {
return '<span class="breadcrumb-separator">></span>';
}
add_filter( 'woocommerce_breadcrumb_separator', 'wpsnippets_modify_woocommerce_breadcrumb_separator' );
In this code example, we define a custom function wpsnippets_modify_woocommerce_breadcrumb_separator()
that takes the default separator as a parameter. We then return a modified separator, in this case, a <span>
element with a class of breadcrumb-separator
and a >
symbol. Finally, we hook this function to the woocommerce_breadcrumb_separator
filter.
Example 3: Removing WooCommerce Breadcrumbs
This example demonstrates how to completely remove the WooCommerce breadcrumbs from your website.
function wpsnippets_remove_woocommerce_breadcrumbs() {
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
}
add_action( 'init', 'wpsnippets_remove_woocommerce_breadcrumbs' );
In this code example, we define a custom function wpsnippets_remove_woocommerce_breadcrumbs()
that removes the woocommerce_breadcrumb
function from the woocommerce_before_main_content
action with a priority of 20. We then hook this function to the init
action. By doing so, the WooCommerce breadcrumbs will no longer be displayed on your website.