When changing woocommerce title hook the first item doesn't change

Question

I have a strange behaviour that I don't understand

I've changed the woocommerce_shop_loop_item_title hook to add a link to the title of the product. This is my code inside functions.php

// Add HREF TO TITLE
function abChangeProductsTitleHook(){
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    add_action('woocommerce_shop_loop_item_title', 'abChangeProductsTitle', 10 );
}
add_action( 'woocommerce_shop_loop_item_title', 'abChangeProductsTitleHook' );
function abChangeProductsTitle() {
    echo '<h2 class="woocommerce-loop-product_title"><a href="'.get_the_permalink().'">' . get_the_title() . '</a></h2>';
}

It works perfectly on all the products except the first one.

I've also made a similar change to another hook to change the thumbnail image to a background image and also this one doesn't work on the first product. It's always the first product even if I change the order of the products.

Below you see a screenshot of the the first row of products on the page and that the first one is displayed differently

It would be really helpful if anyone knows that problem or can point me in the right direction .

Thank you very much Alex

Answer 1

The way you are removing and adding the woocommerce_shop_loop_item_title is the problem. Try it this way.

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 '<h2 class="woocommerce-loop-product_title"><a href="'.get_the_permalink().'">' . get_the_title() . '</a></h2>';
}