Want to add Amazon-like magnification zoom for images in WordPress?
Adding a zoom feature will allow users to see details that they would not see in a normal size image.
In this article, we will show you how to easily add zoom in for images in WordPress.
Why add a magnifying zoom for images?
Adding a magnifying zoom feature to your WordPress website will allow visitors to clearly see the intricate details of images.
If you have a photography website, adding a magnification feature will allow users to zoom in on your photos to see the finer details.
Similarly, if you have an online store, your customers will be able to enlarge product images.
Many large eCommerce websites already use magnification for product images. It allows customers to browse the product and creates a better shopping experience in your store.
With that being said, let’s see how you can easily add a magnification zoom for images in WordPress.
How to Add a Zoom In to Images in WordPress
First, you need to install and activate the WP Image Zoom plugin. For more details, check out our step by step guide on how to install a WordPress plugin.
After activation, you need to go to the WP Image Zoom » Zoom Settings WordPress admin sidebar page.
Next, you need to configure the zoom effect settings by switching to the ‘Zoom Settings’ tab and choose the lens shape you want to use.
You can choose between circle, square, and zoom window lens shapes. You can even choose the ‘No Lens’ option (⨯) if you don’t want to use a shape for the magnifying effect.
After choosing your preferred lens, you need to scroll down to the next step where you can preview an image with your selected lens to see how it works. The plugin has a preview image that you can use to test your changes.
Next, you need to switch to the ‘General’ tab.
From here, you can select a cursor type, set an animation effect, enable mouse-over or mouse-click zoom, and set a zoom level.
If you want even more options, some of the features are only available for the pro version of the WP Image Zoom plugin.
After making your choices accordingly, simply go to the ‘Lens’ tab from the top.
You can now configure settings such as lens size, lens color, lens edge options, and more if you selected the ’round’ or ‘square’ lens in Step 1.
If you selected Zoom Window Lens, you need to switch to the ‘Zoom Window’ settings tab.
From here, you can change the width and height of the zoom window, positioning, distance from the main image, border colors, and more.
You then simply click ‘Save Changes’ to store your settings.
After that, all you have to do is configure some general settings.
Configuring general plugin settings
Next, you need to switch to the General Settings tab in the plugin settings.
From here, you can now enable features like zoom on WooCommerce product images, thumbnails, mobile, attachment pages, product category pages, and more.
All you need to do is simply check the boxes next to these options.
You can also remove the lightbox effect, so users can zoom in on images without issue.
However, you would need the Pro version of the plugin for this feature.
If you are not going to remove the lightbox for images, you need to scroll down to the ‘Enable inside a lightbox’ option and check the box next to it.
Note: You can view supported lightboxes to make sure zooming works well within a lightbox on your site.
Once you have finished adjusting the settings, don’t forget to click the ‘Save Changes’ button to store your settings.
Magnifying zoom will now be enabled for WooCommerce products.
You can visit your online store to see our zoom feature.
However, if you want to enable zoom for images on WordPress posts and pages, then you need to follow the step below.
Step 3. Enable Magnification Zoom for Images in the Blocks Editor
By default, zoom in is not enabled for images in your posts and pages. You must do this manually after adding an image to your content.
First, you need to open a post you want to edit in the block editor.
Next, you need to upload an image to that post from the media library or your computer.
Once you do that, simply click on the image to open your Block Settings panel in the right corner of the screen.
From here, simply go to the ‘Styles’ tab and click the ‘Zoomable’ button to apply the magnification zoom to your image.
After that, just click the ‘Update’ or ‘Publish’ button at the top to store your settings.
The zoom function will look like this on your site:
Note: You will need to repeat this step each time you want to add the zoom effect to an individual image.
We recommend using high-quality images so that the zoom feature looks great. High-quality images typically have a larger file size and take longer to load, which will affect the speed and performance of your website.
To resolve this issue, you must optimize your images for the web before uploading them to WordPress.
We hope this article helped you learn how to add zoom in for images in WordPress. You can also check out our guide on how to optimize images for search engines and our top picks for the best image compression plugins.
If you liked this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us at Twitter and Facebook.
