How can I alter the final result in a breadcrumb so it shows as an H2 when using a childtheme on the Storefront WooCommerce theme?

Question

I'm using WooCommerce, I have Storefront theme applied and I have then created a childtheme of that which I can use to alter my site.

What I am trying to do is alter the final result in the breadcrumb shown on all pages to display the result in an <h2> tag, rather than the standard <p> tag it is currently in. So for example:

<p>Homepage > Page1 > Page2</p>

would end up becoming:

<p>Homepage > Page1 > </p><h2>Page2</h2>

I am a novice when it comes to altering childthemes on WordPress and have not been able to find any helpful answers online which is why I am asking for help here. I understand that the breadcrumbs.php file will need to be altered however I am unsure exactly what sections would need to be altered to allow for the changes I have proposed above. These changes are all essential for SEO purposes.

Answer 1

You can try rewrite breadcrumb.php in your theme, for example:

yourtheme/woocommerce/global/breadcrumb.php

And the code will be something like this:

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

if ( ! empty( $breadcrumb ) ) {

    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 '<h2 class="some-class">' . esc_html( $crumb[0] ) . '</h2>'; // edited here
        }

        echo $after;

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

    echo $wrap_after;

}