Pkart Product Secondary Image Hover

Pkart Product Secondary Image Hover displays the first image from a WooCommerce product’s gallery when visitors hover over the product image.

The plugin is designed for WooCommerce product listing pages, including WooCommerce Product Collection blocks and classic WooCommerce product loops.

It provides a simple CSS-based hover effect without requiring JavaScript or a configuration page.

The plugin does not modify the product image gallery on single-product pages.

Features

• Display the first product gallery image on hover.
• Supports WooCommerce Product Collection blocks.
• Supports classic WooCommerce product loops.
• Uses the WooCommerce thumbnail image size.
• CSS-only hover effect.
• No JavaScript required.
• No shortcode required.
• No settings page required.
• Automatically skips products without gallery images.
• Does not modify single-product pages.
• Lightweight frontend implementation.
• Uses the product-secondary-image CSS class for customization.

How It Works

When a product has at least one gallery image, Pkart Product Secondary Image Hover adds the first gallery image as a secondary image in the product listing.

When a visitor moves the mouse over the product image, the secondary gallery image becomes visible using a CSS transition.

The plugin works automatically after activation.

No additional configuration is required.

Customization

The secondary image uses the following CSS class:

‘product-secondary-image’

You can use this class to customize the hover image transition and appearance.

Privacy

Pkart Product Secondary Image Hover does not collect, store, or transmit personal data.

The plugin does not connect to any external service.

Requirements

WordPress 6.7 or later
WooCommerce
PHP 8.1 or later