1

I'm trying to figure a way to use the home icon from FontAwesome in my breadcrumb trail for WooCommerce but it just shows up as a blank. Basically, I tweaked the code Woo provides to replace breadcrumb text with other text, but I guess it doesn't like HTML tags. This is my code.

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
    $defaults['home'] = '<i class="fas fa-home"></i>';
    return $defaults;
}
Adam Bell
  • 1,049
  • 1
  • 16
  • 50

2 Answers2

3

A less elegant solution would be to edit the breadcrumbs template file. You'll need to use a child theme and have an existing breadcrumbs template file under:

/woocommerce/global/breadcrumb.php

where / is your child theme folder. Inside breadcrumb.php find the following if statement:

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] );
        }

change the above if statement to the following:

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

Here's a guide on how to edit WooCommerce template files.

Nigel Rodgers
  • 66
  • 5
  • That kind of worked, although it was missing a } at end of the if statement. The good news is I got the Home icon but the bad news is I no longer see the name of my product in my breadcrumb trail. Basically, it's just Home / Product Category / instead of Home / Product Category / Name of Product – Adam Bell Jun 17 '19 at 19:37
  • Edit: I added the missing closing "}". – Nigel Rodgers Jun 20 '19 at 13:14
  • Ah I see. That might mean the original if statement you pasted over has a breadcrumb for the product. Mine does not. You should be able to get back the original if statement from the parent theme and rewrite it to work with the home icon. That said having a bread crumb for the current page is kind of redundant because there is also the page title. Also did you try the other solution that uses a filter function and CSS? I recommend that solution over this one. – Nigel Rodgers Jun 20 '19 at 13:27
  • Fixed the missing bread crumb by adding back the else to the main if statement. It was kind of obvious, was silly for me to miss that mistake. I still recommend the other solution. using a filter in functions.php is easier to trace for anyone who might inherit the code. – Nigel Rodgers Jun 20 '19 at 14:32
  • Nigel, much better. Looks great now. Thanks for the alterations. – Adam Bell Jun 20 '19 at 18:17
2

The filter only allows you to change the text without adding HTML tags as the home delimiter is wrapped in esc_html(). Here's one solution. Change the filter to the following:

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
function wcc_change_breadcrumb_home_text( $defaults ) {
    $defaults['before'] = '<span class="nmr-crumb">';
    $defaults['after'] = '</span>';
    $defaults['home'] = ' ';
    return $defaults;
}

Use a space inside the single quotes on the line with $defaults['home'] = ' ';

Next, you'll need to add the following to your theme style.css:

.woocommerce-breadcrumb .nmr-crumb:first-child a {
    text-decoration: none;
}
.woocommerce-breadcrumb .nmr-crumb:first-child a::before {
    font-family: FontAwesome;
    content: '\f015';
}

Credit: https://wordpress.org/support/topic/swap-home-for-icon/

Nigel Rodgers
  • 66
  • 5