Site logo

Archived topic

Woocommerce stopped Display secondary image on hover after moving product title

7 replies · Started by Kostas on March 7, 2022

Viewing posts 1–8 of 8

I have moved the position of the Woocommerce product title on top of the Product Image in the Shop page.
For this i used the following actions:

`remove_action('woocommerce_before_shop_loop_item_title','woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 11 );

However now WooCommerce stopped Displaying the secondary image on hover.

Can anybody please explain this? I suppose this should work out of the box.

https://stackoverflow.com/questions/71298206/woocommerce-stopped-display-secondary-image-on-hover-after-moving-title-on-top-o

Hi Kostas,

The hover to show second image is a feature of GP, so it won't work out of box with woocommerce_template_loop_product_thumbnail.

Try this snippet instead:

add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_title', 9);

Then you'll need this CSS to reposition the second image:

.wc-has-gallery .secondary-image {
    top: 20px;
}

Adjust the 20px to fit your design.

hi,
thanks for the tip, however i end with images not displaying at all.

I have now replaced my code with:

//move product title on top of image in archive pages
remove_action('woocommerce_before_shop_loop_item_title','woocommerce_template_loop_product_thumbnail', 10 );

add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_title', 11);

Could you please advise?

Hi there,

can you remove the functions you're currently using so we get back to where both images are displayed correctly. And then ill take a look at an alternative method.

ok,

i have removed those 2 actions

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 11 );

now the 2nd image displays fine.

hi,
i now get the Product title moved on top but the Product title also remains underneath the Product image, having 2 titles one on top and one underneath the image.
Also when i mouse over the title on top disappears that is not what i'd like.

This archived topic is closed to new replies.