How to change WooCommerce loop product title HTML output in single product page and archive page

I’m currently working on designing my custom WooCommerce theme and wondering how I could change the HTML output of loop_product_title in single product page and in archive pages.

I have less knowledge of functions but I made this content but it did not work. I just want the loop product title to have element and in archives pages to have .

if ( is_product() ){
function woocommerce_template_loop_product_title() {
echo '<h2 class="product-title">' . get_the_title() . '</h3>';
}
elseif ( is_shop() ){
function woocommerce_template_loop_product_title() {
echo '<span class="product-title">' . get_the_title() . '</span>';
}
}
}

Please someone help me out. I have tried the best of what I could.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The main problems with what you’ve got are tha

1. your close bracket } for the is_product() case is in the wrong place: it should be before the elseif not at the bottom of the block. (This is what Tom meant by indenting your code correctly: if you’d indented each {…}, which your IDE will do for you, this would have been obvious.)
2. this code, defining the functions, will run before WordPress has enough state loaded to determine is_product() or is_shop(): at the point the theme is loaded the main query hasn’t been initialised yet.

It is OK to wrap function definitions in if-else, e.g. see WordPress’s pluggable.php or indeed wc-template-functions which is what you’re overriding here, but that’s not the correct approach for this. Instead, test is_product and is_shop inside the function:

function woocommerce_template_loop_product_title() {
    if ( is_product() ){
        echo '<h2 class="product-title">' . get_the_title() . '</h2>';
    } elseif ( is_shop() ) {
        echo '<span class="product-title">' . get_the_title() . '</span>';
    }
    // do you need an 'else' case here too?
}

because by the point this function is called WordPress will have loaded enough page state for is_product and is_shop.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0