Last updated on October 18, 2023

WooCommerce breadcrumbs not displaying

Don’t know where to add this snippet? Read our guide: How to add code snippets.

Make WooCommerce breadcrumbs visible and helpful.

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:

  1. 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.

  2. 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.

  3. 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.

  1. 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.

Last updated on October 18, 2023. Originally posted on October 20, 2023.

Leave a Reply

Your email address will not be published. Required fields are marked *