Back to contents

How to apply an animation effect for the product thumbnails

From here, you’ll learn how to apply different animation effects to the product thumbnails with JetWooBuilder plugin, which belongs to Jet plugins family.

JetWooBuilder is a plugin with the help of which you can easily build 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.

Adding images to WooCommerce Product Gallery

Step 1 — Navigate to Products block in WordPress dashboard, select the product you want to add an animatyion effect to, and click Edit.

Step 2 — Scroll down and find the Product Gallery block on the right side. Click Add product gallery images

Step 3 — Select the images from your Media Library or upload them to select.

Now you can proceed to the next step.

Adding an animation effect for the product thumbnail

Step 1 — Return to the WordPress Dashboard and select the Elementor > JetWooBuilder Settings tab.

Step 2 — After that, switch to the Product Thumb Effect section, where you need to toggle the Enable Thumbnails Effect option in order to enable animation for the product thumbnails on hover.

jertwoobuilder settings in elementor

Step 3 — Afterwards, select one of the different animation effects from the Thumbnails Effect dropdown. There are Slide Right, Left, Top, Bottom, Fade and Fade With Zoom effects.

Step 4 — The next step is to click the Save button to conserve the progress.

Step 5 – Then, go to the shop page, where the products are displayed and hover the product thumbnails to view the chosen animation effect.

thumbnails animation effect

That’s pretty much it. Go back to your website and decide which animation you like the most!