Как сделать товары улетающие в корзину?

Question

[pet1987]

Есть сайт интернет магазин сделнный на WordPress + WooCommerce.
Нужно сделать так что бы по клику на кнопку В корзину товар "Полетел" в корзину.
Как можно это реализовать на WooCommerce?
Нашел такой скрипт, но не работает:

$(document).ready(function(){  
	
	//Товары улетающие  корзину
	$(".product_type_simple.add_to_cart_button.ajax_add_to_cart").on("click",function(){
		id = $(this).attr("data-product_id");
		
		$(".post-"+id).find("img")
			.clone()
			.css({'position' : 'absolute', 'z-index' : '11100', top: $(this).offset().top-300, left:$(this).offset().left-100})
			.appendTo("body")
			.animate({
				opacity: 0.05,
				left: $("#cart-punkt").offset()['left'],
				top: $("#cart-punkt").offset()['top'],
				width: 20
			}, 1000, function() {
				$(this).remove();
			});

	});
});

.ajax_add_to_cart — кнопка, при нажатии на которую срабатывает скрипт
#cart-punkt — id корзины в шапке, куда нужно лететь изображениям товаров
$(«#»+id).find(«img») — воздействуем на изображение товара, добавленного в корзину. Но для этого мы должны вычислить и захватить ID товара (id = $(this).parent(‘li’).attr(«id»);).

Answer 1

[hesy]

Код анимации

$(document).ready(function() {
    // Когда документ полностью загружен и готов к работе...
    
    $(".ajax_add_to_cart").on("click", function() {
        // При клике на элемент с классом "ajax_add_to_cart"...
        
        var productImage = $(this).closest(".post").find("img");
        // Находим ближайший родительский элемент с классом "post" и внутри него ищем изображение (тег <img>)
        
        productImage
            .clone() // Клонируем изображение товара
            .css({
                position: "absolute", // Позиционируем клон абсолютно на странице
                "z-index": "11100", // Устанавливаем высокий порядок слоя для клонированного изображения
                top: productImage.offset().top, // Устанавливаем верхнюю позицию клонированного изображения
                left: productImage.offset().left // Устанавливаем левую позицию клонированного изображения
            })
            .appendTo("body") // Добавляем клонированное изображение внутрь элемента body страницы
            .animate({
                opacity: 0.05, // Задаем конечную прозрачность для анимации
                left: $("#cart-punkt").offset().left, // Устанавливаем конечную левую позицию для анимации
                top: $("#cart-punkt").offset().top, // Устанавливаем конечную верхнюю позицию для анимации
                width: 20 // Устанавливаем конечную ширину для анимации
            }, 1000, function() {
                // По завершении анимации...
                
                $(this).remove(); // Удаляем клонированное изображение
            });
    });
});