在 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';

}

https://i.stack.imgur.com/zqrYW.gif

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;}以上将获得您想要的一种商店档案显示，以实现简单的替换，但是您可能需要或想要为您的站点自定义许多细节。例如，150x150 像素可能不适合您的主题。或者你可能决定你需要用不同的集合完全替换默认图像，并且为了获得特定的过渡效果，或者为了与你网站上使用的其他效果保持一致，你需要一种不同的 CSS 方法，并且可能到javascript。

Answer 2

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

Answer 3

使用此您将获得产品的全尺寸图像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] ; $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() ) ; }}

Answer 4

使用此代码工作完美| Woocomerce 最新版本 在 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() ) ;     }}

Answer 5

如果你想在product-content.php使用全局product而不是 wc_get_productglobal $product;$attachment_ids = $product->get_gallery_image_ids();然后：foreach( $attachment_ids as $attachment_id ) {     wp_get_attachment_image( $attachment_id )}