1

I need to add the image change on hover functionality into the product list page in Magento 2.

When user is in product list page, when he/she hovers mouse over the displayed product, it should show change of image/another image on mouse click and revert back to originally displayed image when user moves mouse pointer away. I added changed image as a custom product attribute as follows.

I added a custom product attribute which has the Media Image in Catalog Input Type for Store Owner option. Then I gave attribute code as hover_image. I Set Add to Column Options and Use in Filter Options to "No".

Then I added my new attribute into attribute set -> default. Moved my attribute into images group. Then I can upload image from backend ( Products->Catalog ) and choose image role as hover_image.

How can I check if certain product has image for hover_image and if that product has one, How can I add the hover effect on product list page?

I tried looping through products in list.phtml but I failed. can anyone just give me a hand? even a pointer to right direction would be helpful. Also it's okay even if you know a way for using direct usage of object manager.

3

In list.phtml use $productImageHover = $block->getImage($_product, 'hover_image');, to get the hover image and add a class for hidden, and on .product-item:hover display the image, also the image width and height should be the same as the main image for the listing category_page_grid/category_page_list depending on your situation, don't forget to hide the "non-hover" image on hover

  • +1 brief and to the point. I will try to post my code when I finish it. – Mohammed Joraid Mar 19 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.