WooCommerce Single Product Gallery
Every WooCommerce product page shows a gallery: the main product picture and, if the product has more pictures, thumbnails to switch between them. Tirenoa has a group of options that control how this gallery looks and behaves on all product pages.
This page explains each option, how the options depend on the size of your pictures, and how to set the gallery differently when you build product pages with layout sections. The options exist only while WooCommerce is installed and active.
In this article: Where the Options Are · Options · Picture Sizes That Work · Product Pages Built With Layout Sections · Tips · Related
Where the Options Are
Open Tirenoa › Options › WooCommerce › General WooCommerce. The WooCommerce section is part of the options only while the WooCommerce plugin is active.
Options
| Option | What it does |
|---|---|
| WooCommerce Product Images Layout | Tirenoa, the default, shows the gallery as a slider with arrows that runs in a loop, lets you choose where the thumbnails stand, and opens the pictures in the site’s own lightbox. WooCommerce uses the standard gallery of WooCommerce with its own lightbox and the thumbnails below the main picture. |
| WooCommerce Product Images Zoom | On, the default, enlarges the main picture while the mouse is over it. Off removes the zoom from all product pages. |
| WooCommerce Product Images Width | The width of the gallery on the product page in pixels. The default is 500px. The product summary beside the gallery moves accordingly. |
| WooCommerce Product Images Thumbnail Width | The width in pixels at which the thumbnail files are created, from 50 to 400. The default is 200. |
| WooCommerce Product Images Thumbnail Position | Top, Right, Bottom or Left of the main picture. The default is Bottom. Only for the Tirenoa layout. |
| WooCommerce Product Images Thumbnail Column Width | The width of the thumbnail column as a percentage of the whole gallery, default 15. Only shown when the thumbnails stand left or right. |
| WooCommerce Product Images Thumbnails Columns | How many thumbnails stand side by side, from 1 to 6, default 4. Shown when the thumbnails stand above or below the main picture, and for the WooCommerce layout. |
Picture Sizes That Work
- Zoom: the zoom shows the original picture at full size. It only works when the picture you uploaded is larger than the gallery, so upload pictures clearly wider than WooCommerce Product Images Width. At twice the gallery width the zoom is easy to see.
- Main picture: the main image width in WooCommerce’s own product image settings should be at least as large as WooCommerce Product Images Width. Otherwise the main picture is stretched and looks soft.
- Thumbnails: WooCommerce Product Images Thumbnail Width has to be at least the gallery width shared out over the thumbnail columns: gallery width / number of columns. With a gallery of 500px and 4 columns that is 125px, so the default of 200 is enough. Fewer columns need wider thumbnails.
Note: WordPress creates the picture sizes when a picture is uploaded. After you change the gallery width or the thumbnail width, the pictures already in your media library still have the old sizes. Regenerate the thumbnails, for example with Regenerate shop thumbnails under WooCommerce › Status › Tools, so that existing products get sharp pictures.
Product Pages Built With Layout Sections
If you design the product page yourself with a content layout section, the gallery is the Woo Product Images element. It starts with the values of the options above and lets you change them for that layout:
| Option | What it does |
|---|---|
| Product Images Layout | Tirenoa or WooCommerce, as described above. Default follows the site-wide option. |
| Product Images Zoom | Yes, No, or Default to follow the site-wide option. |
| Product Images Max Width | The largest width of the gallery in this layout. |
| Product Images Thumbnail Position | Top, Right, Bottom, Left or Default. Only for the Tirenoa layout. |
| Product Images Thumbnails | The number of thumbnail columns, when the thumbnails stand above or below. |
| Product Images Thumbnail Column Width | The width of the thumbnail column in percent, when the thumbnails stand left or right. |
| Lazy Load / Skip Lazy Loading | How the gallery pictures are loaded. Skip lazy loading when the gallery is visible right at the top of the page. |
| Display Out of Stock Badge | Shows the sold-out badge on the gallery. Default No. |
| Display Sale Badge | Shows the sale badge on the gallery. Default Yes. |
| Margin, Element Visibility, CSS Class, CSS ID | Spacing, visibility per screen size and names for your own styling. |
Tips
- Use the same proportions for all pictures of a product. The gallery then keeps its height when a visitor switches pictures.
- On small screens thumbnails beside the picture become narrow. Bottom is the safest position.
- If the zoom does nothing on one product, its picture is smaller than the gallery. Upload a larger picture.
- The gallery, the zoom and the lightbox run entirely on your own site and connect visitors to no outside service.