在 WooCommerce 存档页面上悬停切换产品图像

Question

有没有办法（也许通过functions.php）在将鼠标悬停在产品的第一个附加图库图像上时更改woocommerce商店（存档页面）中的产品图像？我找不到如何针对两者。我想它一定是这样的：

add_action( 'woocommerce_shop_loop_item', 'change_image_on_hover', 10 );
function change_image_on_hover() {
     $product->get_gallery_image_ids();
     print 'woocommerce_gallery_image';
}

Answer 1

假设您的安装是某种标准的 WooC 安装，我认为您想要做的是利用循环项操作挂钩添加所需的悬停图像。

add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ; 

function add_on_hover_shop_loop_image() {

    $image_id = wc_get_product()->get_gallery_image_ids()[1] ; 

    if ( $image_id ) {

        echo wp_get_attachment_image( $image_id ) ;

    } else {  //assuming not all products have galleries set

        echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ; 

    }

}

初步的CSS：

/* CUSTOM ON-HOVER IMAGE */
.woocommerce ul.products li.product a img { 
    /* FORMAT ALL IMAGES TO FILL EQUIVALENT SPACE,
    to remove jitter on replacement */
    height: 150px;
    width: 150px;
    object-fit: cover;
    padding: 0;
    margin: 0 auto;
}
.woocommerce ul.products li.product a img:nth-of-type(2) {
    display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
    display: block
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
    display: none;
}

以上将获得您想要的一种类型的商店存档显示，以实现简单的替换，但是您可能需要或想要为您的站点定制许多细节。例如，150x150px 可能不适合您的主题。或者您可能决定需要用不同的集合完全替换默认图像，并且为了获得特定的过渡效果，或者为了与您网站上使用的其他效果保持一致，您需要一种不同的 CSS 方法，可能还需要到javascript。