Question

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

（详细描述将是困难和冗长的，因此我将在下面的评论中包含网址。
如果有更合适的澄清方式，请告知。我很高兴有义务。）

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

是否有WP或WC设置，我只是忽略某处？我们希望为staging网站启用它，就像它在开发站点上一样。

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

Answer 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;
}

如何为Woocommerce Shop页面启用悬停效果

1 个答案: