Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Magnifying Zoom for Images in WordPress

Do you want to add an Amazon like magnifying zoom for images in WordPress? Zooming images allow users to see details that they would not see in a normal sized image. In this article, we will show you how to easily add magnifying zoom for images in WordPress.

How to Add Magnifying Zoom for Images in WordPress

Adding Magnifying Zoom for WordPress Images

First thing you need to do is install and activate the WP Image Zoom plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit WP Image Zoom page in your WordPress admin. From here, you can manage the zoom settings for your images.

WP Image Zoom

In the General Settings tab, you can enable features like zoom on WooCommerce product images, thumbnails, mobile devices, attachment pages, category pages, and more. It also allows you to remove the lightbox, so your users can smoothly zoom images.

General Settings

If you are not removing lightbox for images, then you can scroll down for further settings like enabling zoom inside a lightbox.

Note: You can see supported lightboxes to make sure that the zoom works fine inside a lightbox.

Enable Lightbox Zoom

Once you are done adjusting the settings on this page, don’t forget to click on the Save Changes button.

Next, you need to visit the Zoom Settings tab. It has 4 easy steps to add magnifying zoom for your images.

First, you need to select the shape of the lens to zoom images. You can choose from circle, square, and zoom window lens shape.

Select Zoom Lens Shape

After choosing your lens, go to the next step and preview an image with the selected lens to see how it works. The plugin has a preview image that you can use to test your changes.

Preview Zoom Image

You can come back and live preview this image after making any changes to the configuration below.

In the next step, you can select cursor type, set animation easing effect, enable the zoom on mouse hover or mouse click, and define a zoom level. Some of these features are only available for the pro version of the plugin.

General Configuration

Now you can go to the Lens configuration tab for settings like lens size, lens color, lens border options, and more. These settings are effective only if you selected the circle or square lens in Step 1.

Lens Configuration

Next, you can visit the Zoom Window configuration tab. This tab is enabled only if you selected the Zoom Window Lens in Step 1.

From here, you can change the width and height of zoom window, positioning, distance from the main image, borders, and more.

Zoom Window Configuration

Lastly, you can add custom text to the image and choose text size, color, and alignment.

Custom Text Configuration

Don’t forget to click on the Save Changes button to store your settings. You can always look at the preview image to see how the magnifier will work on your blog images with these settings.

Save Changes

The above settings will enable magnifying zoom on your WooCommerce product images. To enable zoom for your images on WordPress posts and pages, you need to follow the steps below.

Enabling Magnifying Zoom for Images on Posts and Pages

By default, the magnifying zoom is not enabled for images on your posts and pages. You need to do it manually after adding an image to your content.

Once you add the image to your post or page, simply click to select it and then click on the magnifying icon in the toolbar. This icon will apply the zoom settings on your image.

Add Zoom to Posts / Pages Images

After that, head over to the post to see magnifying zoom feature enabled for the selected image. You need to repeat this step each time you want to add the zoom effect to an image.

Apply Zoom Post / Page Images

We recommend using high-quality images for the zoom feature to look great. High-quality images are normally larger in file size and take longer to load which will affect your website speed and performance. To solve this issue, you need to optimize your images for the web before uploading them to WordPress.

We hope this article helped you learn how to add magnifying zoom for images in WordPress. You may also want to see our article on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

13 CommentsLeave a Reply

  1. Thanks for this article. Can you help me understand how I can use this for a page/blog when I use the divi builder? Where can I then add something so this function works?

    • You would want to reach out to the plugin’s support for the current method to use the plugin with a page builder.

      Admin

  2. Any chance that there is a zoom plugin that will work with LayerSlider images? I want the background of my LayerSlider slide to zoom in with a magnifying glass so that people can see the image larger on screen.

    • We would first recommend reaching out to LayerSlider’s support to see if they have a recommended plugin for adding zoom

      Admin

  3. can you please tell me about image size. if image size of website is low then can we use this plugin.

  4. please show the steps by using the new WordPress editor. I think in the new editor there is no option to add a zoom magnify feature for the image. I searched and tried a lot but could not find that option.

    • We will certainly look to update our articles as we are able, for this, the option to add the CSS class that the plugin needs for an image would be in the block’s settings.

      Admin

  5. Please could you tell me how to add image zoom to product images in woocommerce? the article instruct how to add zoom to post and pages only.

    • The plugin should still work for WooCommerce, if it is not applying to WooCommerce then you would need to reach out to the plugin’s support for them to take a look.

      Admin

  6. I keep getting this message when I press on the magnifying glass after I have selected the image for zoom.

    First you have to select the image to which you want to add the zoom feature

  7. I’d love to get this to work on my site, but I have a Pinterest plug-in that I can’t deactivate. I suspect that plug-in interferes with this plug-in. Any suggestions on removing to odious Pinterest plug-in are welcome.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.