Back to Docs

How to Set The Image Effects

WC Image Flip plugin has five different image effects to display WooCommerce products. You can choose one effect to enable effects on hover for your products.

You can only choose one effect at a time, which will be applied to all of your WooCommerce products.

First, go to WooCommerce > Image Flip > General and Enable the image flip. Lastly, select the effect you want to apply for your hover effects and then configure it gradually.

There are five different hover effects for your WooCommerce products.

  • Flip
  • Fade on Hover
  • Enlarge
  • Picture in Picture
  • Slide

If you have already chosen the effect for your WooCommerce products, you can now set your preferences for your chosen effects based on how you want to personalize them.

Flip Effect

If you choose the Flip effect, you’ll get to personalize the Transition Speed (ms) where you can set the transition speed. For example: 1 second = 1000 ms.

Fade on Hover Effect

If you choose the Fade on Hover effect, you’ll get to personalize the Transition Speed (ms) where you can set the transition speed. For example: 1 second = 1000 ms.

Enlarge Effect

If you choose the Enlarge effect, you’ll get to personalize the Enlarge Amount (%) where you can set the enlarged amount in (%).

You can also crop your images to adjust with the container for the effect and set the transition speed. For example: 1 second = 1000 ms

Picture in Picture Effect

If you choose the Picture in Picture effect, you’ll get to personalize the Picture in Picture width (%) where you can set the Picture in Picture width amount in (%).

You can also the Picture in Picture position as in Top Left, Top Right, Bottom Left, and Bottom Right. Besides, you can set the transition speed. For example: 1 second = 1000 ms.

  • Choosing Style in Picture in Picture Effect

There’s a dedicated style tab where you can set the border color of the Picture in Picture effect.

Slide Effect

If you choose the Slide effect, you’ll get to personalize the Image Count where you’ll be able to set how many images should be displayed.

You can set the Autoplay for the slider using two different options. One is Autoplay on Hover and another one is Forced Autoplay.

You can also enable the touch slide option for mobile devices or touch-enabled devices so that images can be swiped via sliding.

Besides, you also make the arrows, and bullets visible for your sliders and set the transition speed. For example: 1 second = 1000 ms.

  • Choosing Style in Slide Effect

There’s a dedicated style tab where you can set the border color of the Choosing Style in Slide effect.

That’s all.