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.
In our example, we’ll be using its free features, which includes:
- On mouseover, it will show bigger image size.
- Zoom area can be customized. You can also set size of the image to show as 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.
So, here we go !
Step 1: Installing YITH WooCommerce Zoom Magnifier Plugin:
From your “WordPress Admin Panel”, Navigate to “Plugins > Add New”. From top right, Search for “YITH WooCommerce Zoom Magnifier”. Once found, click on “Install Now.” After Installing, click on “Activate Plugin.” Like the image below.
Step 2: Configuring Zoom Magnifier Plugin
From your “WordPress Admin Panel”, Navigate to “YITH Plugins > Zoom Magnifier”.
Under “General Settings”. You’ll see three options.
- If you mark this, it will use Zoom Magnifier for your store.
- If you want your mobile customers to also have this feature, mark it.
- If it is disabled, you will able to customize the sizes of the zoomed images.
Step 3: Configuring Magnifier Settings:
Below General Settings, you’ll 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 original image.
Inside: It will display the zoom box on 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.
Step 4: Configuring Slider Settings:
Below Magnifier Settings, you’ll see “Slider Settings”.
- Activate Slider: Mark it, if you want the Thumbnail slider in 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.
Click on “Save Changes” at the bottom of the page.
And you’re done !
The above features are in the free version. There are a lots 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 free version, you can display zoom box only “Inside” and “Right” side of the original image. While in 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.
By integrating YITH WooCommerce Zoom Magnifier plugin, your customers can have more flexible user experience and better display of your products. Are you facing any difficulty ? Feel free to ask any query by using comments section below.
Additionally, keep an eye on this blog as I will be adding more resources for WooCommerce in the coming weeks. Likewise, you can start working with your WooCommerce install and let me know what more features you want unlocked in it.
Finally, image heavy web shops need a reliable and speedy hosting provider. Launch your free trial on the E-commerce optimized Cloudways Managed WooCommerce hosting today to experience ultimate bliss as a shop owner.
Start Creating Web Apps on Managed Cloud Servers Now!
Easy Web App Deployment for Agencies, Developers and E-Commerce Industry