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?
Advertisement
Answer
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