有没有办法（可能通过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';
}
【问题讨论】：
标签： php wordpress woocommerce hook-woocommerce
假设您的安装是某种标准的 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。
【讨论】：
如果您没有删除 WooCommerce 的默认操作和过滤器，您可以使用该插件。
这里是插件link
【讨论】：
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 的其他解决方案
【讨论】：
这是你要找的吗？
WooCommerce Product Image Flipper
它似乎还没有通过最新的 3 个主要 Wordpress 版本进行测试。你还是可以试试看的。
这个thread 似乎也解释了你的需要。
【讨论】：
使用此代码运行良好 | 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() ) ;
}
}
【讨论】：
使用这个你会得到产品的全尺寸图片
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() ) ;
}
}
【讨论】：