Adding Product Images and Galleries

Adding product images and galleries are options that by default are available on the right hand side when editing a product in your store.

Featured image ↑ Back to top

The Product Image is the main image for your product. It is displayed in your product loops (i.e., product categories, up-sells, related products, etc.) and serves as the focus in the image gallery of your product details page.

Adding a product image is done in the same way as featured images for posts and pages are added. You can read about that on the WordPress Codex: Adding the featured image.

Product galleries ↑ Back to top

Add images to product gallery ↑ Back to top

Product galleries display all images attached to a product through the Product Gallery meta box.

You can create a product gallery using the same method as adding a featured image, but using the Product Gallery meta box.

Reorder images in product gallery ↑ Back to top

Images in the product gallery can be re-ordered easily via drag and drop. Simply re-order your images by moving them around.

Remove images from product gallery ↑ Back to top

To remove an image from the product gallery, hover over the image and click on the red “x.”

Image dimensions ↑ Back to top

Standard image dimensions ↑ Back to top

On the catalog tab at WooCommerce > Settings > Products > Display > Product Images, there are three image dimension inputs. Note that the first number is width and the second height.

  • Catalog Images appear in shop loops, such as product categories, up-sells/cross-sells.
  • Single Product Image is the main image on your product details page
  • Product thumbnails are the (optional) gallery thumbnails on your product details page

The images you upload are resized to match the values you input. For example, if your settings are 100×100 and you upload a 300×600 image it is resized to 100×200. You can also choose to ‘hard crop’ your images, which forces them to be the size specified in the settings, regardless of the raw image you upload, so they’re cropped rather than distorted in scale.

If you change settings after uploading product imagery, you need to regenerate thumbnails within WordPress for the changes to apply. To do this, we recommend using the Regenerate Thumbnails plugin.

Custom image dimensions ↑ Back to top

If you’re building a custom theme, you may want to configure these settings automatically. Use the snippet at: Set Image Dimensions in a Custom Theme.

Customer view ↑ Back to top

When you’ve added the product image and the gallery, the customer is able to see all of them in your store. It’s also possible to zoom, and use touch gestures on mobile.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top