CODEWITHSUNDEEP
jquerywordpresspluginswoocommerce
Dnyan
Dnyan

Reputation: 191

How to flip Product image on hover in wordpress?

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

Upvotes: 1

Views: 12644

Answers (4)

Pete
Pete

Reputation: 17

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)

Upvotes: 0

Boyd Soedargo
Boyd Soedargo

Reputation: 11

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.

Upvotes: 0

Khaled Hasan
Khaled Hasan

Reputation: 1

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' );
    });
    });

Upvotes: -1

Matej Đaković
Matej Đaković

Reputation: 880

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' );
    });
});

Upvotes: 3

Related Questions