Iconic Image Swap for WooCommerce

The first photo in your gallery changes jobs

You uploaded each product's photos with its own page in mind: a cover and then the rest, in whatever order they came. The shop listing shows only the cover, so anyone who wants another view has to open the product, look and go back. Then repeat it with the next one.

Image Swap for WooCommerce brings those views to the listing, without leaving the shop or catalog. Turning it on changes something worth keeping in mind: the secondary image is the first image in the product gallery. That photo, which until now lived hidden inside the product page, starts appearing in the listing next to the cover.

That is why the real work is reviewing the order of your galleries, because in each product it decides which second photo the buyer will see.

Nine effects for the product listing

• Fade: on mouse hover, the image fades to the secondary one.
• Slide: a slider with arrows that moves through two or more images.
• Bullets: works like Slide, with bullets that show how many images there are.
• Thumbnails: thumbnails below the image; clicking one replaces the main image.
• Zoom: zooms in on the image on mouse hover.
• Picture-in-Picture: the secondary image sits small in a corner and swaps when clicked.
• Modal Gallery: opens the images in a large fullscreen gallery.
• Enlarge: a subtle enlargement of the whole image on mouse hover.
• Flip: a flip to the secondary image on mouse hover.

Which effect suits what the customer wants to see

The nine can be grouped into four uses:

• Another view of the product: Fade, Flip and Picture-in-Picture. They work with two images, so the first one in the gallery should add something the cover does not show.
• Several views in a row: Slide, Bullets and Thumbnails, if your products have two or more images worth moving through.
• More detail from the same photo: Zoom and Enlarge. They do not ask for a second image, although the cover has to hold up to the enlargement.
• A large view: Modal Gallery, for looking closely without opening the product page.

Fade, Zoom, Enlarge and Flip respond to mouse hover. If much of your traffic comes from phones, test on one how they behave with your theme before deciding.

Its ground and the themes with an integration

Image Swap acts on shop and catalog pages. It does not create photos: a product with a single image has nothing to swap in Fade, Flip or Slide.

It works with builders such as Elementor, which let you add the effects to any product listing, and with well-coded WooCommerce themes. It has an official integration, with code adapted by its developers, for Kale, Martfury, X, Woodmart, Lay, BeTheme and Porto, plus the WooCommerce Show Single Variations plugin. With other third-party pieces, run a test first.

Requirements and setup in your shop

It needs WooCommerce and does not ask you to write code. This is the sequence to get it working:

1. Review the gallery order of your most viewed products.
2. Install the plugin and go to WooCommerce > Image Swap.
3. On the General tab, choose the effect under Display Settings > Effect and save.
4. Open Effect Settings, find the section for the chosen effect and adjust its options.
5. Check the result on the shop page.

When another piece of the catalog fits better

If you want a set of tools for the shop, Kadence Shop Kit brings together seventeen, among them a product gallery with video and variation images, visual color and size selectors, a wishlist and upsells.

If the work is on each product's page, JetProductGallery creates grid or slider galleries with Elementor and the block editor, with images grouped by variation.

Four answers on the secondary image and your theme

Where does the secondary image come from?

It is the first image in the product gallery.

Will it work with my theme?

It should, if the theme is well coded and WooCommerce compatible. If it is not among the official integrations, try it first on a copy of the site.

Does it work with Elementor?

Yes, builders such as Elementor let you apply the effects to any product listing.

Which effect works if my products have only one photo?

Zoom and Enlarge, which act on the image itself, and Modal Gallery, which takes one or more.