WooCommerce main product image and gallery order: a short guide
You set the WooCommerce main product image in the product editor, in the right-hand column, in the Product image box. It is the image that shows in the product list, in the cart and first on the product page. You add the other images below, in the Product gallery box, and change their order by dragging the thumbnails with the mouse.
Author: The TellMyShop team. A guide for WordPress site and WooCommerce store owners: the cause, the manual fix and the same work in a chat conversation.
Last updated: · 6 min read
Where does each image appear?
The main image works in more places than the gallery, so it is worth choosing it on purpose rather than taking the first shot from the photo session.
| Place | Which image | What to watch out for |
|---|---|---|
| product and category lists | the main image, cropped to a thumbnail | square by default, so tall images lose the top and bottom |
| product page | the main image, with the gallery below | you set the gallery order by hand |
| cart and order emails | the main image, a small thumbnail | a close-up detail is unreadable in the cart |
| selected variation | the variation image instead of the main one | without a variation image the customer always sees the main one |
| sharing on social media | usually the main image, via the SEO plugin | the SEO plugin may have a separate image field |
| Google and the product feed | the main image as the product image | it should show the product itself, clearly |
WooCommerce describes three image sizes and the cropping settings in its documentation on product images and galleries. Google, in the specification for the product image link, asks for the main image to clearly show the product being sold, and for other shots to go into additional images.
How to change the main image and arrange the gallery
You can change one product in the admin in a few minutes.
- Open Products, All Products and edit the product.
- In the right-hand column, find the Product image box. Click the current image or the link to set one.
- Choose an image from the media library or upload a new one. While you are there, type the alt text, a short description of what is shown.
- Below, in the Product gallery box, add more images. You can select several at once by holding Ctrl or Cmd.
- Drag the gallery thumbnails into the order in which the customer should see them.
- Click Update and open the product page in a private window to see it as a customer does.
A gallery order that usually works: the product on a white background, the product in use, a detail (seam, texture, fastening), scale or dimensions, packaging. The first image answers “what is it”, the next ones answer the questions a customer would ask in a physical shop.
Which image should be the main one? One that still says what the product is as a small thumbnail in the list. The product alone, without packaging, on a light, calm background, whole and centred. Keep one framing and one aspect ratio across a category, because a list with a mix of portrait, landscape and styled shots looks untidy. Keep model shots, styled scenes and details for the gallery.
In a variable product, give an image to every variation that looks different, usually each colour. Open the Variations tab, expand the variation and click the image icon next to it. Sizes of the same colour can share one image.
Write alt text specifically: “black hooded sweatshirt, side view”, without stuffing in keywords. We say more about this in the post on alt text in WordPress, and Google covers it in its guide to image SEO.
Wrong image in the list, even though the product page is fine?
Most often cropping, the cache or a variation is to blame. Go through these three in turn.
- Thumbnail cropping. In Appearance, Customize, WooCommerce, Product Images there is a thumbnail aspect ratio setting. Square crops portrait images. After a change, WooCommerce regenerates the thumbnails in the background, which takes a while with a large catalogue.
- Cache. A caching plugin or your host may be showing an old list. Check in a private window and clear the cache if needed. More in the post on why changes are not showing in WordPress.
- A variation with its own image. In a variable product, the selected variation's image replaces the main one. If the variation has an old image, the customer sees the old image.
If no image shows next to blog posts, that is a different topic. We cover the featured image for posts in a separate post on the WordPress featured image.
How to change images on many products at once
For one product the admin is enough. When a supplier sends new packshots for 80 products, or after an import half the catalogue has the packaging as the main image, that is many evenings of clicking.
The TellMyShop plugin for WordPress and WooCommerce connects your store to the chat. In TellMyShop Free the chat finds products without a main image and images without alt text and shows you a list. It saves nothing.
In TellMyShop Pro the chat changes images in batches of up to 50 products. It sets the main image from the media library or from a public address, adds and removes gallery images, arranges their order and writes alt text. For a variation it sets one variation image. This works right after you activate the licence, with no switches.
You: In the Mugs category, the main image is the box. Set the photo of the mug itself as the main image and put the box at the end of the gallery.
Your chat: There are 24 products in the Mugs category. In 19, the first image is the box and the mug is second in the gallery. Sample:
5 products have no photo of the mug on its own, so I am leaving those alone.
You: Fine, do the 19.
Your chat: I will prepare a preview of the whole batch. I'll save it after your ‘yes’.
Card status: waiting for your “yes”Enamel mug 350 ml
old version: Main image: enamel-mug-box.jpg
new version: Main image: enamel-mug-side.jpg
old version: Gallery: enamel-mug-side.jpg, enamel-mug-detail.jpg
new version: Gallery: enamel-mug-detail.jpg, enamel-mug-box.jpg
The numbers and file names in the conversation are examples. Each batch goes into the change history. Undoing restores the image assignments and alt text, and files downloaded from addresses stay in the media library. You can undo most changes with one instruction.
What TellMyShop does not do: it does not take photos, edit them in a graphics program or change the thumbnail aspect ratio in the appearance settings. You set the cropping yourself, in a few clicks.
Start with the free TellMyShop Free, which finds products without images. Works with Claude or ChatGPT, including free accounts. Details are on the TellMyShop for WordPress and WooCommerce page, and Pro prices on the pricing page. If you are only just setting up products, start with the post on how to add a product in WooCommerce.
Questions and answers
Where do I change the main product image in WooCommerce?
In the product editor, in the right-hand column, in the Product image box. Click the current image, choose another from the media library or upload a new one, and update the product. The image from this box shows in the product list, in the cart and first on the product page.
How do I change the order of images in the product gallery?
In the Product gallery box, drag the thumbnails with the mouse into their new places and update the product. The main image always comes before the gallery, so to make another image first, set it as the product image.
Why are the thumbnails in the product list cropped?
WooCommerce crops images in lists to one aspect ratio, square by default. You change the ratio in Appearance, Customize, WooCommerce, Product Images. When images have different proportions, it is best to prepare them in one format from the start.
Can a product variation have its own image?
Yes, one image per variation. You set it on the Variations tab, in the settings of that variation. When a customer chooses, for example, red, that image replaces the main image on the product page.
Will the chat change images on many products at once?
Yes, in TellMyShop Pro, up to 50 products in one batch and without turning on any switches. It sets the main image, adds images to the gallery, arranges their order and writes alt text. You see each batch in a preview before saving.
WordPress is a trademark of the WordPress Foundation. WooCommerce is a trademark of Automattic Inc. Claude is a trademark of Anthropic PBC. ChatGPT and OpenAI are trademarks of OpenAI. TellMyShop is not affiliated with these companies.