Set the shape of product photos

Every product photo in the store sits in the same frame: the product cards, the product page and its thumbnails, quick view, the cart, the mini-cart, the checkout, the sticky add to cart bar, the orders in the account and the category pictures in the mega menu, the shop's category tiles and the page not found. The frame is one setting for the whole store. It works with or without LanternWP Companion.

Choose the frame

1. Go to Appearance → LanternWP and, under Colors, fonts and spacing, select LanternWP panel. In the editor, the panel also opens from the LanternWP button in the top bar.
2. Open Product images.
3. Under Frame, choose Portrait 4:5, Portrait 3:4, Square 1:1 or Landscape 4:3. The page in the editor shows the new frame at once.
4. Select Save.

A store that never chose a frame shows its photos square. The frame belongs to the store, not to a look: choosing another look in Browse styles, or Reset styles in Styles, leaves it as it is. Importing a demo sets it to the shape of the demo's product photos (Import a demo).

Photos of another shape

The photo fills the frame and is cut at its edges: a square photo in a Landscape 4:3 frame loses a strip at the top and the bottom, in a Portrait 4:5 frame a strip at each side. A photo in the frame's shape shows whole. The background behind product photos, which you choose under the frame, shows where a photo does not cover the frame: around the whole product in the gallery with thumbnails beside it, and behind the transparent parts of a photo.

Prepare your photos

• Make every product photo in the frame's shape: 1:1 for Square 1:1, 4:3 for Landscape 4:3 and so on. A size such as 1000 × 1000 pixels for a square, 1000 × 750 for 4:3 or 800 × 1000 for 4:5 is enough for every place the store shows it.
• Keep the product inside the photo with some room around it, and the same room in every photo, so the products line up in a row of cards.
• If your photos are square and you want another frame, crop them to the new shape before you upload them again; the store does not move a product inside its frame.

Small copies of your photos

WooCommerce keeps smaller copies of every photo for the small pictures: the cart and its suggested products, the mini-cart, the checkout, the sticky add to cart bar and the orders in the account. They are cut to the frame as well, so a photo is cut once, never a square cut again. WooCommerce's own Thumbnail cropping setting follows the frame and is no longer offered.

When you choose another frame and select Save, WooCommerce makes the copies again in the background. Until it reaches a photo, that photo's copy is made the first time a page shows it, which makes that page a little slower to open once. WooCommerce → Status → Tools shows Regenerating in progress next to Regenerate shop thumbnails while it works.