Wie kann ich das Produktbild beim Hover in WordPress umdrehen?

Ich möchte das Produktbild auf dem Mouseover-Produktbild ändern oder spiegeln. Schlagen Sie also bitte ein WordPress-Plugin oder einen Code vor, der diesen Effekt erzielt (schlagen Sie auch den Dateipfad der Änderungen vor).

fügen Sie einfach ein benutzerdefiniertes Bildfeld hinzu, fügen Sie 2 Bilder ein (z.B. vorgestellt und aus benutzerdefiniertem Feld) im Wrapper und ändern Sie die Ebene z-index auf Umschlag 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;
}

..oder einfach installieren: https://wordpress.org/plugins/woocommerce-product-image-flipper/ und folgen: http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

BEARBEITEN:

Wir reparieren WooCommerce Product Image Flipper mit diesem 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' );
    });
});

Ich verwende WordPress 4.5.3 mit Woo-Commerce 2.6.1 und es funktioniert gut, obwohl WordPress sagt, dass das Plugin nicht kompatibel ist, also gehe ich mein eigenes Risiko ein.

Versuchen Sie hinzuzufügen animate.css von daneden zu deiner funktion, ich weiß nicht, ob das damit zusammenhängt oder nicht, aber wenn ich die animate.css kommentiert habe function.phpdas Plugin hat nicht gut funktioniert.

oh, noch einmal, ich denke, es ist besser, du änderst fadeInDown/fadeOutUp, ich versuche es einfach mit fadeIn/fadeOut zu verwenden, die Verwendung von Down und Up macht komisch, IMOO.

Da der Produktbild-Flipper ziemlich veraltet ist, funktioniert dieses Tool gut mit meinem Woocommerce-Shop: WC Secondary Product Thumbnail
https://de.wordpress.org/plugins/wc-secondary-product-thumbnail/

(Ich hoffe, es hilft, da ich ewig gebraucht habe, um ein funktionierendes Plugin zu finden. Magni Image Flipper ist auch seltsam, da es die Bilder endlos umdreht, was wirklich nicht das ist, was ich erwarten würde.)

Erweiterte Antwort von @Matej Đaković=>

Installieren Sie zuerst die https://wordpress.org/plugins/woocommerce-product-image-flipper/ plugin und platzieren Sie den Code dann in Ihrer 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' );
    });
    });