Remove "Shop" from BreadCrumb in WooCommerce

Question

How to Remove Shop Text from Bread Crumb in woo commerce?[Home-->Shop-->Pink Himalayan Salt] I want to Set Bread crumb as per my Navigation menu in m WordPress site.[Home-->Products-->Salt-->Pink Himalayan Salt] I have used some Pages, Custom Links, Categories & Products to My main Menu.

See screenshot.

Bredcrumb -

---

Menu -

Answer 1

This can be done on the dashboard with no code.

• Go to > pages.
• Select quick edit on the page which as "- Shop Page" after the title (So in this instance it is "Shop - Shop Page")
• In quick edit change the title of the page from "Shop" to "Products.

This must mean that woocommerce uses the page title to populate the breadcrumb menu.

Other useful tips

In case you need it the breadcrumb menu settings are under Woocommerce > Settings, then "product" tab, then Shop Page (drop-down select page) this is how you allocate the "-shop page".

Then for more control over what is shown in the breadcrumb menu there are more settings under "product permalinks"

Answer 2

Inspired by LoicTheAztec, here is a solution for a similar but slightly different requirement. Let's say you just wanted to remove the Shop link completely:

Copy the file: plugins/woocommerce/templates/global/breadcrumb.php

to: themes/yourtheme/woocommerce/global/breadcrumb.php

In the new file, look for the line

foreach ( $breadcrumb as $key => $crumb ) {

and after that line, add this line:

if (trim(strip_tags($crumb[0])) == 'Shop') { continue; }

---

So the final code will look like this:

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

if ( ! empty( $breadcrumb ) ) {

    echo $wrap_before;

    foreach ( $breadcrumb as $key => $crumb ) {

if (trim(strip_tags($crumb[0])) == 'Shop') { continue; }

        echo $before;

        if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
            echo '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
        } else {
            echo esc_html( $crumb[0] );
        }

        echo $after;

        if ( sizeof( $breadcrumb ) !== $key + 1 ) {
            echo $delimiter;
        }
    }

    echo $wrap_after;

}

Answer 3

I have Got the answer by doing changes on functions.php https://www.screencast.com/t/U42lqPduY707

if (get_post_type() ==  'product')
{
echo sprintf($link, '#', esc_html__('Products', 'thegem'));
//echo sprintf($link, get_permalink(get_option ('woocommerce_shop_page_id' , 0 )), esc_html__('Product', 'thegem'));
$taxonomy = 'product_cat';
$terms = get_the_terms( $post->ID, $taxonomy );
foreach ( $terms as $c ) {
$c->term_id;
//  echo '<a href="' . get_term_link($c, 'product_cat') . '">' . ($c->name ) . '</a>';
if($c->term_id=='36') {
echo $delimiter;
echo sprintf($link, get_permalink( 106 ), esc_html__($c->name, 'thegem'));
}
}
}
else {
$slug = $post_type->rewrite;
printf($link, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
}

Answer 4

You can override WooCommerce templates via the theme (read the following official documentation):

Template Structure + Overriding Templates via a Theme

Once you have copied the file from plugins/woocommerce/templates/global/breadcrumb.php
to: themes/yourtheme/woocommerce/global/breadcrumb.php, you will be able to change the code by replacing it with the following:

<?php
/**
 * Shop breadcrumb
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/global/breadcrumb.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.3.0
 * @see         woocommerce_breadcrumb()
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

if ( ! empty( $breadcrumb ) ) {

    $breadcrumb0 = $breadcrumb[0];
    $shop_txt = __( 'Shop', 'woocommerce' );
    $products_txt = __( 'Products', 'woocommerce' );
    $products_url = home_url( '/products/' );
    $breadcrumb10 = array( $products_txt );
    $breadcrumb11 = array( $products_txt, $products_url );
    if(is_product() || is_shop() || is_product_category() || is_product_tag() ){
        if( $breadcrumb[1][0] == $shop_txt ){
            if( ! empty( $breadcrumb[1][1] ) )
                $breadcrumb[1] = $breadcrumb11;
            else
                $breadcrumb[1] = $breadcrumb10;
        } else {
            unset($breadcrumb[0]);
            array_unshift($breadcrumb, $breadcrumb0, $breadcrumb11);
        }
    }

    echo $wrap_before;

    foreach ( $breadcrumb as $key => $crumb ) {

        echo $before;

        if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
            echo '<a href="' . esc_url( $crumb[1] ) . '">' . esc_html( $crumb[0] ) . '</a>';
        } else {
            echo esc_html( $crumb[0] );
        }

        echo $after;

        if ( sizeof( $breadcrumb ) !== $key + 1 ) {
            echo $delimiter;
        }
    }

    echo $wrap_after;

}

This will:

1. Replace "Shop" by "Products"
2. Add "Products" just after "Home" when "Shop" doesn't exits.

So your breadcrumps will always start with: Home > Products on shop, archives and single product pages…

Answer 5

This might be solved with CSS, but cannot help unless you post a link to your shop. Try like this:

Add this line to your custom CSS

ul.breadcrumbs li:nth-of-type(2) {display:none}

If it does not work, might also need !important

ul.breadcrumbs li:nth-of-type(2) {display:none!important}

I cannot comment that is why I had to answer. please provide the link of your site. I'll update my answer with exact CSS.