WooCommerce 보관 페이지 호버의 제품 이미지 전환

WooCommerce 보관 페이지 호버의 제품 이미지 전환

제품의 첫 번째 첨부 갤러리 이미지로 호버에 있는 우커머스 샵(아카이브 페이지)의 제품 이미지를 변경할 수 있는 방법(functions.php)이 있습니까?둘 다 어떻게 공략해야 할지 모르겠어요.아마 이런 일이 있을 겁니다

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

설치가 다소 표준적인 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 px는 테마에 맞지 않을 수 있습니다.또는 기본 이미지를 다른 세트로 완전히 교체하고 특정 전환 효과를 얻거나 사이트에서 사용 중인 다른 효과와 일관성을 얻으려면 CSS 및 자바스크립트에 대한 다른 접근 방식이 필요할 수 있습니다.

WooCommerce의 기본 작업 및 필터를 제거하지 않은 경우 플러그인을 사용할 수 있습니다.

여기 플러그인 링크가 있습니다.

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
}

이 방법이 통하지 않으면 js/jquery를 사용하여 이 스레드에서 다른 솔루션을 확인합니다.

이것이 당신이 찾고 있던 것이에요?

WooCommerce 상품 이미지 오리발

최신 3대 워드프레스 릴리즈로는 테스트가 되지 않은 것 같습니다.그래도 한번 해보고 볼 수 있습니다.

이 실이 당신이 필요로 하는 것을 설명해 주는 것 같습니다.

이 코드를 사용하면 완벽하게 작동합니다 | WooCommerce 최신 버전 스위치 제품 이미지가 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' ) ; 

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() ) ; 

}

}

이걸 사용하고 싶으시면.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 )
}

언급URL : https://stackoverflow.com/questions/62088615/switch-product-image-on-hover-on-woocommerce-archive-page