Web Analytics

Fill the form & Get Installation Support





    1) Add “Hover” attribute

    Go to Stores > Attributes > Products and click on “Add New Attribute”

    Create the attribute “Hover” and Select “Media Image” in the “Catalog Input

    Type for Store Owner” dropdown and Save it.

    2) Now go to Attribute Set.

    Stores > Attributes > Attribute Set

    Add “hover” attribute to “Images” Group like the below screenshot.

    3) Now go to product and upload an image and select Hover like below screenshot.

    4) Now we have to use this attribute in the listing page. So we have to make ‘used_in_product_listing’ to 1.

    We can do that by using MySQL.
    You need to take “hover” Attribute_ID from admin.
    You can go to your “hover” attribute page in admin and get its ID from URL.
    Suppose that Attribute_ID is 99 in our case.
    Now, go to the database and select the “catalog_eav_attribute” table.
    Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.
    Use below MySQL query :

    UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

    5) Declare Hover attribute in view.xml
    view.xml should be in app/design/frontend/MyThemeVendor/MyTheme/etc/view.xml

    add below code

     

    6) Get “Hover” attribute in listing template

    Listing template is in app/design/frontend/MyThemeVendor/MyTheme/Magento_Catalog/templates/product/list.phtml

    User below helper to initialize hover image.

    Search “product-image” class and use the below code and CSS to get a hover image.

    CSS:

     

    Fill the below form if you have any Magento programming need.





      Recent Articles

      Author Info

      Author Image

      Magento Certified Developer

      Hire V. Brahmbhatt

      Get a Free Quote





        Let our Magento expert connect to discuss your requirement.


          We offer Magento
          certified developers.

          Our Magento clientele
          is 500+.

          We sign NDA for the
          security of your projects.

          We’ve performed 100+
          Magento migration projects.

          Free quotation
          on your project.

          Three months warranty on
          code developed by us.