WooCommerce Add to Cart animation

Question

Is there a way I can add an animation to Add to cart button on Woocommerce such that the image of the product fly to the basket.

PN: I am using my own theme in WooCommerce Shopping Cart.

Answer 1

Is your theme using AJAX to add the product to the cart? A solution would be to add a click listener to the 'Add to cart' button with jQuery. Then in your click listener you can animate the product image.

Another solution is explained in this post. There the default jQuery addClass() function is being overridden and an event gets triggered when the addClass function is being called. The next thing you can do is to listen to this event with the jQuery bind() function, check if the target is an 'Add to cart' button, and do your animation.

A third solution would be to dequeue the WooCommerce 'add to cart' file and create your own version. The benefit of this is that you can add a trigger that's only being triggered when the product is successfully added to the cart. The disadvantage is that you have to check this file everytime you upgrade WooCommerce.

Edit: I see that the WooCommerce 'add to cart' file already has a trigger which you can use:

// Trigger event so themes can refresh other areas
$( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash ] );