phpwordpresswoocommerceh2child-theming

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?


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.


Solution

  • 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;
    
    }