Image Cropping/Resizing Not Working

Hi There!

I love your theme – you guys did an AMAZING job!

I am, however, having problems with WordPress built-in cropping feature. I think it’s a WP core issue because it’s happening with featured images, product images, and images in post/pages. I believe WP can automatically crop an image without cutting out parts of the image correct?

For example, one of my images is:
https://1m3wnq4dk41o3xjsyg127meb-wpengine.netdna-ssl.com/wp-content/uploads/2017/10/Gundo-8413-True-Royal-Triblend.jpg

When WordPress crops the image it looks like this:
https://1m3wnq4dk41o3xjsyg127meb-wpengine.netdna-ssl.com/wp-content/uploads/2017/10/Gundo-8413-True-Royal-Triblend-600×600.jpg

See how the top and the bottom of the image is cut off?

Another issue is with Visual Composer. When I use the “single image” option and try to apply the size small, medium, full, thumbnail, to the image the image size does NOT change in the post – it stays the same (the full-size image).

Is there a setting in the theme panel I missed that says to maintain the image or something?

I could really use your help with this as I cannot move forward until this is fixed.

Thank you so much!

Here are a few screenshots to explain what I’m talking about:

1. WC Edit Product Page
Here’s a screenshot from the Woocommerce edit product page https://www.screencast.com/t/fynpizn7gfyk

You can see the image in the “Product Image” is being cut off by WP.

2. Media Library View of the Same Image
When I view the “Product Image” in my media library it is NOT cut off as seen here https://www.screencast.com/t/0BQrjlrdp

3. Product Category Page
Here’s the image being cut off on the product category page https://www.screencast.com/t/QvR2EulB4nt

This makes me think there’s a setting I’m missing or something?

Here’s a new issue.

I followed the instructions on this page https://forum.tagdiv.com/topic/woocommerce-product-image/#post-189095 to enable the enable the gallery, zoom, and slide as your team suggested but now when I view the product page the product image is broken – it’s acting like I put my mouse on the image to “zoom” when I didn’t – I just loaded the page! Here’s a screenshot https://www.screencast.com/t/rAO5U6mZGs

What do I need to do to maintain the zoom feature but have it so that when the page loads it’s just the product image and when I put my mouse over it, it then zooms as expected?

Ok, so I fixed the cropping issue myself – I grabbed a product photo from the Newspaper theme and put my photos in that dimension.

Issues Not Resolved:

1. Image Resizing in Visual Composer
Another issue is with Visual Composer. When I use the “single image” option and try to apply the size small, medium, full, thumbnail, to the image the image size does NOT change in the post – it stays the same (the full-size image).

2. “Zoom” Functionality Not Working
I followed the instructions on this page https://forum.tagdiv.com/topic/woocommerce-product-image/#post-189095 to enable the enable the gallery, zoom, and slide as your team suggested but now when I view the product page the product image is broken – it’s acting like I put my mouse on the image to “zoom” when I didn’t – I just loaded the page!
Here’s a video screenshot showing the behavior:https://www.screencast.com/t/BpvVikxR
Here’s a screenshot https://www.screencast.com/t/rAO5U6mZGs

NOTE: I’m on a Mac using Chrome.

Thanks for getting back to me!

1. You are correct, I do have both plugins enabled. I don’t want to remove the TagDiv composer because how will I be able to edit the layout of the homepage without it?
2. I removed the zoom feature for now.

Now I have a new issue.

3. The lightbox feature is not working. When I click a product image the lightbox pops up underneath my site’s menu like this https://www.screencast.com/t/BpvVikxR when I am on Mac using Chrome. It works fine on mobile but not on a desktop.

I looked at the theme demo https://demo.tagdiv.com/newspaper_tech/product/woo-logo-3/ and when you click on a product image it redirects the user to the large jpg view which is not the desired behavior requiring the user to click back on their browser. Either the lightbox needs to work or I need to remove the link to the larger image?

Any idea on how to fix this?