有沒(méi)有辦法（可能通過(guò) functions.php）在懸停時(shí)更改 woocommerce 商店（存檔頁(yè)面）中的產(chǎn)品圖像與產(chǎn)品的第一個(gè)附加畫廊圖像？我找不到如何同時(shí)針對(duì)兩者。我想它一定是這樣的：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
5 回答
智慧大石
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊
假設(shè)您的安裝是某種標(biāo)準(zhǔn)的 WooC 安裝，我想您要做的是利用循環(huán)項(xiàng)目操作掛鉤來(lái)添加所需的懸停圖像。
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;
}
以上將獲得您想要的一種商店檔案顯示，以實(shí)現(xiàn)簡(jiǎn)單的替換，但是您可能需要或想要為您的站點(diǎn)自定義許多細(xì)節(jié)。例如，150x150 像素可能不適合您的主題?；蛘吣憧赡軟Q定你需要用不同的集合完全替換默認(rèn)圖像，并且為了獲得特定的過(guò)渡效果，或者為了與你網(wǎng)站上使用的其他效果保持一致，你需要一種不同的 CSS 方法，并且可能到j(luò)avascript。
Qyouu
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
如果您沒(méi)有刪除 WooCommerce 的默認(rèn)操作和過(guò)濾器，您可以使用該插件。
慕神8447489
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊
使用此您將獲得產(chǎn)品的全尺寸圖像
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() ) ;
}
}
jeck貓
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
使用此代碼工作完美| Woocomerce 最新版本 在 WooCommerce 存檔頁(yè)面上懸停時(shí)切換產(chǎn)品圖片
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() ) ;
}
}
幕布斯6054654
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果你想在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 關(guān)注
- 373 瀏覽
添加回答
舉報(bào)
0/150
提交
取消