How can I change the product <h2> in Woocommerce Storefront to <h3>?

Question

I'm using a child theme to Woocommerce's Storefront theme. On the home page, it is rendering the product names of the featured products as h2s. I would like to change these to h3s (SEO reasons).

The h2s use this class: woocommerce-loop-product__title. I searched through the Storefront theme, and the only place I found that class was in CSS.

I looked in this file: /storefront/inc/storefront-template-functions.php and found this code:

if ( ! function_exists( 'storefront_featured_products' ) ) {
/**
 * Display Featured Products
 * Hooked into the `homepage` action in the homepage template
 *
 * @since  1.0.0
 * @param array $args the product section args.
 * @return void
 */
function storefront_featured_products( $args ) {

    if ( storefront_is_woocommerce_activated() ) {

        $args = apply_filters( 'storefront_featured_products_args', array(
            'limit'      => 4,
            'columns'    => 4,
            'orderby'    => 'date',
            'order'      => 'desc',
            'visibility' => 'featured',
            'title'      => __( 'We Recommend', 'storefront' ),
        ) );

        $shortcode_content = storefront_do_shortcode( 'products', apply_filters( 'storefront_featured_products_shortcode_args', array(
            'per_page'   => intval( $args['limit'] ),
            'columns'    => intval( $args['columns'] ),
            'orderby'    => esc_attr( $args['orderby'] ),
            'order'      => esc_attr( $args['order'] ),
            'visibility' => esc_attr( $args['visibility'] ),
        ) ) );

        /**
         * Only display the section if the shortcode returns products
         */
        if ( false !== strpos( $shortcode_content, 'product' ) ) {

            echo '<section class="storefront-product-section storefront-featured-products" aria-label="' . esc_attr__( 'Featured Products', 'storefront' ) . '">';

            do_action( 'storefront_homepage_before_featured_products' );

            echo '<h2 class="section-title">' . wp_kses_post( $args['title'] ) . '</h2>';

            do_action( 'storefront_homepage_after_featured_products_title' );

            echo $shortcode_content;

            do_action( 'storefront_homepage_after_featured_products' );

            echo '</section>';

        }
    }
}

}

I think this runs the Featured Products section.

I tried changing this code:

echo '<h2 class="section-title">' . wp_kses_post( $args['title'] ) . '</h2>';

to:

echo '<h3 class="section-title">' . wp_kses_post( $args['title'] ) . '</h3>';

I uploaded the /inc/ folder to my child directory, and there were no changes. I tried uploaded the storefront-template-functions.php file into the /inc/ file of the original storefront theme. Again, nothing happened.

I'm stumped. I really thought I had the correct bit of code to change these to h3s. Any idea what I need to do to change the Featured Product h2s into h3s?

Are you sure it is not changed? There are two possibilities. Either you edited the wrong part of the code (There are probably some other code to produce the h2) or it was actually changed, but some css made h3 looks like h2. You can right click and view source code to make sure. — goFrendiAsgard
I did use the browser's inspect function to confirm they are still rendering as h2s — Colin
Just a bit note: In case of you have a JavaScript that change some HTML tags, browser's inspect element will not show you the original tags. That's why I suggest view source. However, I'm glad you've find the solution by yourself :) — goFrendiAsgard
@goFrendiAsgard - Thanks for the tip. I didn't realize that. — Colin

Colin Colin · Accepted Answer · 2018-06-22T02:00:02

Well, it turns out that I was looking in the wrong place and doing the wrong thing. I needed to add something to the functions.php file in my child theme to get this to work. Here's what I added:

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
add_action('woocommerce_shop_loop_item_title', 'abChangeProductsTitle', 10 );
function abChangeProductsTitle() {
echo '<h3 class="woocommerce-loop-product__title">' . get_the_title() . '</h3>';
}

I got the basis for this code from this answer: When changing woocommerce title hook the first item doesn't change

How can I change the product <h2> in Woocommerce Storefront to <h3>?

2 Answers