Simple Function to scale image using jQuery in Woocommerce Shop

As the title suggests, Ar you looking to have a little bit of jQuery – if an image is not proportional it adds a class a certain element. This, for a Woocommerce shop loop Thumbnail image.

Woocommerce Function for shop page loop to add a wrapper div around product thumbnail

---

 

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = 'div class="imagewrapper" div class="imgwrap"';

if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( $post->ID, $size );
}
$output .= ' /div> /div';
return $output;
}
}

---

Style for the wrapper and image to adjust itself to the wrapper div

.imagewrapper {
    width: 100%;
    height: 320px;
    display: flex;
    border: 1px solid #e6e6e6;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden !important;
    position: relative;
}
.imagewrapper img {
    height: auto;
    width: 100%;
    border:0px !important;
}
.imagewrapper img.portrait {
    position: absolute;
    max-height: 100% !important;
    top: 0px;
    width: initial !important;
    transform: translateX(-50%);
}

---

jQuery(window).load(function () {
     var image = jQuery('.imagewrapper img');
     image.each(function () {
           var that = jQuery(this);
           if (that.width() < that.height()) {
           that.addClass('portrait');
          }
     })                    
});

---