1

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.

LionHeart-Nerd
  • 61
  • 15
  • _“These changes are all essential for SEO purposes.”_ - I’d rather question that to begin with. You’ll end up with a `h2` in a list of links, a headline that is then not even followed by any actual content it could be “headlining” on that same level. – CBroe Sep 17 '20 at 14:00
  • For the site I am working on, this is the only logical way to be able to include keywords into an h2 tag - But it also fixes a secondary issue where by the storefront theme on mobile doesn't flow very well, so the h2 at the end of the breadcrumb acts to reinforce the page title pre-images, rather than the default which is to use the title after the images?! I know it can be fixed by changing elements around, but this fix works better for the sites SEO universally. Thanks for your concerns though, very valid and very true - but currently the pros outweigh the cons. – LionHeart-Nerd Sep 17 '20 at 14:30

1 Answers1

0

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;

}
Dmitry Leiko
  • 3,970
  • 3
  • 25
  • 42
  • This works almost perfectly, thank you so much for your help! The only issue I am having, is that because it's now a `

    ` tag and a `

    `, they don't seem to want to sit on the same line, and the h2 section is defaulting to the line below. Would there be any way of getting them in one single line?

     – LionHeart-Nerd Sep 17 '20 at 14:25
  • You should add some `class` for the `H2` quick example: `

    ` and in your `css` rules `.some-class { display: inline-block }`

     – Dmitry Leiko Sep 17 '20 at 14:43
  • I followed all of your instructions and it has come out exactly how I wanted it. I cannot thank you enough! – LionHeart-Nerd Sep 17 '20 at 14:57
  • The only thing I can add is that `{ display: inline }` works a little better than `{ display: inline-block }`, especially when viewing the site on a mobile as IOS didn't seem to like the word block being used. – LionHeart-Nerd Sep 17 '20 at 15:05