Description
Robercrea Image Swap for WooCommerce shows the first image of the product gallery when a visitor hovers a product in the shop, category pages and product loops. It is a lightweight way to show more of your products and improve engagement.
Features
- Custom hover image per product (General product tab, or quick edit in the products list) or an automatic one: first, last or random gallery image, or the image of a variation.
- “Hover” column in the products list, with quick edit and a bulk action to go back to the automatic image.
- Fade, slide (left, right or up), zoom and 3D flip effects with configurable duration.
- Pure CSS transitions on the frontend, minimal CSS loaded only on shop/archive pages.
- Exclude specific product categories.
- No layout shift: the second image preserves the aspect ratio and size of the primary thumbnail.
- Touch screens: optionally show the second image with a sideways swipe (a tap still opens the product). Respects
prefers-reduced-motion. - Compatible with High-Performance Order Storage (HPOS) and WooCommerce Blocks.
Extend
Use the robercrea_wis_swap_image_id filter to pick a different image and robercrea_wis_enabled_for_product to disable the swap for specific products.
Disclaimer
This is an independent plugin. It is not affiliated with, endorsed by or sponsored by WooCommerce or Automattic. WooCommerce is a trademark of its respective owner and is mentioned only to state compatibility.
Installation
- Upload the plugin folder to
/wp-content/plugins/or install it from the Plugins screen. - Activate it (WooCommerce must be active).
- Go to WooCommerce Image Swap to adjust the settings.
- (Optional) Edit any product to choose a specific hover image under the General tab.
FAQ
-
Can I show a video on hover?
-
Yes. Choose a short MP4 or WebM in “Hover video” on the product edit screen: it plays, muted and in a loop, while the visitor hovers the product (or after the swipe on touch screens). It uses the same effect as the hover image, which is shown as its first frame, loads on the first hover only and is skipped for visitors who prefer reduced motion or save data.
-
Which image is shown on hover?
-
If you select a specific “Hover image” in the product edit screen (or in quick edit), that image is displayed. Otherwise the plugin uses the “Second image” setting: the first (default), last or a random gallery image, or the image of a variation for variable products. Products without a gallery or custom image remain unchanged.
-
Does it work with WooCommerce blocks?
-
Yes. It supports classic WooCommerce shop loops, the Product Collection and Products blocks, and the older grid blocks (Hand-picked Products, Products by Category, On Sale, Best Sellers, Top Rated, Newest, Products by Attribute and Products by Tag). Grids placed in block templates, widgets or page builders work too. The “All Products” block is rendered in the browser and is not supported.
-
My theme or page builder shows no hover image. What can I do?
-
The image is added on three paths: the classic loop hook
woocommerce_before_shop_loop_item_title, the Product Image block (Product Collection and Products) and the older grid blocks. Themes and builders that draw their own product cards without these (some Flatsome, Divi or Elementor widgets) need their WooCommerce “default” or “classic” loop option. If the image appears below the main one, the card is missing a positioned wrapper: addposition: relativeto the element around the product image in your theme CSS. Please tell us which theme or widget it is so we can add it. -
Why is there no hover image in the WooCommerce “Products” list widget?
-
The sidebar list widgets of WooCommerce (Products, Top Rated Products, Recent Products, …) are small lists of thumbnail, title and price, not product grids. They do not use the shop loop, so the plugin leaves them unchanged on purpose. In Elementor, use the Shortcode widget with
[products limit="4"]or your theme’s product grid instead. -
Does it make external requests?
-
No. The plugin does not connect to any external service and does not track users.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Robercrea Image Swap for WooCommerce” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Robercrea Image Swap for WooCommerce” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.
- Second image on hover in classic loops, Product Collection / Products blocks and the older grid blocks.
- Choose the automatic second image: first, last or random gallery image, or the image of a variation. Set a specific hover image per product.
- Effects: fade, slide (left, right, up), zoom and 3D flip.
- Hover video: a short, muted video from the media library plays on hover instead of the second image (loaded on the first hover only; the hover image is its poster).
- Optional swipe to show the second image on touch screens.
- The hover image uses the same
sizesattribute as the main image, so the browser picks the same file for both (filterrobercrea_wis_swap_sizes). - “Exclude categories” is a searchable multi-select and can be left empty.
- “Hover” column in the products list, quick edit of the hover image and a bulk action to go back to the automatic image.
- Export and import settings.