How to add a moving Gif to the featured image in WordPress and WooCommerce

Hi guys,

WordPress has the ability to render images in Gifs, but if you try to add a featured image to a product it will most likely not move in the listings and on the product page.

Why?

Because WordPress by default crops the image and when cropping it removes the movement.

What we have to do is deactivate the cropping in the place where we want the gif to move.

Do you want to learn WordPress?In the premium area you have everything you need to learn from 0 WordPress

Video Tutorial

Add Moving Gif Image to WooCommerce Products

Imagine that I want to make the product images move on the shop page or any listing.

What I have to do is go to Customize » WooCommerce » Product Images and leave the image field blank. thumbnail width

In the screenshot above we have two fields:

Main Image Width Which represents the image within the product page. So if we want to add a Gif that moves we will have to leave that field empty.

Thumbnail Width Which represents the thumbnail of the image on the listing pages. Listings are shop pages, category pages, etc.

If we want the Gif to move on these pages we have to leave this field empty.

It is possible that your template does not have this field, if this is the case it is because your template is not optimized for WooCommerce and you would have to do it by code.

Here they explain how you can do although if you do not have programming knowledge I do not recommend this method.

Add Moving Gif Image to WooCommerce Images

In the same way that we have done previously we have to do it but with the global images of WordPress.

To modify the WordPress thumbnails or thumnails we have to go to Settings » Media:

We would leave blank the size of the image that we want to have movement in Git.

And ready, you would have it 😉

Do you want to learn WordPress?In the premium area you have everything you need to learn from 0 WordPress

I hope this article is useful to you.

All the best