Dnyan Dnyan - 1 year ago 265
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).

Answer Source

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' );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download