Single Product Page – Thumbnails and Zoom – Design and Layout Issue

Hello Elise Noromit,
I would like to have response from your side.

I just installed Theme and demo content (with NO 3rd Party Plugin, at all)
On Single Product page, I found some Design and Layout related issues-

Issues:

1. The thumbnail images (displaying at left side or bottom of Main product image) are not showing of equal size and equal height. Hence, looking very odd. The thumbnails are supposed to display in equal width and height of whatever ratio (whether 1:1 or 4:3 or some other).

PS: They were displaying correctly in our previous Theme also (when activated), but unfortunately breaking with Woodmart.
All thumbnails are forced cropped to equal height too or in aspect ratio (irrespective of whatever dimensions we upload the images), and there is some relevant setting for this also.

Please view this Video (for both points 1st and 2nd)
https://bit.ly/3r8xVLk

2. The zoom (Cross hair) button is not aligned with Main product image. It is not showing at left bottom of each image.
It is not flexible and fixed. Hence, displaying Off-image for few images and displays correctly for few.

Bugs:
3. On the Product page, the Down arrows buttons are not working to show the last thumbnail image, as well as Auto-Reveal of thumbnails is also not working for last 2 images.
(Means it is supposed to work like that, the image thumbnails Auto-Scrolls up or left, while clicking the next thumbnail, thereby revealing the bottom or right thumbnail. But not working here)

4. Most importantly, the very last thumbnail is not showing at all, even after clicking the Down arrow button. And even after trying to Drad the thumb image up (by clicking and dragging with mouse)
Please check below Video (point 3 and 4)-
https://bit.ly/3l5EwCa

5. Thumbnail image grid is of same height as of Main product image’s height in your demo.
Please check below screenshot. However, that is not the case with product pages on our site.
https://i2.paste.pics/F3H5U.png
How to fix this also.

URL of product page to check – https://bit.ly/32xYajZ

Please suggest and resolve the issues

Regards

Hello,

Please, provide your site admin access (insert the site credentials into the Private content block under the message area) and confirm the permission for plugins deactivation, switching to the parent theme. As soon as we complete the testing we will enable all back, however, the site would be without plugins for 15-20 min. You would better make the full backup of your site.

Best Regards

Hello Elise,

Although I think I have provided more than sufficient details, alongwith videos. And was expecting that it could have been checked and resolved without requiring for credentials also.

Anyways, sharing details in the Private section.

We have Not activated any 3rd party Plugin so far. However, you can still deactivate any of the bundled plugin and switch to parent as well.
Nor I have added any custom CSS or other custom code so far in the child theme. Just the demo, as it is.

Please resolve and suggest for each query pointwise.

Regards

Hello,

Thank you very much for the credentials.

I have checked and tested one of your products. https://gyazo.com/a27dccafe3f7a681c6bcb55f4667dcb4

There are two reasons you have such a view: all your images are of different sizes and shapes: some the square and some of them rectangular. It is not possible to make them all of the same size with CSS. You need to upload images of equal size, the same shape, and proportion. You can try that for one product and see that it would work correctly.

As you can see on the screen the thumbnails gallery requires main image height enough to be properly presented. The gallery does not have to autorotate or loop option.

If you enable “Main carousel auto height” you will get the same effect as you had on your previous theme.

Previous theme: https://gyazo.com/7b99bf064e4d7399e8d2ec4cfc949c31

WoodMart: https://gyazo.com/4a51fa38cbcf046ed0d57d1a423bb54c

I could give you custom CSS to make the same height for the thumbnails, however taking into consideration, that you have different image sizes this could work: https://gyazo.com/f6e2f54e300705cf560bfecd2cc0735e

If you have any questions please feel free to contact us.

Best Regards

Hello Elise,
Thank you for your response.

1. First of all, even after when you set the Product image width to “Medium” from Theme Settings -> Single Product -> Images, and when the Main product image has got sufficient height, then also, the below problem still exists-

The very last thumbnail is not showing at all, even after clicking the Down arrow button. And even after trying to Drag the thumb image up (by clicking and dragging up with mouse)

As well as Auto-Reveal of thumbnails is also not working (for remaining hidden images that are below arrows).
Means it is supposed to work like, that the remaining hidden thumbnails Auto-Scrolls up while clicking the last visible thumbnail, thereby revealing the bottom hidden thumbnails. But unfortunately, not working here the same way they are working in your demo.

Please check below Video –
https://bit.ly/3l5EwCa

PS: In either case, It should atleast work, by clicking the Down arrow, as well as by manually dragging the thumb image upwards. Isn’t it.

2. I can see that you enable the “Main carousel auto height” to ON and the Click to enlarge is moving according to Main image height. (Like previous theme)
That is OK

But point is that, even in that situation (Carousel Auto-height – ON, as well as with different image dimensions), the thumb images on the Main product page should show either in square size or of equal height. Just like it works with other themes, including but not limited to one of the Previous theme (Porto) and other themes, like
Impreza – https://bit.ly/3laJg9S (from their Free Demo with Admin Dashboard )

