有没有一种方法(也许通过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';
}
7条答案
按热度按时间46scxncf1#
我认为你会想要做的,假设你的安装是一个有点标准的WooC安装,是利用循环项目的行动挂钩添加所需的悬停图像。
初步CSS:
以上将得到你想要的一种类型的商店档案显示,实现一个简单的替换,但将有许多细节,你可能需要或想为您的网站自定义。150x150px可能不适合您的主题大小,例如。或者你可能决定你需要用一个不同的设置完全替换默认图像,并获得一个特定的过渡效果,或者为了与站点上使用的其他效果保持一致,您需要使用不同的CSS方法,可能还需要使用不同的javascript方法。
vngu2lb82#
如果您没有删除WooCommerce的默认操作和过滤器,您可以使用该插件。
下面是link插件
ih99xse13#
CSS可以检测用户何时悬停在图像上。你有没有可能加载两个图像,然后在检测到悬停时只关闭一个打开一个?
代码如下所示:
超文本:
CSS:
如果这不起作用,请使用js/jquery检查this thread以获取其他解决方案
xmjla07d4#
这是你要找的吗?
WooCommerce Product Image Flipper
看起来它还没有经过最新的3个主要WordPress版本的测试,你仍然可以尝试一下。
这个thread似乎也解释了你需要什么。
nc1teljy5#
使用此代码工作完美|Woocomerce最新版本在WooCommerce存档页面上切换悬停的产品图像
b91juud36#
使用这个你会得到产品的全尺寸图像
ar7v8xwq7#
如果要在
product-content.php
上使用此选项,请使用全局product
而不是wc_get_product
然后: