Remove <H1> page title in product page using a function

Question

I would like to ask how to remove < h1 class="page-title"> in the product page?

Here's my sample link: https://pwbackup.panelwallart.com/products/colorful-world-map-on-old-wall-canvas-prints-panel-wall-art/

It seems that two < h1> tags exist on product pages, the page title, and product title.

I'm using the Porto theme for my Woocommerce Site.

Answer 1

There are two ways of doing this - with hooks, or by overriding the WooCommerce template file in your Child theme. First, let's look at the file override:

Method 1 - File Override

From the WooCommerce plugin folder, copy the templates/single-product/title.php file, and paste it into your active theme under woocommerce/single-product/title.php

Then, simply 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>' );

Method 2 – Using Hooks

We find in the template file content-single-product.php that the function we need to override is called woocommerce_template_single_title:

/**
  * Hook: woocommerce_single_product_summary.
  *
  * @hooked woocommerce_template_single_title - 5
  * @hooked woocommerce_template_single_rating - 10
  * ...

WooCommerce template functions are defined in includes/wc-template-functions.php, and this function looks like:

if ( ! function_exists( 'woocommerce_template_single_title' ) ) {

    /**
     * Output the product title.
     */
    function woocommerce_template_single_title() {
        wc_get_template( 'single-product/title.php' );
    }
}

What we're going to do is unhook that action, then hook in our own function - just add this code to your functions.php file and make any changes to the heading tags in the the_title() function:

remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_title', 5 );
add_action('woocommerce_single_product_summary', 'your_custom_function_call', 5 );
function your_custom_function_call() {
     the_title( '<h2 class="product_title entry-title">', '</h2>' );
}

Answer 2

Thank you for the response!

I followed the first two methods, but it seems that the page title is still active on product pages. After looking for some files, I found out that there are actually "Seven" header file types (I chose 7 in my theme settings). I opened the file and found the culprit. Since I only want the extra h1 to be removed on the product page, I just put a condition in it.

     <? php if(!is_product()){  ?>
        <div class="text-center<?php echo ! $hide_title ? '' : ' d-none'; ?>">

            <h1 class="page-title<?php echo ! $sub_title ? '' : ' b-none'; ?>"><?php echo porto_strip_script_tags( $title ); ?></h1>

            <?php
            if ( $sub_title ) :
                ?>
                <p class="page-sub-title"><?php echo porto_strip_script_tags( $sub_title ); ?></p>
            <?php endif; ?>
        </div>
        <?php } ?>