Back to contents

JetWooBuilder: How to Apply an Animation Effect to Product Thumbnails

 

From this tutorial you’ll learn how to apply different animation effects to the product thumbnails with JetWooBuilder plugin.

JetWooBuilder 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.

1 Step — Add images to WooCommerce Product Gallery

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

woocommerce product gallery

Select images from your Media Library or upload them to select. Afterward, click the “Add to gallery” button.

woocommerce product gallery

Now you can proceed to the next step.

2 Step — Add an animation effect for the product thumbnail

Return to the WordPress Dashboard and go to JetPlugins > JetWooBuilder Settings tab. Switch to the Product Thumb Effect section and to turn on the Enable Thumbnails Effect toggle in order to enable animation for the product thumbnails on hover.

JetWooBuilder thumbnails settings

Afterward, 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.

Click the “Save” button to conserve the progress.

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!