Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Switch product image on hover on WooCommerce archive page

Is there a way (maybe via functions.php) to change the product-image in woocommerce shops (archive page) on hover with the first attached gallery image of the product? I cannot find how to target both. I guess it must be sth like this:

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

enter image description here

Tags:

7

Answers


  1. 0

    CSS can detect when the user is hovering over an image. Is it possible for you to load both images, and then just turn one off and one on when hover is detected?

    The code for that would look like this:

    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
}

    If this doesn’t work, check out this thread for other solution using js/jquery

    Login or Signup to reply.
  2. 0

    You can use the plugin if you have not removed the default action and filter of WooCommerce.

    Here is the plugin link

    Login or Signup to reply.
  3. 0

    Is this what you are looking for?

    WooCommerce Product Image Flipper

    It seems that it has not been tested with the latest 3 major WordPress releases though. You can still try it and see.

    This thread also seems to explain what you need.

    Login or Signup to reply.
  4. 0

    What I think you’ll want to do, assuming your installation is a somewhat standard WooC installation, is utilize the loop item action hook to add the desired on-hover image. 

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

    }

}

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

    The above will get what you want for one type of shop archive display, to achieve a simple replacement, but there will be numerous particulars that you may need or want to customize for your site. 150x150px may not be the right size for your theme, for example. Or you may decide you need to replace the default image completely with a different set, and that to get a particular transition effect, or to get consistency with other effects in use on your site, you’ll need a different approach to CSS and possibly to javascript.

    Login or Signup to reply.
  5. 0

    Use this code is working perfectly | Woocomerce Latest Version
    Switch product image on hover on WooCommerce archive page

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

    }

}
    Login or Signup to reply.
  6. 0

    Use this you will get the full size image of the product

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

}

}
    Login or Signup to reply.
  7. 0

    If you want to use this on product-content.php use global product instead of wc_get_product

    global $product;
$attachment_ids = $product->get_gallery_image_ids();

    Then:

    foreach( $attachment_ids as $attachment_id ) {
     wp_get_attachment_image( $attachment_id )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search