My images don't look right in the food order form/lightbox
We have designed WooCommerce Restaurant Ordering to look good with image sizes that will work for the vast majority of restaurants. This article provides information about the recommended image sizes so that you can prepare suitable images, and discusses some common image problems.
Image sizes
WooCommerce Restaurant Ordering displays the images for your food products as follows:
In the food order form
By default, each image is cropped to a square shape of 130px. On mobiles the image is displayed at 110px square.
The images in the food order form are always square because this is the most stylish way to display images in this layout, and is similar to other platforms such as Uber Eats. If your images are not square then we recommend pre-cropping them for best results.
You can change the size of the images using the Image Size option. They will still be square, so you just need to enter one dimension.
If the item has a very long description and you are showing the full description in the order form, then the image will expand vertically to fit. This is intentional because if the image didn't expand then a white space would appear underneath the image, which wouldn't look professional.
If the image has been forced to expand vertically then this might mean that the right or left hand portion of the image is cropped. If this doesn't look good with your images then our suggestions are to:
- Enable the limited description option to prevent each item from taking up so much vertical space.
- Add pre-cropped images that look good in the expanded format. This will give you more control than having them cropped automatically.
- Disable the images in the food order form.
In the lightbox popup
Each image is displayed at 500px wide and 300px high. This is to prevent customers from having to scroll down too far to see the product information and add to cart section underneath the image.
If the image is not the correct proportions by default, then the top of the image will be shown and the bottom will be cropped. For best results, we recommend sizing your food images so that they look good in this format.
FAQ
My image size is being ignored
If you have set the image size option then this will only be used when there is enough space for images of this size.
if there isn’t enough room for the image width given the size of the page content area and number of columns selected, then the image will appear at the size that is set but not so wide. We recommend testing your chosen image size to ensure that it fits on the page.
The images are stretched
If the images are being stretched/distorted then this is not coming from WooCommerce Restaurant Ordering, so you need to check what else on your site might be causing this and disable it.
For example, this can happen if you have enabled the "Speed up image load times" option in Jetpack's Site Accelerator.
The images look blurred on my retina device
If you are using a high definition/retina screen then the images may look blurred. This applies to all the images on your website and not just the ones in WooCommerce Restaurant Ordering.
To fix this, we recommend installing the Perfect Images (Retina, Thumbnails, Replace & CDN) plugin and uploading all the images at twice the size you need. The Perfect Images plugin will automatically serve the correct size of image to all of your users so that they see beautifully crisp images.