The issue affects the PC and tablet view, the mobile view is ok. I have tried to look for options in “theme options” to resolve this but I am struggling to find and apply options to resolve the issue below.
My current settings for my single product page for the large image and the thumbnail is that the large image has a gap at the top which also must be aligned with the top thumbnail, and the thumbnails are longer than expected, they are normally a smaller square of 100px.
Another issue with this is that when I change the option in Theme options > Woocommerce > product images > current setting: custom 4*7 to either “uncropped” or “thumbnail width”, the main image on the single product gallery becomes larger but still short in width and the thumbnails change to the correct square size but this also creates major issues elsewhere.
If the settings above are applied to edit the thumbnail size Theme options > Woocommerce > product images, my product images on the homepage, “image carousel” and “products images on the “shop page”, also become square which cannot happen.
My homepage product image carousel and shop page product images are perfect as they are and we have been through a lot to set the alignment and size for both pages, these cannot be edited in any way.
If you look at the single product, you will see exactly what the issue is stated below: (the zoom-in effect is applied which is needed)
What I need is to resolve 2 issues on the single product gallery page:
1. The single product gallery large image be aligned to the top thumbnail, and the large image must remain the same size and same alignment when hovering and not hovering over the image as this currently does not.
2. Thumbnails: these are long, these need to be square at size 100px, aligned where they currently are: left of the large image.