Title: Secondary Product Image for WooCommerce
Author: WPZOOM
Published: <strong>9. Februar 2023</strong>
Last modified: 10. August 2026

---

Plugins suchen

![](https://ps.w.org/secondary-product-image-for-woocommerce/assets/banner-772x250.
png?rev=3035520)

![](https://ps.w.org/secondary-product-image-for-woocommerce/assets/icon-256x256.
png?rev=3035520)

# Secondary Product Image for WooCommerce

 Von [WPZOOM](https://profiles.wordpress.org/wpzoom/)

[Herunterladen](https://downloads.wordpress.org/plugin/secondary-product-image-for-woocommerce.1.1.0.zip)

 * [Details](https://de.wordpress.org/plugins/secondary-product-image-for-woocommerce/#description)
 * [Rezensionen](https://de.wordpress.org/plugins/secondary-product-image-for-woocommerce/#reviews)
 *  [Installation](https://de.wordpress.org/plugins/secondary-product-image-for-woocommerce/#installation)
 * [Entwicklung](https://de.wordpress.org/plugins/secondary-product-image-for-woocommerce/#developers)

 [Support](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/)

## Beschreibung

Shoppers decide from the catalog page. **Secondary Product Image for WooCommerce**
gives them a second look without a single click: hover a product in your shop, and
a second image fades in over the first.

Set a dedicated hover image per product, or let the plugin use the product gallery
you have already uploaded. It works on the shop page, category and tag archives,
search results, related products, and anywhere else your theme lists products.

[VIEW DEMO](https://demo.wpzoom.com/balance/shop/)

#### Pick a second image, or use the gallery you already have

Every product gets a **Secondary Product Image** box next to the featured image,
so you can choose exactly which photo appears on hover: the back of a shirt, a different
colourway, the product being worn, a detail shot.

Not set one? The plugin falls back to the product gallery automatically, so an existing
store gets the hover effect on every product without any editing. You choose whether
the fallback is the first or the last gallery image, or whether such products simply
show nothing.

#### Three hover behaviours

 * **A single second image** — the classic image swap. One photo fades in, one fades
   out.
 * **Rotate the gallery** — cycle through every gallery image automatically for 
   as long as the shopper hovers, at a speed you set.
 * **Previous / next arrows** — let shoppers step through the gallery themselves,
   right in the product grid, without opening the product.

#### Fade, slide or zoom

Choose the transition that suits your shop and set its speed in milliseconds. Prefer
something instant? Set the speed to zero for a hard swap.

#### Built-in lightbox

Turn on the optional lightbox and a button appears on the product image. Click it
and the images open full size over the page, with previous and next arrows, keyboard
navigation and a counter. Place the button in the centre of the image or in any 
corner, so it never clashes with your theme’s sale badge.

#### Fast by default

Extra gallery images are not downloaded when the page loads. They are fetched the
first time a shopper hovers that particular product, so a shop page full of products
stays as light as it was before.

The effect is also skipped entirely on phones and tablets, where a tap is meant 
to open the product rather than swap its picture. Those visitors never download 
the extra images at all. You can switch it on for touch devices if you prefer.

#### Works with your theme

Rather than assuming your product images are square, the plugin measures the image
it is covering and matches it exactly, so the hover image cannot spill over your
titles and prices. It has been built and tested against themes that crop thumbnails
to their own ratio.

 * Classic themes and block themes
 * The Products and Product Collection blocks
 * Product grids loaded by AJAX filters or infinite scroll
 * Sale badges and other overlays stay on top of the hover image
 * Keyboard users get the effect too, and it respects „reduce motion“ system settings
 * Compatible with WooCommerce High-Performance Order Storage (HPOS)

#### Set it up in a minute

All options live under **WooCommerce  Settings  Products  Secondary Image**, with
a live preview so you can try every effect, speed and position before you save anything.

#### Recommended Themes & DEMO

[**Balance**](https://www.wpzoom.com/themes/balance/)
 [**Inspiro**](https://www.wpzoom.com/themes/inspiro/)
[**Inspiro PRO**](https://www.wpzoom.com/themes/inspiro-pro/) – _NEW_

#### Additional Resources

 * [Grab a free theme](https://profiles.wordpress.org/wpzoom/#content-themes)
 * [WPZOOM website](https://www.wpzoom.com)
 * [GitHub repository](https://github.com/wpzoom/secondary-product-image-for-woocommerce)

## Screenshots

[⌊A second product image revealed on hover in the shop⌉⌊A second product image revealed
on hover in the shop⌉[

A second product image revealed on hover in the shop

[⌊Choosing the secondary image on the product edit screen⌉⌊Choosing the secondary
image on the product edit screen⌉[

Choosing the secondary image on the product edit screen

## Installation

 1. Go to Plugins > Add New
 2. Search for „Secondary Product Image for WooCommerce“
 3. Install & Activate
 4. Open WooCommerce > Settings > Products > Secondary Image to choose the effect
 5. Edit any product and use the „Secondary Product Image“ box to pick the image shown
    on hover

WooCommerce needs to be installed and active.

## FAQ

### How do I choose the image that appears on hover?

Edit a product and look for the **Secondary Product Image** box, below the main 
product image box. Click it, pick an image from your media library, and update the
product.

### Do I have to set an image for every product?

No. If a product has no secondary image, the plugin uses its product gallery instead,
so an existing shop works straight away. Under WooCommerce > Settings > Products
> Secondary Image you can pick whether that fallback is the first or the last gallery
image, or turn the fallback off so only products with a chosen image get the effect.

### Can I show more than one image on hover?

Yes. Set „On hover show“ to rotate through all gallery images automatically, or 
to show previous / next arrows so shoppers can browse the gallery themselves from
the product grid.

### Will this slow down my shop page?

The second image is fetched only when a shopper actually hovers that product, and
only on devices with a mouse. Extra gallery images are held back the same way, so
the initial page load is unaffected.

### Does it work on phones and tablets?

By default the effect is switched off on touch devices, because a tap should open
the product rather than change its image, and those visitors never download the 
extra images. There is a setting to enable it if you want it anyway.

### Does it work with my theme?

It works with the vast majority of WooCommerce themes, classic and block-based. 
The hover image measures the product image underneath and matches its exact size
and crop, so it fits themes that display square thumbnails as well as those that
don’t.

### Does it work with block themes and the Product Collection block?

Yes. Both the classic shop templates and the Products / Product Collection blocks
are supported.

### Is it compatible with HPOS?

Yes. The plugin is declared compatible with WooCommerce High-Performance Order Storage.
It only stores an image ID against your products and never touches order data.

### Can I change the animation, or how fast it is?

Yes. Choose fade, slide or zoom, and set the duration in milliseconds. There is 
a live preview on the settings screen so you can see each option before saving.

### What is the lightbox, and is it the same as WooCommerce’s?

It is an optional button on the product image in your listings that opens the images
full size over the page. WooCommerce’s own lightbox works on the single product 
page; this one lets shoppers take a closer look without leaving the shop page. It
can be turned off completely.

### Can I use my own styling or change the behaviour in code?

Yes. The plugin exposes filters including `wpzoom_wc_spi_enabled`, `wpzoom_wc_spi_image_ids`,`
wpzoom_wc_spi_secondary_product_thumbnail`, `wpzoom_wc_spi_image_class` and `wpzoom_wc_spi_option`,
plus the CSS custom properties `--wpzoom-wc-spi-duration`, `--wpzoom-wc-spi-control-
color` and `--wpzoom-wc-spi-control-background`.

### Where do I report a bug or request a feature?

Use the support forum here, or open an issue on the [GitHub repository](https://github.com/wpzoom/secondary-product-image-for-woocommerce).

## Rezensionen

![](https://secure.gravatar.com/avatar/e3700a672ba627836e00a584711ac3e804cc65a5b4c83fae270b678b5a5af741?
s=60&d=retro&r=g)

### 󠀁[Great little plugin!](https://wordpress.org/support/topic/great-little-plugin-372/)󠁿

 [Natacha](https://profiles.wordpress.org/chickwithbob/) 1. September 2025

Does just what it says! I like how it also makes good use of filters and actions
so you can hook in and control the output. Recommended!

![](https://secure.gravatar.com/avatar/cc541178b7126ce35b313fed1ae0c7600dbb642221459696e5eb88a8bdcff0b3?
s=60&d=retro&r=g)

### 󠀁[Ne fonctionne pas dans la boutique](https://wordpress.org/support/topic/ne-fonctionne-pas-dans-la-boutique/)󠁿

 [tiinse](https://profiles.wordpress.org/tiinse/) 8. Januar 2025

Le plugin est très léger et à l'air bien. Mais il ne fonctionne pas dans la boutique.
L'effet se fait uniquement dans les pages d'archives autre que la page boutique.
Dommage. Si ce bug est réparé je serais heureuse de pouvoir l'utiliser de nouveau.

 [ Alle 2 Rezensionen lesen ](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/)

## Mitwirkende und Entwickler

„Secondary Product Image for WooCommerce“ ist Open-Source-Software. Folgende Menschen
haben an diesem Plugin mitgewirkt:

Mitwirkende

 *   [ WPZOOM ](https://profiles.wordpress.org/wpzoom/)

„Secondary Product Image for WooCommerce“ wurde in 1 Sprache übersetzt. Danke an
[die Übersetzer](https://translate.wordpress.org/projects/wp-plugins/secondary-product-image-for-woocommerce/contributors)
für ihre Mitwirkung.

[Übersetze „Secondary Product Image for WooCommerce“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/secondary-product-image-for-woocommerce)

### Interessiert an der Entwicklung?

[Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/secondary-product-image-for-woocommerce/),
sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/secondary-product-image-for-woocommerce/)
an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/secondary-product-image-for-woocommerce/)
per [RSS](https://plugins.trac.wordpress.org/log/secondary-product-image-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss).

## Änderungsprotokoll

#### 1.1.0

 * New settings screen under WooCommerce > Settings > Products > Secondary Image
 * New live preview on the settings screen, so you can try every option before saving
 * New Settings shortcut in the Plugins list
 * New transition effects: fade, slide and zoom, with a configurable speed
 * New hover mode that rotates through all gallery images automatically
 * New hover mode with previous / next arrows
 * New optional lightbox, opened from a button on the product image, which you can
   place in the centre or in any corner
 * Gallery images are only downloaded once a product is hovered, so shop pages stay
   fast
 * You can now choose whether the fallback is the first or the last gallery image,
   or nothing at all
 * Declared compatibility with WooCommerce High-Performance Order Storage (HPOS)
 * Added support for the Product Collection and Products blocks
 * Fixed the hover effect requiring the product title to be hovered first on some
   themes, including Divi
 * Fixed the secondary image overflowing the product image on themes that crop thumbnails
   to their own ratio, such as Blocksy
 * Sale badges and similar overlays now stay above the secondary image
 * Fixed the secondary image appearing faded on themes that dim product images on
   hover
 * The effect now follows the device’s pointer instead of user agent detection, 
   so it no longer breaks on cached pages
 * The secondary image is now revealed for keyboard users and respects reduced motion
   preferences
 * Fixed stale image data being left behind when an attachment was deleted from 
   the Media Library

#### 1.0.2

 * Fixed an issue with the secondary image preloading
 * Added compatibility with Block Themes
 * The secondary image is now hidden on mobile devices to make it easier to navigate
   to products

#### 1.0.1

 * Minor bug fix

#### 1.0.0

 * Initial plugin release

## Meta

 *  Version **1.1.0**
 *  Zuletzt aktualisiert **vor 2 Monaten**
 *  Aktive Installationen **2.000+**
 *  WordPress-Version ** 6.5 oder höher **
 *  Getestet bis **7.1.3**
 *  PHP-Version ** 7.4 oder höher **
 *  Sprachen
 * [English (US)](https://wordpress.org/plugins/secondary-product-image-for-woocommerce/)
   und [Russian](https://ru.wordpress.org/plugins/secondary-product-image-for-woocommerce/).
 *  [Übersetze in deine Sprache](https://translate.wordpress.org/projects/wp-plugins/secondary-product-image-for-woocommerce)
 * Schlagwörter
 * [flip](https://de.wordpress.org/plugins/tags/flip/)[hover](https://de.wordpress.org/plugins/tags/hover/)
   [product gallery](https://de.wordpress.org/plugins/tags/product-gallery/)[product image](https://de.wordpress.org/plugins/tags/product-image/)
   [woocommerce](https://de.wordpress.org/plugins/tags/woocommerce/)
 *  [Erweiterte Ansicht](https://de.wordpress.org/plugins/secondary-product-image-for-woocommerce/advanced/)

## Bewertungen

 3.5 von 5 Sternen.

 *  [  1 5-Sterne-Rezension     ](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/?filter=5)
 *  [  0 4-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/?filter=4)
 *  [  0 3-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/?filter=3)
 *  [  1 2-Sterne-Rezension     ](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/?filter=2)
 *  [  0 1-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/?filter=1)

[Deine Rezension](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/#new-post)

[Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/reviews/)

## Mitwirkende

 *   [ WPZOOM ](https://profiles.wordpress.org/wpzoom/)

## Support

Behobene Probleme in den letzten zwei Monaten:

     1 von 1

 [Support-Forum anzeigen](https://wordpress.org/support/plugin/secondary-product-image-for-woocommerce/)

## Spenden

Möchtest du die Weiterentwicklung dieses Plugins unterstützen?

 [ Für dieses Plugin spenden ](http://paypal.me/wpzm/10usd)