How to Remove WooCommerce Product Title from Breadcrumbs

Having the WoCommerce product title appearing as a part of the breadcrumbs, which sit above the actual product title on single product pages, may look redundant and not very nice.

Here’s how to remove, or more precisely hide, the product title in the breadcrumbs.

We have to customize the WooCommerce breadcrumbs in order to add <span> HTML tags to them. These <span> tags we will customize later in CSS to hide the title in the breadcrumb.

In the functions.php file of the used WordPress theme add this code to customize the WooCommerce breadcrumbs:

add_filter( 'woocommerce_breadcrumb_defaults', 'customize_woocommerce_breadcrumbs' );
function customize_woocommerce_breadcrumbs() {
    return array(
            'delimiter'   => ' / ',
            'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
            'wrap_after'  => '</nav>',
            'before'      => '<span>',
            'after'       => '</span>',
            'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
        );
}

As the <span> tags are added to the breadcrumbs, we can now customize them in the Additional CSS of your theme (available in yoursite.com/wp-admin/customize.php) to remove the product title.

.single-product .woocommerce-breadcrumb span:last-child { display:none !important; }

Any questions or suggestions? If so, you can use the comment form below.

If you want me to implement this on your WooCommerce installation, feel free to contact me.