Turn H2 into text on categorypages

Hi @dwnl

Thanks for reaching out!

I understand that you would like to change the text style of the Category Title on your Product Category pages since this is not good for SEO, correct?

Can you please share with us a link or the URL of your site for us to check this further?

No….
On woocommerce product category/archive pages, all the productnames/titels have the h2 class.

<a href="https://www.****.nl/product/bank-2-zits/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><h2 class="woocommerce-loop-product__title">Bank – 2 zits</h2></a>

These should not have any h* tag/class, and should be in plain text. Something like:

<div class="loop-component loop-component-title pb-10">
                            <div class="text text-2 fw-700 text-left clr-grey-1">Interieur BMW M2 (F87) Leder Dacota Black/Blue Stitching</div>
                        </div>
OR

<span class="truncate">Lucideco - Hoekbank - Antraciet - L vormig - Met Slaapbankoptie</span>

How do I remove the h2 tag/class and get the normal text?
I do not want to share a link here in public…

• This reply was modified 1 year, 6 months ago by SLV.
• This reply was modified 1 year, 6 months ago by SLV.
• This reply was modified 1 year, 6 months ago by SLV.

Hi @dwnl

There are two ways of doing this – with hooks, or by overriding the WooCommerce template file in your Child theme.

You can follow this thread instructions and change the title according to your requirements:

https://stackoverflow.com/questions/58651822/change-woocommerce-loop-product-title-from-h2-to-h6

Let me know how that goes!

@amiralifarooq thanks for your help, methode 2 works for me!
In that code it says h6. I do not want any h class in it what so ever.
How do I turn this h6 into just plain text?
I tried /span like so:

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
add_action('woocommerce_shop_loop_item_title', 'soChangeProductsTitle', 10 );
function soChangeProductsTitle() {
    echo '<span class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</span>';
}

and changed fontsize and weight in CSS like so:

	/*Product titles*/
span.woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: bold;
}

But now I lost the hover over the producttitle that will underline the title, let it change color and the link that leads to the product…
So how do I turn this h6 into just plain text? but keep the hover effects?

• This reply was modified 1 year, 6 months ago by SLV.
• This reply was modified 1 year, 6 months ago by SLV.
• This reply was modified 1 year, 6 months ago by SLV.
• This reply was modified 1 year, 6 months ago by SLV.

Hi @dwnl

Glad to know it’s working fine, once you remove the <h> tag it will remove the title style, you need to modify it with CSS code.

I am using this code to completely remove the <h> tag and changed it with <div>

remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
add_action('woocommerce_shop_loop_item_title', 'soChangeProductsTitle', 10 );
function soChangeProductsTitle() {
    echo '<div class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '">' . get_the_title() . '</div>';
}

And used this CSS code to decorate the Hover style.

div.woocommerce-loop-product__title:hover {
color: black !important;
text-decoration: underline;
}

The final output should be this: https://screencast-o-matic.com/i/c0hjqiVzWVX

I hope that helps!

We are almost there…
Both codes removed the actual link to the product page of that product…
How do I get that back?

• This reply was modified 1 year, 6 months ago by SLV.

So in 1 of my shop this code works fine:

if ( ! function_exists( 'woocommerce_template_loop_product_title' ) ) {
	function woocommerce_template_loop_product_title() {
		echo '<div class="wd-entities-title"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></div>';
	}
}

Hello @dwnl,

I understand you want to add the product link too, I guess you can use the get_permalink() function.

Edited version of the snippet above:

remove_action('woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );

add_action('woocommerce_shop_loop_item_title', 'soChangeProductsTitle', 10 );

function soChangeProductsTitle() {    

echo '<div class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div>';

}

It works fine on my test site, but I suggest adding it to a staging environment first to ensure it doesn’t break any theme elements.

Cheers!

So I put this code: <span class=”<?php echo esc_attr( apply_filters( ‘woocommerce_product_loop_title_classes’, ‘woocommerce-loop-product__title’ ) ); ?>”></span>

/**
 * Show the product title in the product loop. By default this is an H2.
 */
function woocommerce_template_loop_product_title() {
    ?><span class="<?php echo esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ); ?>"><?php the_title(); ?></span><?php
}

Directly into the functions.php and it works great.

Hi @dwnl

I’m glad you were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

Meanwhile, if you have a moment to spare, we would love it if you could share your thoughts with us by leaving a review or feedback. Your experience and feedback are important to help us improve and ensure we’re always providing the best possible support.

Thanks!