How to fix animated GIFs not displaying correctly in WooCommerce

animated-gifs-not-displaying-correctly-woocommerce-1

Animated GIFs not displaying correctly in WooCommerce?

We’ve got the solution for you!

I came across the issue of animated GIFs not displaying correctly in WooCommerce recently while building out an ecommerce website for a client. The client was very adamant about having the animated GIFs show in the product catalog, individual product pages, and in the lightbox view when clicked in WooCommerce.

The Problem – Animated GIFs not displaying correctly in WooCommerce

GIF images are awesome for web development. They are small format and support animation unlike jpg and png. GIF images can be difficult to work with in WooCommerce however because the images are automatically re-sized when you upload them. The issue with re-sizing is you end up losing the frames for animation in the process and thus on product category pages and single products your GIF will not be animated.

The Solution – Animated GIFs not displaying correctly in WooCommerce

The solution to this problem is located under WooCommerce Settings > Products. First you will need to download and install the Regenerate Thumbnails Plugin. Once this is installed on your WordPress installation, you will need to go to the products tab under WooCommerce Settings. Under “Product Image Sizes” you will see something that looks like this:

animated-gifs-not-displaying-correctly-woocommerce-pre-fix-settings

The Ultimate Managed Hosting Platform
The Ultimate Managed Hosting Platform

What you need to do is reset the sizes on each of the scaling options to something LARGER than the biggest GIF you plan on uploading. My client’s largest GIF had a height of 800px and width of 950px, so I reset each of the sizes to 1000px high and tall. You will also need to remove the “Hard Crop” option. When you are done, it should look something like this:

animated-gifs-not-displaying-correctly-woocommerce-post-fix-settings

Make sure you click the “Save Changes” button on the bottom of the page before moving on to the next step!

The Solution – Regenerating your thumbnails

After you install the Regenerate Thumbnails Plugin, you will have a new option under Tools > Regen. Thumbnails. All you have to do is click the Regenerate All Thumbnails button and wait for the script to finish! If you would like to test it out on a few images first, you can do so from the Media Library page by hovering over an image and selecting “Regenerate Thumbnails”

Need help fixing Animated GIFs not displaying correctly in WooCommerce on your website? Give us a call or drop us a line and we’d be more than happy to assist you!