Product Gallery Thumbnail size issue

Hi,

Our Thumbnail size is set at 150 px in Theme Settings as well as in the Appearance -> Customise section.

the images are showing as 150×150 px when we are logged in as Admin. When we Log out and open a product page the Images are shown in full size which is creating slower load times.

Attachments:

You must be logged in to view attached files.

We have tried clearing Cache from WP Rocket as well as Cloudlflare 2 times, but still the issue persists

Hello,

I apologize for the delay.

Can you kindly verify how it works with default WordPress themes such as TwentyTwenty or WooCommerce Storefront to determine whether it is a problem with our theme or not?

Kind Regards

Hi,

we created a staging environment and changed the theme to Twenty Twenty One.
The Product gallery images are showing in 150×150 px size. So the issue seems to be in the Woodmart theme.
We have attached screenshot of the Images in the 2021 theme and woodmart also. Woodmart is showing full size

Attachments:

You must be logged in to view attached files.

please reply

REPLY

Hello,

Sorry for the delay.

Please send me access to the admin dashboard of the staging site so I will investigate the issue there.

Looking forward to hearing back from you!

Kind Regards

Please find staging login details with URL

I request you to please check this ASAP as the staging environment slows down our Main Site. Thank you

Hello,

I have checked the same product and on my side, the images look well, here is a video: https://take.ms/sb10c

If I missed something, please describe on how to replicate it on my side.

Kind Regards

[aggarwalrahul1920]

the images look fine. we raised the thumbnail issue. We have mentioned the product gallery thumbnail to be as 150×150 px in theme settings(screenshot attached).
If you open the website as a visitor and check the image dimensions in the gallery, the image sizes are very big even after regenerating thumbnails. The product gallery images should be 150 x 150 px when a customer visits the product page.
this is increasing the page size and increasing the load time.

PLEASE READ THE FIRST MESSAGE for clarity

• This reply was modified 1 year, 6 months ago by aggarwalrahul1920.

Attachments:

You must be logged in to view attached files.

Hello,

Please update the theme since you have version 7.1.2 and in 7.1.4 it is fixed.

Let me know if you have any questions, I’d be happy to answer them.

Kind Regards

We updated the theme in the staging environment to 7.2.3 (screenshot attached), but still the product gallery images are showing in full size and not 150×150 pixels. This issue still persists

Attachments:

You must be logged in to view attached files.

When we right click on the product gallery image and open in a new tab the image comes in full size rather than in 150×150 px (as mentioned in the Theme setting, screenshot already attached above)

Attachments:

You must be logged in to view attached files.

Hello,

It changes the width of the thumbnail from here: https://take.ms/hpCeg

As you can see in the above screenshot, the option works well on your website.

Feel free to reach out to me anytime when you have anything more to say.

Kind Regards

[aggarwalrahul1920]

I think you are not able to fully understand our problem here. we have specified the thumbnail size as 150 px in the Theme Settings->Single Product->Images->Thumbnail Image Width.

When we open any Product, the thumbnails show as 150×150 px Only when we are logged in the Admin Panel.
If we logout and view as a Customer, all the image gallery thumbnails are coming bigger than 150×150 px. How to rectify it??
Link of the screen recording attached below. 1st Page is when we are logged in as Admin, second is we have opened as a customer in incognito mode.

We have tried clearing Cache from WP Rocket as well as Cloudflare many times, but still the issue persists

• This reply was modified 1 year, 6 months ago by aggarwalrahul1920.

Hello,

It sounds like only a cache problem, make sure that you have cleared the server and browser cache as well.

Let me know the result.

Kind Regards

[aggarwalrahul1920]

We cleared the Server cache from cloudways along with WPRocket and Cloudflare as well. still the same issue.

Even no cache link is showing full size image: https://toolz4industry.com/product/maxman-21v-cordless-grass-trimmer-with-height-adjustment/?nocache

• This reply was modified 1 year, 5 months ago by aggarwalrahul1920.

Hello,

Please confirm the permission for plugins deactivation, and switching to the parent/default theme. As soon as we complete the testing we will enable all back.

Looking forward to collaborating with you!

Kind Regards

Hi,

you can do the same in the Staging environment and let us know

Hello,

Seems that the staging site is not working, could you please check it on your side?

https://take.ms/sARWR

Looking forward to hearing back from you!

Kind Regards

Please use the new login details below for the staging environment

Hello,

The full size in the new tab is shown due to the “srcset”, this functionality loads a specific size for specific screens. The default theme doesn’t use it so as a result you see the image as 150×150 px.

Here is official documentation about the “srcset”:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

So in this case, when we check the size attributes of the image, we can see that the crop is working well: https://monosnap.com/file/dUnR7x5sXjFi2fUJLTFEWf9MtAII8G

If you have any more questions or need further assistance, please let me know. I’m always happy to assist you.

Kind Regards

So you are saying there is no option or setting that can force the gallery images to show as 150×150 px, not using css or JS?

Hello,

Please add the below code to the functions.php file in your child theme. As a result, you will disable the “srcset” and you will have the same behavior as on the default theme.

function wd_disable_wp_responsive_images() {
	return 1;
}

add_action( 'woocommerce_gallery_thumbnail_size', function () {
	add_filter('max_srcset_image_width', 'wd_disable_wp_responsive_images');
});

add_action( 'elementor/frontend/widget/after_render', function ( $element ) {
	remove_filter('max_srcset_image_width', 'wd_disable_wp_responsive_images');
});

Kind Regards

You are not getting my point till now i think.

When we are logged in the Admin panel on Desktop, the gallery image thumbnails are being displayed in 150 x 150 px size, which is absolutely CORRECT Size.

When we logout from the Admin Panel and view the website as a Customer, the gallery image thumbnails are being displayed in full size (approx. 1024 x 1024 px) size which is not correct. this is Increasing the Page Size significantly.

We need a solution for this. The code is not helping with this

Hello,

As I mentioned above, you need to upload the theme to the latest update: https://monosnap.com/file/YLG1FZDQjBWFBITcMuVqX8yp0OOcji

It can be a cache because when you are on the site from the administrator, the cache is disabled and the pages are not cached, and when from an ordinary user, pages are displayed with the cache.

You can also reach out to us if you have any questions.

Kind Regards

We raised a query with EWWW image optimiser plugin team and they replied back saying the settings in the theme are the issue. Please refer their mail screenshot below

Attachments:

You must be logged in to view attached files.

Hello,

In version 7.1.2 we had a bug with picture sizes, but in 7.1.4 this bug was fixed. So please update the theme to the latest update and recheck that issue.

Let me know if there is anything else I can help and have a good day!

Kind Regards

we have already updated to 7.2.3

[Author]

Posts