Dnyan Dnyan - 5 months ago 119
Javascript Question

How to flip Prodcut 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).


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/


we fix WooCommerce Product Image Flipper with this code:

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