{"id":496,"date":"2020-06-18T10:21:49","date_gmt":"2020-06-18T10:21:49","guid":{"rendered":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/?page_id=496"},"modified":"2020-06-18T10:21:49","modified_gmt":"2020-06-18T10:21:49","slug":"image-tooltip","status":"publish","type":"page","link":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/image-tooltip\/","title":{"rendered":"Image Tooltip"},"content":{"rendered":"<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-tooltip-last.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6264\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-tooltip-last.gif\" alt=\"\" width=\"1920\" height=\"942\" \/><\/a>\r\n<p style=\"text-align: center;\"><strong>Frontend Preview<\/strong><\/p>\r\n<div class=\"wp-block-buttons aligncenter\">\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product\/dust-proof-masks-prop\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Demo<\/a><\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-vivid-red-background-color\" href=\"https:\/\/bit.ly\/unlock-all-features-color-swatches-catalog\" target=\"_blank\" rel=\"noreferrer noopener\">Unlock Premium Features<\/a><\/div>\r\n<\/div>\r\n\r\n<br \/>\r\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/1yO9DGYCYAA?rel=0\" width=\"1080\" height=\"420\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\r\n<p style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/p>\r\n\r\n\r\n\r\n<h4>Step 01: Plugin Setup<\/h4>\r\nIt&#8217;s the premium feature WooCommerce Variation Swatches plugin. Make sure you have WooCommerce Variation Swatches Pro plugin besides the free version.\r\n\r\n<h4>Step 02: Image Tooltip Setup<\/h4>\r\nNavigate to the <strong>Products &gt;&gt; Attributes\u00a0<\/strong>and get into your desired variation edit mode select <strong>Configure Terms\u00a0<\/strong>link from your desired attribute.\u00a0 When you are inside your selected variation edit mode, insert image as tooltip from Tooltip Image setting selecting <strong>Upload \/ Add Image<\/strong> button.\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-shop.png\">\r\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2813\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-shop-1024x746.png\" alt=\"\" width=\"740\" height=\"539\" \/><\/a>\r\n\r\nNow, the product connected with this variation will show this image as tooltip throughout the store.\r\n<h4>Individual Product Settings<\/h4>\r\nIf you want to insert image tooltip image based product basis variation, WooCommerce Variation Swatches plugin has the option to that. To insert product basis variation swatches tooltip, head to product edit mode and get in <strong>Swatches Settings<\/strong> Tab from <strong>Product Data<\/strong>\u00a0Setting.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-tooltip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5788\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-tooltip.png\" alt=\"\" width=\"1000\" height=\"682\" \/><\/a>\r\n\r\nAs you can see in <strong>Cognac <\/strong>variation, I&#8217;ve added new\u00a0<strong>Tooltip Image\u00a0Setting<\/strong>\u00a0setting for this product variation. It&#8217;ll not show the globally added tooltip image from <strong>Products &gt;&gt; Attributes.\u00a0<\/strong>After this, the frontend would look like the following image.\r\n\r\n<a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-tooltip-frontend.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5789\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/08\/image-tooltip-frontend.png\" alt=\"\" width=\"1002\" height=\"475\" \/><\/a>","protected":false},"excerpt":{"rendered":"<p>Frontend Preview Video Tutorial Step 01: Plugin Setup It&#8217;s the premium feature WooCommerce Variation Swatches plugin. Make sure you have WooCommerce Variation Swatches Pro plugin besides the free version. Step 02: Image Tooltip Setup Navigate to the Products &gt;&gt; Attributes\u00a0and get into your desired variation edit mode select Configure Terms\u00a0link from your desired attribute.\u00a0 When &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/image-tooltip\/\"> <span class=\"screen-reader-text\">Image Tooltip<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages\/496"}],"collection":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/comments?post=496"}],"version-history":[{"count":1,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages\/496\/revisions"}],"predecessor-version":[{"id":497,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages\/496\/revisions\/497"}],"wp:attachment":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/media?parent=496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}