Animated Add to Cart

The Animated Add to Cart module helps your add-to-cart buttons stand out more by enhancing them with subtle animation effects.

Merchant allows you to customize both the trigger and style of the animation.

In the screenshot below, you can see what an add-to-cart button animated with the swing effect looks like on the catalog page of a WooCommerce store:

Swing animation, example

Let’s see how to set up Merchant’s Add to Cart module.

1. Open the Animated Add to Cart Module

Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

In the Convert More section, click the Animated Add to Cart module to open its settings page:

Animated Add to Cart module on the Merchant dashboard

2. Configure Your Animation

Use the options on the module page to configure your animation.

In the Settings section, select whether you want to trigger the animation on mouse hover or page load.

In the Animation section, you can choose from 10 animation styles, including flash, bounce, zoom in, shake, pulse, jello shake, wobble, vibrate, swing, and tada:

Location of the settings and Save button on the Animated Add to Cart module's page, annotated screenshot

Once the settings are configured, click the Save button in the top-right corner of the page.

3. Enable the Animated Add to Cart Module

If everything looks alright, click the Enable button to activate the module:

Animated Add to Cart, Enable button