[Support request] Woocommerce stopped Display secondary image on hover after moving product title

[Kostas]

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

[Ying]

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.

[Kostas]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kostas]

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.

[Ying]

Hi Kostas,

Sorry I should’ve made it more clear, the solution here is to only add my PHP snippet and remove your snippets:
https://generatepress.com/forums/topic/woocommerce-stopped-display-secondary-image-on-hover-after-moving-product-title/#post-2145808

Can you give it another try?

Let me know 🙂

[Kostas]

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.

[Ying]

You can go to customizer > layout > Woocommerce, uncheck the Display product title option, so there will only be one title.

Also when i mouse over the title on top disappears that is not what i’d like.

Not sure what this means, let me know if there’s any more questions after apply the CSS I mentioned here:
https://generatepress.com/forums/topic/woocommerce-stopped-display-secondary-image-on-hover-after-moving-product-title/#post-2145808

[Author]

Posts