How to flip Product image on hover in wordpress?

4 comments

1. just add custom image field, put 2 images (eg. featured and from custom field) in wrapper and change tier z-index on wrapper hover….
   CSS:

   .product-image--wrapper .img1 {
       position: relative;
       z-index: 1;
   }
   
   .product-image--wrapper .img2 {
       position: relative;
       z-index: 0;
   }
   
   .product-image--wrapper:hover .img2 {
   z-index: 2;
   }
   

   ..or just install: https://wordpress.org/plugins/woocommerce-product-image-flipper/ and follow: http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

   EDIT:

   we fix WooCommerce Product Image Flipper with this code:

   jQuery(document).ready(function($){
       jQuery( 'ul.products li.pif-has-gallery a:first-child' ).hover( function() {
           jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeInDown' ).addClass( 'animated fadeOutUp' );
           jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOutUp' ).addClass( 'animated fadeInDown' );
       }, function() {
           jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeOutUp' ).addClass( 'fadeInDown' );
           jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeInDown' ).addClass( 'fadeOutUp' );
       });
   });
   

2. I am using WordPress 4.5.3 with woo-commerce 2.6.1 and it’s working well, even though that WordPress says the plugin it’s not compatible so I take my own risk.

   Try to add animate.css by daneden on your function, I don’t know if this related or not, but if I commented on the animate.css on the function.php, the plugin didn’t work well.

   oh once more, I think it’s better you change fadeInDown/fadeOutUp, I try to use it just fadeIn/fadeOut, using Down and Up makes weird, IMOO.

3. As the product image flipper is pretty outdated, this tool works fine with my woocommerce shop: WC Secondary Product Thumbnail
   https://de.wordpress.org/plugins/wc-secondary-product-thumbnail/

   (hope it helps, as it took me ages to find a working plugin. Magni image flipper is also strange, as it endlessly flips the images, which is really not what I would expect)

4. Extended Answer of @Matej Đaković=>

   First install the https://wordpress.org/plugins/woocommerce-product-image-flipper/ plugin and then place the code in your footer.php

   ---

   jQuery(document).ready(function($){
       jQuery( '.product-image' ).hover( function() {
           jQuery( this ).find( '.attachment-woocommerce_thumbnail' ).removeClass( 'fadeIn' ).addClass( 'animated fadeOut' );
           jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOut' ).addClass( 'animated fadeIn' );
       }, function() {
           jQuery( this ).find( '.attachment-woocommerce_thumbnail' ).removeClass( 'fadeOut' ).addClass( 'fadeIn' );
           jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeIn' ).addClass( 'fadeOut' );
       });
       });
   

Comments are closed.