Woocommerce product images customization (jQuery)

Hi,

Because of “styling” we wanted a DIV around the two product thumbnails on the archive pages.
2 problems/ questions:

1 ) After we did that (with the code as shown below) the “hover” effect of the second product image does not work anymore.
2) When a product is on “sale” it gets an extra span class “onsale”. Because of that, our jQuery method as described is NOT working on product images of the “sale” products. Our jQuery method should ignore the extra span class.

The code we use to create the DIV is:

1 2 3 4 5 6 7

<script>         jQuery(function() {             jQuery(".woocommerce-LoopProduct-link img:first-child").each(function(index) {                 jQuery(this).next("img").andSelf().wrapAll("<div class='product-wrapper' />")             });         });     </script>

You can see the result of that here: http://bootcamp.bonsaimedia.nl/product-categorie/accessoires/
Could you please look into this and let us know where it goes wrong?

Best regards,

Ticket