Most importantly, this is the default behaviour to show either square images or images of same height (if they are rectangular portrait-like). And the same can be replicated from the Default Twenty twenty-one theme.

I switched to 21-21 theme, and the thumbnails are showing of equal size in square shape.
Please check below video-
https://bit.ly/3E3JkPZ

You can try the same by switching to either the Previous theme or 20-21, and with same product images, the thumb images will show in square size or of equal height (even if they are Not of equal height, in actual)

New:
Just come across, that the Sidebar on Shop page is Not visible now. Earlier it was visible. (Probably while you were testing, something might have gone wrong)
I looked at below settings, and found that it is set to Enabled, still not showing up on the Shop as well as Category pages.
https://i2.paste.pics/F4MUI.png

I could not find settings to Enable or disable sidebar on shop and category pages, anywhere else from Theme settings. This is the only area (as per above image), where it is showing.
And it is Enabled
Can you please Restore them with the Default Sidebar filters on Shop and Category pages.

Regards

Hello,

This is the way the carousel works. In order to get a nice carousel, you need to upload images of the same size.

Please set the size for the images in the Theme Settings > Single product > Thumbnails size: https://prnt.sc/20y4uzb then start regenerating the images and images would be of the same size.

Best Regards

Hello Elise,

Thank you for your message.
Unfortunately, It seems as if, my previous message has been overlooked, a bit.
The last query also gets skipped somehow.

The carousel is not working as intended and so the image thumbnails.
Irrespective of image size or ratio , the carousel should show up the till the last images.
Atleast after clicking the Down-Up arrow keys. Should not it keep showing further images.
I mean, what is the point in not displaying till last images.

Infact, the last image is not visible and coming up, even after manually dragging the image (click-hold and dragging to up) through mouse.
(and both can be seen and replicated from Video that I shared earlier)

Regarding Thumbnails on Single Product:
Can you please check below again-

Most importantly, this is the default behaviour to show either square images or images of same height, even if they are of different size ratios . And the same can be replicated from the Default Twenty twenty-one theme.

I switched to 21-21 theme, and the thumbnails are showing of equal size in square shape.
Please check below video-
https://bit.ly/3E3JkPZ

Further to that, I had already tried that by setting the width to 150 px from the link you shared. (before even receiving your response)
And then also used Regenerate thumbnails plugin to, but it is still not working. Those did not shows-up in square size or same height.

Can you please try at your end also (I had already shared credentials earlier) by setting thumbnail size and using Regenerate thumbnails.

PS: I think, as this option has been added within Theme itself (this – https://prnt.sc/20y4uzb ), probably, some coding has been Set, due to which height of thumbnails might be getting adjusted automatically, rather than forced cropping in square size.
Can you please ask the Dev Team to check the Code for this option. In case, if it is like that.
And have it resolved in next update.

New:
Can you please resolve my query, mentioned at the end of my previous response.

Regards

Hello,

In order to get images have been cropped as per Woocoommerce settings, it is necessary to remove the sizes inside image widgets: https://prnt.sc/217vpo5
https://prnt.sc/217vs1j

As for the sidebar, this is WordPress but: when you switch the theme, the widgets are reset. When the sidebar is empty it is not shown. https://prnt.sc/217vzrx

If you have any questions please feel free to contact us.

Best Regards

Hello Elise,

I think I am not getting your point properly.
Earlier you suggested – “Set the size for the images in the Theme Settings > Single product > Thumbnails size: https://prnt.sc/20y4uzb then start regenerating the images and images would be of the same size”

And now you suggest to completely remove the sizes from inside the same image widgets: https://prnt.sc/217vpo5

Just wanted to know, if we are setting the custom size from same image widget location, should not that also cropped the images (with that custom defined width), in square size, just like default Woo thumbnails. By this custom width setting, it should allow us to increase or decrease the default width, but should maintain same aspect ratio of being square.
I think, only A small change in backend code needs to be updated, in order to maintain this.

A request: If you could please forward this to Dev team, to revise the code in order to have the thumb images retain the square shape, even if we use image widget and set our custom width size.

So, that way, it will affect the Width, but in the same ratio to maintain square shape.

Regarding Sidebars, as I mentioned earlier also, they were Showing up, after I installed WoodMart Theme.
And if, after testing, when you reverted back to Woodmart also, then should not those Sidebars comes back again. Not sure, what might had happened, and why not re-appearing thereafter.

Would appreciate, if you could please Restore them with the Default Sidebar filters on Shop and Category pages. Just like in your Demo. Or create them, as default, from your side.

Regards

Hello,

I submitted the issue to the development tea before responding to you.

Each widget has the sizes, I mean you need to set full-width in the widgets, all the Theme Settings sizes, as well as sizes in Appearance > Woocommerce > Product image, would work properly, however they would not help if the images a considerably different in size and shape.

Images are not customized by CSS due to their nature, should it be possible to do, our developers would have already done that, however it is not possible.

Please create a testing product, upload all the images of the same size and shape and check how it would work.

If there are any problems, we will check the settings again and correct you.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts