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

Posted 2023-02-19

【中文标题】在 WooCommerce 存档页面上悬停时切换产品图像

【英文标题】：Switch product image on hover on WooCommerce archive page

【发布时间】：2020-09-17 04:19:04

【问题描述】：

有没有办法（可能通过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';

【参考方案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。

【讨论】：

太棒了，这很有效，非常感谢。不幸的是，它打印了 150x150px 版本的画廊图像。你知道用 600x600px 获得更好质量的图像吗？ CSS 不是解决方案。

当然 - wp_get_attachment_image() 默认为“缩略图”。如果您的主题已将 600x600 注册为图像大小（“中”？、“大”？），则只需将其添加为第二个参数。或尝试 'array('600', '600') （并适当调整 CSS） - 更多示例请参见 developer.wordpress.org/reference/functions/…

（“中”和“大”更可能在安装设置/媒体中设置）

获取第一张画廊图片我认为应该是：get_gallery_image_ids()[0]

我认为 [0] 图像是特色图像......但我已经有一段时间没有回答这个问题了。如果你还没有这样做，我会稍后再检查。

【参考方案2】：

如果您没有删除 WooCommerce 的默认操作和过滤器，您可以使用该插件。

这里是插件link

【讨论】：

非常感谢，总的来说这个插件是可以工作的，但是如果你把鼠标放在图片上，它会无限循环地前后翻转，而不是只有当你移开鼠标时才会向后翻转。

【参考方案3】：

CSS 可以检测用户何时将鼠标悬停在图像上。您是否可以加载两张图片，然后在检测到悬停时关闭一张再打开一张？

代码如下所示：

html：

<a id="home">
<img class="image_on" src="images/productImage.png"" />
<img class="image_off" src="images/galleryImage.png" />
</a>

CSS：

.image_off, #home:hover .image_on
     display:none

.image_on, #home:hover .image_off
     display:block

如果这不起作用，请查看 this thread 以了解使用 js/jquery 的其他解决方案

【参考方案4】：

这是你要找的吗？

WooCommerce Product Image Flipper

它似乎还没有通过最新的 3 个主要 Wordpress 版本进行测试。你还是可以试试看的。

这个thread 似乎也解释了你的需要。

【参考方案5】：

使用此代码运行良好 | Wocomerce 最新版本 在 WooCommerce 存档页面上悬停时切换产品图片

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()[0] ; 

    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() ) ; 

    

【参考方案6】：

使用这个你会得到产品的全尺寸图片

add_action('woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image');

函数 add_on_hover_shop_loop_image()

$image_id = wc_get_product()->get_gallery_image_ids()[1] ; 
$img_size = wc_get_image_size( $image_id, 'full' );

if ( $image_id ) 

    echo wp_get_attachment_image( $image_id, 'full' ) ;

 else   //assuming not all products have galleries set

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