{"id":5097,"date":"2019-01-31T08:55:10","date_gmt":"2019-01-31T08:55:10","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=5097"},"modified":"2025-01-13T10:45:17","modified_gmt":"2025-01-13T10:45:17","slug":"how-to-apply-an-animation-effect-to-product-thumbnails","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/","title":{"rendered":"How to Apply an Animation Effect to Product Thumbnails"},"content":{"rendered":"\n

JetWooBuilder<\/a><\/em> is a plugin with the help of which you can easily build a custom product page via drag and drop way in Elementor to represent your products. So, if the page contains product thumbnail images, you can easily apply an animation effect to them.<\/p>\n\n\n\n

Add Images to WooCommerce Product Gallery<\/h2>\n\n\n\n
\n

Navigate to Products <\/strong>block in the WordPress dashboard, select the product you want to add an animation effect to, and click “Edit<\/strong>“. Scroll down and find the Product Gallery<\/strong> block on the right side. Click “Add product gallery images<\/strong>” option.<\/p>\n\n\n\n\"woocommerce\n\n\n\n

Select images from your Media Library or upload them to select. Afterward, click the “Add to gallery<\/strong>” button.<\/p>\n\n\n\n\"woocommerce\n\n\n\n

Now you can proceed to the next step.<\/p>\n<\/div><\/div>\n\n\n\n

Add an Animation Effect for the Product Thumbnail<\/h2>\n\n\n\n
\n

Return to the WordPress Dashboard<\/strong> and go to JetPlugins > JetWooBuilder Settings<\/strong> <\/em>tab. Switch to the Product Thumb Effect<\/strong> section and to turn on the Enable Thumbnails Effect<\/strong> toggle in order to enable animation for the product thumbnails on hover.<\/p>\n\n\n\n\"JetWooBuilder\n\n\n\n

Afterward, select one of the different animation effects from the Thumbnails Effect<\/strong> dropdown. There are Slide Right, Left, Top, Bottom, Fade<\/strong> and Fade With Zoom<\/strong> effects.<\/p>\n\n\n\n

Click the “Save<\/strong>” button to conserve the progress.<\/p>\n\n\n\n

Then, go to the shop page, where the products are displayed and hover the product thumbnails to view the chosen animation effect.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s pretty much it. Go back to your website and decide which animation you like the most!<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you\u2019ll learn how to apply different animation effects to product thumbnails with the JetWooBuilder plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[521],"yoast_head":"\nHow to Apply an Animation Effect to Product Thumbnails | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn about how to set up and apply awesome animation effects to WooCommerce Products thumbnails with JetWooBuilder functionality.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Apply an Animation Effect to Product Thumbnails | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn about how to set up and apply awesome animation effects to WooCommerce Products thumbnails with JetWooBuilder functionality.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-13T10:45:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Product-gallery.png\" \/>\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:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/\",\"name\":\"How to Apply an Animation Effect to Product Thumbnails | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T08:55:10+00:00\",\"dateModified\":\"2025-01-13T10:45:17+00:00\",\"description\":\"Learn about how to set up and apply awesome animation effects to WooCommerce Products thumbnails with JetWooBuilder functionality.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Apply an Animation Effect to Product Thumbnails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Apply an Animation Effect to Product Thumbnails | Crocoblock","description":"Learn about how to set up and apply awesome animation effects to WooCommerce Products thumbnails with JetWooBuilder functionality.","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:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/","og_locale":"en_US","og_type":"article","og_title":"How to Apply an Animation Effect to Product Thumbnails | Crocoblock","og_description":"Learn about how to set up and apply awesome animation effects to WooCommerce Products thumbnails with JetWooBuilder functionality.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/","og_site_name":"Help Center","article_modified_time":"2025-01-13T10:45:17+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Product-gallery.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/","name":"How to Apply an Animation Effect to Product Thumbnails | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T08:55:10+00:00","dateModified":"2025-01-13T10:45:17+00:00","description":"Learn about how to set up and apply awesome animation effects to WooCommerce Products thumbnails with JetWooBuilder functionality.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-apply-an-animation-effect-to-product-thumbnails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Apply an Animation Effect to Product Thumbnails"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/5097"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=5097"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=5097"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=5097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}