WooCommerce is one of the best E-commerce solutions for an online store. After successful installation of basic WooCommerce, there are many extensions that can make your store more productive. In this way, you can increase your customer interaction and boost customer experience.
One of the most important features of your WooCommerce store is how you display your products to increase customer engagement and experience. You can do it in many ways. One of them is setting Zoom feature on your products, when a customer hovers on an image.
We’re assuming you have already installed the WooCommerce plugin on your WordPress site. If you haven’t, then you can follow these step by step instructions on how to set up your WooCommerce plugin on your WordPress website.
There are many plugins that can enable Zoom feature on your WooCommerce store. But, we’ll be using YITH WooCommerce Zoom Magnifier Plugin. It can be easily customized.
Features of YITH WooCommerce Zoom Magnifier
The free version of YITH WooCommerce Zoom Magnifier includes:
- On mouse hover, it will show bigger image size.
- Zoom area can be customized.
- You can also set the size of an image to show as a zoomed image.
- You can enable or disable zoom on mobile devices.
- Add a slider showing product image thumbnails.
- You can also customize the slider behavior.
Now let’s move to the installation process.
Installing YITH WooCommerce Zoom Magnifier Plugin
Go to WooCommerce Dashboard, navigate to Plugins → Add New. From the top right, search for “YITH WooCommerce Zoom Magnifier”. Once found, click on Install Now button and then Activate the plugin.
Configuring YITH WooCommerce Zoom Magnifier Plugin
Go to WooCommerce Dashboard, navigate to YITH Plugins → Zoom Magnifier.
From here, you can perform the following settings.
- General Settings
- Magnifier Settings
- Slider Settings
General Setting
Under General Settings, you will see three options.
- Activate YITH WooCommerce Zoom Magnifier to use the default product image.
- Activate on mobile device for zoom and slider functionalities.
- Forced image size to disable the customized sizes of the zoomed images.
Magnifier Settings
After General Settings, you will see Magnifier Settings to customize the zoom level.
- Zoom Box Width & Height: I would personally prefer to set them “auto” so that plugin can automatically adjust according to the screen.
- Image Size: It is the size of the image used within Magnifier box.
- Zoom Box Position: There are two options:
- Right: It will display the zoom box on right side of an original image.
- Inside: It will display the zoom box on an original image.
- Zoom Box Position for Mobile devices: You can set Zoom Box position on Mobile devices too.
- Loading Label: This is the text to be displayed when Magnifier is loading.
- Lens Capacity: It is the capacity of the lens. Set it to according to your own need.
- Blur: If you want the original image to be blurred when zoom box is displayed. Mark it.
Slider Settings
At the end, you will see Slider Settings.
- Activate Slider: Mark it, if you want the activate the Thumbnail Slider to your store.
- Activate Responsive Slider: Mark this if you want to fit thumbnails within the available space.
- Items: These are the number of items to be displayed in thumbnail.
- Circular Carousel: Enable it if you want your carousel to be circular.
- Infinite Carousel: It defines your carousel to be infinite or not.
After configuring the settings, Save Changes at the bottom of the page and you are done!
YITH WooCommerce Image Zoom Demo
Now it’s time to check out the demo of a product. I am going to hover the mouse on one of my product pages and the image is zooming.
Premium Version
The above features are in the free version. There are a lot of other features that can be unlocked if you’ve got its premium version.
Some of the premium features are mentioned below.
- Zoom Box Position: In the free version, you can display zoom box only “Inside” and “Right” side of the original image. While in the premium version, you’ve got the choice to place it on left, top and bottom as well.
- Enlarge the Image: Premium version allows you to display product in bigger size on a modal window.
- Exclude Products: In premium version, you have the flexibility to enable or disable Magnifier Zoom on individuals products.
Final Words
A high-resolution image integration is a real headache for many WooCommerce stores’ owners because it usually breaks the reading experience. But fortunately, there is a smart way to do it with YITH WooCommerce Zoom Magnifier. You can add a smaller image in the content of your article, and then dynamically zoom in on that image to meet readers’ expectations of detail.
If you found this article interesting, share it, it will interest other people or if you face any difficulty, feel free to ask me via the comments section below.
Mustaasam Saleem
Mustaasam is the WordPress Community Manager at Cloudways. Where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music.
