{"id":61,"date":"2026-10-23T09:00:00","date_gmt":"2026-10-23T09:00:00","guid":{"rendered":"https:\/\/agerta.com\/blog\/?p=61"},"modified":"2026-10-23T09:00:00","modified_gmt":"2026-10-23T09:00:00","slug":"woocommerce-product-image-requirements","status":"publish","type":"post","link":"https:\/\/agerta.com\/blog\/woocommerce-product-image-requirements\/","title":{"rendered":"WooCommerce Product Image Requirements in 2026"},"content":{"rendered":"<p>WooCommerce product image requirements start with a simple rule: upload a strong source file, then test how the theme crops it. A photo can look good in the media library and still lose its product edge, handle, or detail in a catalog grid. This guide shows how to prepare one reliable image set and check the places shoppers actually see it.<\/p>\n<nav><strong>In this guide<\/strong><\/p>\n<ul>\n<li><a href=\"#what-woocommerce-uses\">What WooCommerce displays<\/a><\/li>\n<li><a href=\"#start-with-source\">Start with a useful source image<\/a><\/li>\n<li><a href=\"#crop-for-storefront\">Choose cropping for the storefront<\/a><\/li>\n<li><a href=\"#worked-example\">Worked example: ceramic coffee dripper<\/a><\/li>\n<li><a href=\"#test-before-live\">Test before publishing<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2 id=\"what-woocommerce-uses\">WooCommerce product image requirements depend on where the image appears<\/h2>\n<p>WooCommerce uses a main product image, catalog images, and smaller gallery thumbnails. The main image appears on the product page. Catalog images appear in shop, category, related-product, upsell, and cross-sell grids. Thumbnails help shoppers move through the gallery and can also appear in smaller interface areas.<\/p>\n<p>The important point is that one upload can be rendered several ways. The official <a href=\"https:\/\/woocommerce.com\/document\/adding-product-images-and-galleries\/\" target=\"_blank\" rel=\"noopener\">WooCommerce guide to product images and galleries<\/a> recommends source images of at least 800 by 800 pixels. It also notes that a larger source helps when a product has fine detail. That recommendation is a floor, not a reason to upload a soft or badly framed picture.<\/p>\n<p>Theme settings change the final display. In classic themes, the developer documentation says the single-product image uses the uploaded image without cropping by default, while catalog and gallery thumbnails can use square crops. That is why a picture that feels safe on a product page can still look cramped in the shop grid.<\/p>\n<h2 id=\"start-with-source\">Start with one product image that can survive several crops<\/h2>\n<p>For practical WooCommerce product image requirements, treat the original file as the master. Shoot or generate it with the entire product visible, a little room around the edge, and enough detail for a shopper to zoom. Do not solve a tight crop by stretching the image. It will only make the catalog tile look blurry.<\/p>\n<p>A square source is often the easiest starting point when a store uses square catalog cards. It is not mandatory. A wider photo can work well if the subject stays inside a central safe area. The key is to protect the product, not the background. Leave breathing room around handles, straps, lids, and small parts that a crop could cut off.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" width=\"2528\" height=\"1696\" class=\"wp-image-60\" src=\"https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before.jpeg\" alt=\"WooCommerce product image before cleanup on a cluttered counter\" srcset=\"https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before.jpeg 2528w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before-300x201.jpeg 300w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before-1024x687.jpeg 1024w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before-768x515.jpeg 768w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before-1536x1030.jpeg 1536w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-before-2048x1374.jpeg 2048w\" sizes=\"auto, (max-width: 2528px) 100vw, 2528px\" \/><figcaption>Sample made for this article: the coffee dripper is small in a busy phone photo, with packaging and other objects competing for attention.<\/figcaption><\/figure>\n<p>This sample is intentionally weak. The ceramic dripper sits near the front of a cluttered counter. A shopper has to work to identify the item, and a tight square crop would make that problem worse. The image has enough pixels, but it does not give the storefront a clean focal point.<\/p>\n<h2 id=\"crop-for-storefront\">Use cropping settings to protect the product, not to force every photo into one shape<\/h2>\n<p>Open Appearance, then Customize, then WooCommerce, then Product Images to check the catalog crop. WooCommerce offers square, custom-ratio, and uncropped choices for catalog and thumbnail images. The <a href=\"https:\/\/woocommerce.com\/document\/woocommerce-customizer\/product-page-and-images\/\" target=\"_blank\" rel=\"noopener\">official product-image settings guide<\/a> recommends previewing changes on desktop, tablet, and mobile before publishing them.<\/p>\n<table>\n<thead>\n<tr>\n<th>Storefront choice<\/th>\n<th>Best use<\/th>\n<th>What to check<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Square crop<\/td>\n<td>Catalogs that need an even grid<\/td>\n<td>Handles and edges stay inside the frame<\/td>\n<\/tr>\n<tr>\n<td>Custom ratio<\/td>\n<td>A theme with a deliberate card shape<\/td>\n<td>Every product still has enough margin<\/td>\n<\/tr>\n<tr>\n<td>Uncropped<\/td>\n<td>Products where shape matters more than grid uniformity<\/td>\n<td>Cards do not look uneven beside each other<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Do not assume the setting controls every image. A theme can define widths or alter presentation with CSS. The <a href=\"https:\/\/developer.woocommerce.com\/docs\/theming\/theme-development\/image-sizes\/\" target=\"_blank\" rel=\"noopener\">WooCommerce image-sizing documentation<\/a> explains that themes can set image sizes and that store owners can control cropping when those settings are available. Check the actual storefront after any change.<\/p>\n<h2 id=\"worked-example\">Worked example: turn one weak upload into a useful image set<\/h2>\n<p>The sample coffee dripper needed two versions. The first was a catalog-ready image. The product is centered, fully visible, and surrounded by plain space. It gives a square crop nothing important to remove. This is the kind of source that handles catalog grids, smaller tiles, and gallery navigation without making a shopper guess what is for sale.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"2048\" class=\"wp-image-58\" src=\"https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog.jpeg\" alt=\"WooCommerce product image example with a centered coffee dripper\" srcset=\"https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog.jpeg 2048w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog-300x300.jpeg 300w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog-1024x1024.jpeg 1024w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog-150x150.jpeg 150w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog-768x768.jpeg 768w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-catalog-1536x1536.jpeg 1536w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><figcaption>Sample made for this article: a centered product on white gives a square catalog crop clear edges and one obvious subject.<\/figcaption><\/figure>\n<p>The second version was made for the product page. It adds context but keeps the dripper in the middle of the frame. This is where a lifestyle shot earns its place: it shows scale and use without replacing the clear main product view. Use it in the gallery, not as a substitute for a readable catalog image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" width=\"2528\" height=\"1696\" class=\"wp-image-59\" src=\"https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial.jpeg\" alt=\"WooCommerce product image in a bright kitchen setting\" srcset=\"https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial.jpeg 2528w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial-300x201.jpeg 300w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial-1024x687.jpeg 1024w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial-768x515.jpeg 768w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial-1536x1030.jpeg 1536w, https:\/\/agerta.com\/blog\/wp-content\/uploads\/2026\/10\/woocommerce-photo-editorial-2048x1374.jpeg 2048w\" sizes=\"auto, (max-width: 2528px) 100vw, 2528px\" \/><figcaption>Sample made for this article: a wider product-page image keeps the coffee dripper central while adding a calm kitchen context.<\/figcaption><\/figure>\n<p>These examples also show why WooCommerce product image requirements are not just a pixel question. The same product can need a clean catalog view and a contextual gallery view. The file dimensions matter, but framing decides whether the resulting crop helps a buyer.<\/p>\n<h2 id=\"test-before-live\">Test WooCommerce product images in the places shoppers browse<\/h2>\n<p>Before publishing, open the product page, the shop page, one category page, and a phone preview. Look for cut-off product edges, inconsistent card heights, and images that turn soft when enlarged. If a catalog image looks wrong, inspect the source framing first. Then confirm the crop setting and whether the theme overrides it.<\/p>\n<ol>\n<li>Upload the largest clean source file available, ideally at least 800 by 800 pixels.<\/li>\n<li>Set the product image and build the gallery with images that answer different shopper questions.<\/li>\n<li>Choose square, custom, or uncropped catalog behavior based on the theme and product shape.<\/li>\n<li>Preview desktop, tablet, and mobile before making the setting live.<\/li>\n<li>Regenerate thumbnails if older images still show the previous crop.<\/li>\n<\/ol>\n<p>Existing catalogs need this check too. A <a href=\"https:\/\/agerta.com\/blog\/product-listing-audit\/\">product listing audit<\/a> can surface photos that are missing, soft, or framed too tightly. If a store needs a cleaner visual baseline, start with <a href=\"https:\/\/agerta.com\/blog\/white-background-product-photos\/\">white-background product photos<\/a>, then add contextual gallery images where they help a shopper understand the item.<\/p>\n<p>For a large catalog, repeatable rules save more time than fixing images one by one. <a href=\"https:\/\/agerta.com\/\">Agerta<\/a> can find product listings with weak or missing images, prepare new product visuals, and keep the update inside the approval rules a store sets. For more photography guidance, browse the <a href=\"https:\/\/agerta.com\/blog\/category\/product-photography\/\">Product Photography<\/a> category.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Set WooCommerce product image sizes and crops that keep products clear in catalogs, galleries, and product pages.<\/p>\n","protected":false},"author":2,"featured_media":59,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[14,9,8,25],"class_list":["post-61","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-photography","tag-image-seo","tag-product-images","tag-product-photography","tag-woocommerce"],"_links":{"self":[{"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":1,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/posts\/61\/revisions\/62"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agerta.com\/blog\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}