0

I am working on an eCommerce website, with WooCommerce powering the shopping side of things.

The website has a 'Recent Reviews' Widget, within the Footer. As well as the Review itself, it also displays a small 30px by 30px Thumbnail of the Product itself. This Thumbnail being taken from the larger 600px by 600px Product Image and scaled down accordingly.

After performing an Audit, with a 3rd party tool, it highlights that I should upload a 30px by 30px image for the Thumbnail instead of having a scaled down version.

Firstly, would this require modification with WordPress or is this more of a WooCommerce issue? If a resolution can be achieved within WordPress, what would be the required course of action?

Improve this question

4 Answers 4

Reset to default
0

You can follow this step to set thumbnail woocommerce size

  1. Go to Appearance > Customize.
  2. Then go to WooCommerce > Product Images.
  3. Then go to WooCommerce > Product Images
  4. Write your desired width in "Thumbnail width" field.
  5. You can set the height of the images in “Thumbnail Cropping"
  6. Click on "Publish"

let me know the result.

Improve this answer
0

I think you need to change the image size for the thumbnails from wordpress media option please check the attached image for the same.

enter image description here

Alternatively you can select woocommerce Product image size from customizer from your wordpress admin panel

enter image description here

Do let me know if it works

Improve this answer
3
  • Unfortunately, this did not work. I can see that WooCommerce have a CSS entry, that targets the Review Thumbnail. Whilst I could just modify this, it will leave me in the same position ... In that the issue is being raised because CSS is being used to scale the image.
    – Craig
    Commented Dec 27, 2018 at 7:20
  • ok I am checking i t
    – Pratik bhatt
    Commented Dec 27, 2018 at 7:21
  • edited please check
    – Pratik bhatt
    Commented Dec 27, 2018 at 9:58
0

As other answers have noted there are several places in both WordPress and WooCommerce that let you specify image dimensions (step 1). Which one will work, depends on which one your widget is trying to use.

Next (step 2), depending on how the widget is organized, in its html it will either specify only that specific image or a whole scrset, letting the browser decide which image dimension to load, depending on screen size and css. The latter is the most likely option. However, it is also possible, though unlikely, that your widget simply loads the original version all the time and no redimensioning will work.

Then (step 3), just because the widget tells the browser to load an image with specific dimensions does not mean that specific image exists. More precisely, several versions of the image are generated on upload, depending on image sizes that are defined at that moment. If you change dimensions later (as in step 1) no new images will be generated, so an image with your newly specified width and height simply does not exist. The browser will take the nearest one available. There are plugins (example) that will run through all you images to make versions with your new dimensions available.

Improve this answer
-1

You can use the srcset attribute to let the browser help you get the optimised versions of images. The srcset must be used in your template. We use this in combination with Imagify to server optimal images to the browsers.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.