Product image re-sizing

I have woocommerce and the Highend theme, the issue is that the product images that show up when selecting the product category (set to 4 products per row) come up as a 300×300 thumbnail. The thumbnail is therefore cropping the images and not showing the full photo. I’ve gone to the backend settings and changed the sizes and regenerated thumbnails, but this obviously makes no difference as the CSS sets the image regardless at 300×300 on the product page. What I require is some css modification that will make the HEIGHT of the image such that is shows the entire image in the thumbnail. The images uploaded are usually around 620×900, though this varies slightly. I suspect that the width is fixed in order to set it at 4 products per row, however the height should be possible to vary.

So far via the inspect element i’ve narrowed it down to the img.product-hover image element on line 24 of the CSS. It shows something like this:

#main-wrapper .hb-woo-product a.hb-woo-image-wrap, #main-wrapper .hb-woo-product img
display: block;
width: 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 3px;
border-radius: 3px;
}

However adding the line “height: 620px” makes no difference as the image source in the elements code shows it is taking from, for example. http://mywebsite.com/wp-content/uploads/2015/07/productimage-300-300.jpg

How do I prevent it taking all the product images from a 300×300 thumbnail?

Here are the current media settings from within wordpress (all regenerated thumbnails)
Thumbnail size: Width 300, Height 620 [no crop thumbnail selected]
Medium size: Max Width 600, max Height: 900
Large size: Max Width 768, max Height 1024