How to flip Product image on hover in wordpress(woocommerce)?

问题

I want to change or flip the product image on mouseover product image. So please suggest any wordpress plugin or any code to achieve that effect (also suggest file path of changes to be made).

回答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 don't know if you are still have trouble or not, but right now im using wordpress 4.5.3 with woocommerce 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 the animate.css on the function.php , the plugin didn't working 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, what 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' );
    });
    });

来源：https://stackoverflow.com/questions/33820964/how-to-flip-product-image-on-hover-in-wordpresswoocommerce

标签

jquery

wordpress

plugins

woocommerce