{"id":10125,"date":"2020-08-05T15:00:05","date_gmt":"2020-08-05T13:00:05","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=10125"},"modified":"2020-10-29T13:19:35","modified_gmt":"2020-10-29T12:19:35","slug":"wordpress-image-zoom","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-image-zoom\/","title":{"rendered":"How to Create a WordPress Image Zoom Effect"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]You\u2019ve probably seen websites with the magnifying glass or zoom on images around the web, for instance on Amazon product pages, and you may have wondered how to add that neat feature to your WordPress site. If that\u2019s the case, we\u2019ve got good news for you. It\u2019s fairly easy to create a WordPress image zoom effect if you do it with the help of a WordPress plugin. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Adding this type of feature to your website can be extremely convenient for your visitors as they will be able to inspect your products in full detail<\/strong>. This allows them to notice certain aspects that they otherwise wouldn\u2019t be able to see if you only used regular size images to showcase your products. It’s not just product images, though. You may, for instance, want your visitors to be able to give a closer look at your portfolio images, too. The ability to zoom in your images is, therefore, a good UX practice and, potentially, a sales booster, too.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Without further ado, here\u2019s how you can add a magnifying WordPress image zoom effect to your WordPress site with the WP Image Zoom plugin<\/a>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Installing and Configuring the WP Image Zoom Plugin<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]First and foremost, you need to install the plugin<\/a>. Once you\u2019re done with its installation and activation, head to the WP Image Zoom<\/strong><\/em> tab in your WordPress admin dashboard.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Opening this tab will allow you to easily set the plugin\u2019s image zoom settings.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the General Settings<\/em> tab<\/strong>, you can enable zoom on WooCommerce products, WooCommerce category pages, and variation products. You can also set the zoom effect on mobile devices, remove the lightbox for more effortless zooming of your images, and so on. In addition, you get to enable zoom inside a lightbox if you wish to keep it, and even check out a list of supported lightboxes.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Make sure to click the Save Changes<\/em> button once you set all the options according to your preferences.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, head to the Zoom Settings<\/em> tab<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Zoom <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Just like the General Settings<\/em> tab, the Zoom Settings<\/em> tab is quite intuitive and comes with 4 simple steps that will allow you to add a zoom effect to your images.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Step 1 lets you choose the lens shape. Some of the available options include circle lens shape, square, and zoom window.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Lens <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, you get to check your configuration changes by previewing the test image (the image comes together with the plugin) using the lens you picked. You can come back to this option and preview any further changes that you make in the other steps.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Image <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The third step allows you to set multiple options in its General<\/em> tab. You get to choose the cursor type, define the animation easing effect, choose whether you want to enable the zoom on mouse hover or mouse click, and set the zoom level.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Multiple <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, click on the Lens<\/em> tab<\/strong>. There, you will be able to set some additional options, including lens size, lens color, border thickness, border color, etc. However, you should note that you can use these settings only if you chose a circle or square lens in the first step.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Lens <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]On the other hand, the Zoom Window<\/em> tab can be used if you selected the Zoom Window lens shape. If you did, you will be able to set the zoom window width, zoom window height, the distance from the main image, and so on.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Zoom <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once again, you should hit the Save Changes button for the settings to take effect. [\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And that\u2019s it \u2013 your product images will now feature a magnifying zoom effect. [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”top-picks-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding a Zoom Effect to Your Images<\/h2>\n

[\/vc_column_text][vc_column_text]After you have set up the plugin features according to your preferences, it’s time to add the zoom effect to your images, which you need to do manually for each image.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First, access the page or post where your image is published (by going to Pages > All Pages\/Posts > All Posts<\/em>), or, for adding the effect to a new image on post or page, create a new one (Pages\/Posts > Add New<\/em>).[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you\u2019re using the Gutenberg editor, after adding your image to your page or post (by clicking the plus sign and then choosing the Image<\/em> block), click on the image in question and then select the image button located within the image block in the upper left corner.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Adding <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This will open a Block Styles<\/strong><\/em> drop-down. Simply select the style named With Zoom<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, hit the Publish\/Update<\/em> button and go to your page or post to see the way your image looks like live.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Image <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the Classic editor, the process is very similar. After you add your image to a page or post, click on it and select the magnifying icon that you will see in the right corner of the editing toolbar. This will enable a magnifying effect on your image.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Enable <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Note that the Classic editor allows you to add the zoom feature only to non-full size images, which is why you should select your picture and then click on the pencil icon (Edit<\/em>)<\/strong> in order to change its size.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Pencil <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]A new screen will appear, displaying the image details and allowing you to change certain image settings. You will also be able to change the image size here. After you select the size (any other size except for Full Size<\/em>), click the Update<\/em> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you publish or update your page\/post, go ahead and preview your changes once again.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Just one final note \u2013 this option only applies for the image you selected on that particular page or post, which means you need to enable the same option again for each image that you want to add the zoom effect to. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]A magnifying zoom effect on images can be a great addition to an eCommerce store or any other website that wants to sell products. No matter what type of products you\u2019re offering, your potential customers will surely be interested in examining them in as much detail as possible. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you use a WordPress plugin like WP Image Zoom to add this feature to your images, you will be able to do so quickly and with ease. Just be careful to use high-quality pictures to ensure that the zoom feature looks impeccable and does its job well. Finally, since high-quality pictures can impact your website speed, you should also optimize your images for the web<\/a> to reduce their size without jeopardizing their quality.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

A WordPress image zoom effect can help improve user experience and even boost your sales. Here’s how you can add this useful feature to your WordPress site.<\/p>\n","protected":false},"author":2,"featured_media":10146,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-10125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/10125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=10125"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/10125\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/10146"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=10125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=10125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=10125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}