5 回答
TA贡献1946条经验 获得超3个赞
假设您的安装是某种标准的 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。
TA贡献1780条经验 获得超1个赞
使用此您将获得产品的全尺寸图像
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() ) ;
}
}
TA贡献1909条经验 获得超7个赞
使用此代码工作完美| 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() ) ;
}
}
TA贡献1876条经验 获得超7个赞
如果你想在product-content.php使用全局product而不是 wc_get_product
global $product;
$attachment_ids = $product->get_gallery_image_ids();
然后:
foreach( $attachment_ids as $attachment_id ) {
wp_get_attachment_image( $attachment_id )
}
- 5 回答
- 0 关注
- 222 浏览
添加回答
举报