Question

我想在鼠标悬停产品图片上更改或翻转产品图片。所以请建议任何wordpress插件或任何代码来实现这种效果（也建议进行更改的文件路径）。

Answer 1

只需添加自定义图片字段，在包装器中放置2个图像（例如特色和自定义字段），并在包装器z-index上更改层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;
}

..或者只需安装：https://wordpress.org/plugins/woocommerce-product-image-flipper/并按照：http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

编辑：

我们使用以下代码修复WooCommerce Product Image Flipper：

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

Answer 2

我不知道你是否还有问题，但现在我正在使用wordpress 4.5.3和woocommerce 2.6.1并且它运行良好，即使wordpress说插件不兼容所以我带我的个人风险。

尝试在你的函数上添加daneden的animate.css，我不知道这是否相关，但是如果我在function.php上注释了animate.css，那插件就不能正常工作了。

再一次，我认为你改变fadeInDown / fadeOutUp会更好，我尝试使用它只是fadeIn / fadeOut，使用Down和Up很奇怪，IMOO。

Answer 3

由于产品图片挡板已经过时，因此该工具在我的woocommerce商店中可以正常使用：WC Secondary Product Thumbnail https://de.wordpress.org/plugins/wc-secondary-product-thumbnail/

（希望它会有所帮助，因为我花了很长时间才找到一个有效的插件。magni图像翻转器也很奇怪，因为它不断翻转图像，这真的不是我期望的）

Answer 4

@MatejĐaković=>的扩展答案

首先安装https://wordpress.org/plugins/woocommerce-product-image-flipper/插件，然后将代码放在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' );
    });
    });

如何在wordpress（woocommerce）中悬停产品图像？

4 个答案: