{"id":6743,"date":"2024-05-14T06:28:12","date_gmt":"2024-05-14T06:28:12","guid":{"rendered":"https:\/\/addify.store\/documentation\/?page_id=6743"},"modified":"2024-05-14T06:28:12","modified_gmt":"2024-05-14T06:28:12","slug":"how-to-show-zoom-icon-on-product-image-with-customizable-colors","status":"publish","type":"page","link":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/","title":{"rendered":"How to Show Zoom Icon on Product Image with Customizable Colors?"},"content":{"rendered":"\n

Showing Zoom Icon on Product Image <\/h2>\n\n\n\n

Start by getting the WooCommerce Product Gallery & Image Zoom plugin installed and activated. You can find it in your WordPress dashboard.<\/p>\n\n\n\n

Once the plugin is activated, navigate to WooCommerce <\/strong>> Product Gallery & Image Zoom<\/strong> > Main Image Option<\/strong> > Zoom Options<\/strong>. Here’s where the magic happens.<\/p>\n\n\n\n

Adjust for Mobile:<\/strong> If you want to keep things tidy on mobile devices, you can choose to hide the zoom icon for a smoother experience.<\/p>\n\n\n\n

Positioning and Size: <\/strong>You can play around with where the zoom window appears in relation to the product image. Options include having it on the right side or nestled inside the image.<\/p>\n\n\n\n

Color Choices: <\/strong>Now, this is where you can get creative. You have control over the colors of the zoom icon and its background. Pick colors that match your branding or simply catch the eye.<\/p>\n\n\n\n

Icon Placement:<\/strong> Decide where you want the zoom icon to sit relative to the product image. It could be at the top left, top right, bottom left, or bottom right.<\/p>\n\n\n\n

Fine-tune Details:<\/strong> You can adjust the size of the zoom icon, its border radius to change its shape, and even the loading label that appears when the zoom feature is kicking in.<\/p>\n\n\n\n

Blur Effect:<\/strong> For added focus, you can choose to blur the main product image when customers zoom in, making the details pop even more.<\/p>\n\n\n\n

Save Your Style:<\/strong> Once you’ve tweaked everything to your heart’s content, make sure to hit that “Save Settings” button. Your customized zoom settings will now be live on your product images.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

With these adjustments, your product images will not only zoom in for a closer look but will also sport a unique style that reflects your brand’s personality.<\/p>\n","protected":false},"excerpt":{"rendered":"

Showing Zoom Icon on Product Image  Start by getting the WooCommerce Product Gallery & Image Zoom plugin installed and activated. You can find it in your WordPress dashboard. Once the plugin is activated, navigate to WooCommerce > Product Gallery & Image Zoom > Main Image Option > Zoom Options. Here’s where the magic happens. Adjust […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":6738,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"template-parts\/documentation-template.php","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-6743","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nHow to Show Zoom Icon on Product Image with Customizable Colors? - Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Show Zoom Icon on Product Image with Customizable Colors? - Documentation\" \/>\n<meta property=\"og:description\" content=\"Showing Zoom Icon on Product Image  Start by getting the WooCommerce Product Gallery & Image Zoom plugin installed and activated. You can find it in your WordPress dashboard. Once the plugin is activated, navigate to WooCommerce > Product Gallery & Image Zoom > Main Image Option > Zoom Options. Here’s where the magic happens. Adjust […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/\" \/>\n<meta property=\"og:site_name\" content=\"Documentation\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh7-us.googleusercontent.com\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/\",\"name\":\"How to Show Zoom Icon on Product Image with Customizable Colors? - Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA\",\"datePublished\":\"2024-05-14T06:28:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/#primaryimage\",\"url\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA\",\"contentUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooCommerce Product Gallery & Image Zoom\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How To\u2019s WPGIZ\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-product-gallery-image-zoom\\\/how-tos\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How to Show Zoom Icon on Product Image with Customizable Colors?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\",\"name\":\"Documentation\",\"description\":\"Documentation for Addify Extensions\",\"publisher\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/addify.store\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#organization\",\"name\":\"Documentation\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Asset-21-2x.png\",\"contentUrl\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Asset-21-2x.png\",\"width\":6761,\"height\":1853,\"caption\":\"Documentation\"},\"image\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Show Zoom Icon on Product Image with Customizable Colors? - Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/","og_locale":"en_US","og_type":"article","og_title":"How to Show Zoom Icon on Product Image with Customizable Colors? - Documentation","og_description":"Showing Zoom Icon on Product Image  Start by getting the WooCommerce Product Gallery & Image Zoom plugin installed and activated. You can find it in your WordPress dashboard. Once the plugin is activated, navigate to WooCommerce > Product Gallery & Image Zoom > Main Image Option > Zoom Options. Here’s where the magic happens. Adjust […]","og_url":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/","og_site_name":"Documentation","og_image":[{"url":"https:\/\/lh7-us.googleusercontent.com\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/","url":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/","name":"How to Show Zoom Icon on Product Image with Customizable Colors? - Documentation","isPartOf":{"@id":"https:\/\/addify.store\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/#primaryimage"},"image":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-us.googleusercontent.com\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA","datePublished":"2024-05-14T06:28:12+00:00","breadcrumb":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/#primaryimage","url":"https:\/\/lh7-us.googleusercontent.com\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA","contentUrl":"https:\/\/lh7-us.googleusercontent.com\/DJLxFL443ADbEaiMVCr7BVzOgr44OUB9mp6U56LbTJM0gqpRbsUWF5rNjHgWul64WOPGBKfaqz6oq9ov27CAuSG-47C-UjTFoN7HAzzbawryAVoYtoAil4Yt6cCSiUpM__0a-Z8v1fM0bQ8B_qbPkhA"},{"@type":"BreadcrumbList","@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/how-to-show-zoom-icon-on-product-image-with-customizable-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/addify.store\/documentation\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/addify.store\/documentation\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"WooCommerce Product Gallery & Image Zoom","item":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/"},{"@type":"ListItem","position":4,"name":"How To\u2019s WPGIZ","item":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-product-gallery-image-zoom\/how-tos\/"},{"@type":"ListItem","position":5,"name":"How to Show Zoom Icon on Product Image with Customizable Colors?"}]},{"@type":"WebSite","@id":"https:\/\/addify.store\/documentation\/#website","url":"https:\/\/addify.store\/documentation\/","name":"Documentation","description":"Documentation for Addify Extensions","publisher":{"@id":"https:\/\/addify.store\/documentation\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/addify.store\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/addify.store\/documentation\/#organization","name":"Documentation","url":"https:\/\/addify.store\/documentation\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/addify.store\/documentation\/#\/schema\/logo\/image\/","url":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/11\/Asset-21-2x.png","contentUrl":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/11\/Asset-21-2x.png","width":6761,"height":1853,"caption":"Documentation"},"image":{"@id":"https:\/\/addify.store\/documentation\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/6743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/comments?post=6743"}],"version-history":[{"count":1,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/6743\/revisions"}],"predecessor-version":[{"id":6744,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/6743\/revisions\/6744"}],"up":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/6738"}],"wp:attachment":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/media?parent=6743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}