Archived topic
Woocommerce stopped Display secondary image on hover after moving product title
7 replies · Started by Kostas on March 7, 2022
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.
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 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 :)
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.
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