how to add custom HTML in woocommerce breadcrumb? [duplicate] - php

Question

This question already has an answer here:
Replacing the home link in woocommerce breadcrumbs
(1 answer)
Closed 5 years ago.
I am working on WooCommerce breadcrumb. I just want to add span to home crumb. When i trying to do it, woocommerce removing it
add_filter( 'woocommerce_breadcrumb_defaults', 'change_breadcrumb' );
function change_breadcrumb( $defaults ) {
$defaults['wrap_before'] = '<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">';
$defaults['wrap_after'] = '</ol>';
$defaults['before'] = '<li>';
$defaults['after'] = '</li>';
$defaults['delimiter'] = '';
//add span tag
$defaults['home'] = '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home';
return $defaults;
}
What do i get:
<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
<li>Home</li>
<li>Groceries</li>
</ol>
What do i need:
<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
<li><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li class="active">Groceries</li>
</ol>
image
And would be interesting how to add active class to non-home crumbs.
I think the answer is overriding breadcrumb.php
if(sizeof( $breadcrumb ) !== $key + 1){
echo $before;
} else {
echo $active;
}
if($key == 0){
echo '' . $home . '';
}
else if ( ! empty( $crumb[1] ) && sizeof( $breadcrumb ) !== $key + 1 ) {
echo '' . esc_html( $crumb[0] ) . '';
} else {
echo esc_html( $crumb[0] );
}
And i realized that i can add my own defaults
$defaults['active'] = '<li class="active">';

Answer 1

well.. i suggest a twist on that. would it be possible to use the css3 selector :first-child? (as in tutorial https://www.w3schools.com/cssref/sel_firstchild.asp) to set a background to the first li's link
ul.breadcrumb1:first-child a{
Background:moo!
}
with proper padding you will obtain the same effect