如何为 Woocommerce 商店页面启用悬停效果答案

【问题标题】：How to enable hover effect for Woocommerce Shop page如何为 Woocommerce 商店页面启用悬停效果
【发布时间】：2018-09-23 22:59:58
【问题描述】：

我正在同步同一个 WordPress 网站（开发和登台）的两个子域实例，但是，当呈现到浏览器时，两者之间存在差异，我似乎无法找到其来源。
woocommerce shop 页面显示所有产品的图片链接。
其中一个站点在该页面上具有悬停效果，而另一个则没有。

（详细的描述既困难又冗长，所以我会在下面的评论中包含网址。
如果有更合适的方式澄清，请指教。我很乐意效劳。）

两个实例都运行相同的 WP 版本以及相同的 WooCommerce 和 Avada（主题）版本。它们也在同一台服务器上。

是否有我只是在某处俯瞰的 WP 或 WC 设置？
我们希望为暂存站点启用它，就像在开发站点上一样。

---顺便说一句，我非常有信心，一旦我们弄清楚如何为暂存站点启用悬停效果，风格差异就会得到解决。

【问题讨论】：

dev.cellperspectives.com/shop -vs- staging.cellperspectices.com/shop
而且，仅供参考，还有另一个 woocommerce 元素悬停效果在一个站点上起作用但在另一个站点上不起作用的示例，但也有几个示例在两个站点之间它们是相同的。 ...我不知所措

标签： wordpress woocommerce

【解决方案1】：

这就是我设法在 Woocommerce 3+ 上将第一个图库图像添加为悬停图像的方法。

这在你的functions.php中

 //add hover effect by grabing first gallery image
add_action( 'woocommerce_before_shop_loop_item_title', 'addHoverImageToProducts', 15 );

function addHoverImageToProducts() {
    global $product;
    $attachment_ids = $product->get_gallery_image_ids();
    $count = 0;
    foreach( $attachment_ids as $attachment_id ) { 
        $count++;
        //make sure you're on the Shop Page and that you only get the first image
        if(is_shop() && $count <= 1){
    ?>
            <div class="product-secondary-image" style="background-image:url('<?php echo wp_get_attachment_image_src( $attachment_id, 'full' )[0]; ?> '); "></div>
    <?php 
        }
    }
}

这是你的 CSS

.product-secondary-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 480px;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.product:hover .product-secondary-image{
    opacity: 1;
}

【讨论】：