How to change <H1> tag in the WooCommerce product page

Question

How can I change the product title h1 tag in woocommerce? I already have a h1 tag on my page and want the product name to be h2.

the current title comes from:

do_action( 'woocommerce_single_product_summary_single_title' );

Solution 1

You can override the default WooCommerce title.php template by your own theme.

Copy woocommerce/templates/single-product/title.php and paste it into your active theme under woocommerce/single-product/title.php

Change this line the_title( '<h1 itemprop="name" class="product_title entry-title">', '</h1>' ); to the_title( '<h2 itemprop="name" class="product_title entry-title">', '</h2>' );

The code is tested and fully functional.

---

Reference

• Overriding Templates via a Theme

Solution 2

I came here searching for answer, but I like to do things using Filters or Action Hooks. After bit of search, I found a way to do the same thing with Action Hook.

Copy following code to Child Theme 'functions.php'

//* Change Woo Product H1 Tag to H3
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'sgl_template_single_title', 5 );
function sgl_template_single_title() {
    the_title( '<h3 class="product_title entry-title">', '</h3>' );
}

This will change the H1 Tag in the Product Title shown in Single Product pages to H3. I'm using this code snippet on my project and works great.