Lupa Zoom: WooCommerce-style zoom on any image
Add the lupa class to an image and, on hover, the area under the cursor zooms in. It is the same effect as the WooCommerce product zoom, on any image and without depending on the theme. "Lupa" is Spanish for magnifying glass.
- Price
- Free, GPLv2 or later
- Requirements
- WordPress 5.6 or later and PHP 7.2 or later
- Size
- Plain JavaScript with no jQuery, about 7 KB gzipped
- Data
- No external requests and no visitor data
Try it here
Move the mouse over the image. It is a double-resolution screenshot of this site: the plugin shows the small version and zooms in with the large one.
Why it exists
The WooCommerce product zoom is exactly what a catalogue, portfolio or gallery needs, but it only exists on the product page and every theme handles it differently.
How to use it
- Install and activate the plugin on your WordPress site.
- Add the lupa class to the image or to the block that wraps it. In Elementor, under Advanced → CSS Classes; in WPBakery, under Extra class name.
- Optionally, adjust the mode and zoom level in Settings → Lupa Zoom.
- For a single image there is also the [lupa_zoom id="123"] shortcode.
In review for the WordPress.org plugin directory. In the meantime, download it from GitHub.
What it does
- On the image or its wrapper. The class works on the image itself or on the widget that wraps it, and on elements whose image is a CSS background.
- Respects crops. With object-fit: cover or the fixed-ratio boxes page builders create, it zooms into exactly the crop you see.
- Automatic zoom. It works out the level from the real resolution of the original file, or you set it per image.
- Two modes. Zoom inside the image, like WooCommerce, or a lens with a side panel.
- Dynamic content. It works with lazy loading, sliders, content loaded by AJAX and Elementor.
- Optional touch support. On phones and tablets, press and drag.
For developers
- Per-image attributes: data-lupa-src, data-lupa-zoom, data-lupa-mode and data-lupa-lens.
- JavaScript API: LupaZoom.refresh(), LupaZoom.destroyAll() and the lupa:refresh event.
- PHP filters: lupa_zoom_should_enqueue to load it only where needed, and lupa_zoom_config.
We built it for sites we maintain and publish it for free for anyone who needs it. See custom WordPress plugins
Frequently asked questions
Does it need WooCommerce?
No. It works on any image. If you use WooCommerce, you can also apply it to the product gallery and turn off its zoom so you do not get two.
Which image does it zoom into?
The one in data-lupa-src if you set it. Otherwise the largest one in the srcset, and if there is none, the src. For a sharp zoom, the original image has to be larger than the one displayed.
Does it slow the site down?
It loads one small JavaScript file and one CSS file, with no jQuery. If you only use it on some pages, the lupa_zoom_should_enqueue filter keeps it off the rest.
Does it work on mobile?
It is off on touch screens by default so it does not get in the way of scrolling. You can turn it on in the settings: press and drag to zoom.
Need a plugin made for your site?
We build custom WordPress and WooCommerce plugins: your business logic, editors for your team and integrations. Your code, fixed quote.
Your first consultation is free. We look at what you tell us and reply within 48 business hours.