<!--  
<?php 
/*
/ Add Custom Output to single-product
add_action('woocommerce_single_product_summary', "my_single_product", 20);
function my_single_product($optional_values) {
    $product_id = get_the_ID();
    $product = wc_get_product($product_id);
    $ud_sku = $product->get_sku();
    $ud_stock_quantity = $product->get_stock_quantity();
    $ud_aria_label = $product->get_name() . " zum Warenkorb hinzufügen";

    $output_html = "";
    $output_html .= '<div class="summary_head">';
    $output_html .= woocommerce_breadcrumb();

    $output_html .= woocommerce_template_single_title();
    $output_html .= woocommerce_template_single_excerpt();
    $output_html .= '</div>';

    $output_html .= '<div class="summary_body">';
    $output_html .= '<div class="my_quantity"><input name="my_quantity" type="number" max="' . $ud_stock_quantity . '" value="1"></input> <label>Stück</label></div>';
    $output_html .= woocommerce_total_product_price();
    //woocommerce_simple_add_to_cart();
    //    echo '<a href="?add-to-cart=' . $product_id . '" data-quantity="1" class="button wp-element-button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="' . $product_id . '" data-product_sku="' . $ud_sku . '" aria-label="' . $ud_aria_label . '" rel="nofollow">In den Warenkorb</a>';
    $output_html .= '<a href="?add-to-cart=' . $product_id . '" data-quantity="1" class="button wp-element-button product_type_simple add_to_cart_button ajax_add_to_cart cart_button" data-product_id="' . $product_id . '" data-product_sku="' . $ud_sku . '" aria-label="' . $ud_aria_label . '" rel="nofollow">';
    //$output_html .= '<button class="cart-button">';
    $output_html .= '<span class="add-to-cart">In den Warenkorb</span>';
	$output_html .= '<span class="added">Hinzugefügt</span>';
    $output_html .= '<i class="fas fa-shopping-cart"></i>';
    $output_html .= '<i class="fas fa-box"></i>';
    //$output_html .= '</button>';
    $output_html .= '</a>';
    $output_html .= '</div>'; // summary_body

    echo $output_html;
};
*/
?>
-->
<div class="product">
	<!-- href="?add-to-cart=3209" -->
	<a href="#foo" data-quantity="1" class="button wp-element-button product_type_simple add_to_cart_button ajax_add_to_cart cart_button" data-product_id="3209" data-product_sku="" aria-label="Wasser und Wacht zum Warenkorb hinzufügen" rel="nofollow">
		<div class="animation_container">
			<span class="add-to-cart">In den Warenkorb</span>
			<span class="added">Hinzugefügt</span>
			<i class="fas fa-shopping-cart"></i>
			<i class="fas fa-box"></i>
		</div>
</a>
</div>
:root{
   --shadow_color: #00000044;
   --shadow_3: 3px 3px 0 var(--shadow_color);
	--transition_time_01: 0.1s;
	}

a{
	text-decoration:none;
	}

.product{
	display:flex;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	}

.cart_button {
	display: inline-block;
	position:relative;
   box-sizing: border-box;
   margin-top: 15px;
   max-width: 100%;
	width: 200px;
	height: 40px;
   border: 0px solid;
   border-radius: 6px;
   color: white;
	background: rgb(51, 127, 191);
   background: linear-gradient(90deg, rgba(51, 127, 191, 1) 0%, rgba(51, 127, 191, 1) 50%, rgba(73, 153, 219, 1) 75%, rgba(51, 127, 191, 1) 100%);
   background-size: 200% 100%;
   cursor: pointer;
   font-size: 14px;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   filter: drop-shadow(var(--shadow_3));
	transition: all var(--transition_time_01) ease-in-out;
   }

.cart_button:hover {
   filter: drop-shadow(var(--shadow_0));
   transform: translate(2px, 2px);
   }

.cart_button .animation_container{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

.cart_button .fa-shopping-cart {
   position: absolute;
   z-index: 2;
   top: 50%;
   left: -10%;
   font-size: 2em;
   transform: translate(-50%, -50%);
	}

.cart_button .fa-box {
   position: absolute;
   z-index: 3;
   top: -30%;
   left: 52%;
   font-size: 1.2em;
   transform: translate(-50%, -50%);
	}

.cart_button span {
   position: absolute;
   z-index: 3;
   left: 50%;
   top: 50%;
   font-size: 1.2em;
   color: #fff;
   transform: translate(-50%, -50%);
	line-height:1em;
	}

.cart_button span.add-to-cart {
   opacity: 1;
   width: 100%;
	}

.cart_button span.added {
   opacity: 0;
	}

.cart_button.clicked .fa-shopping-cart {
   animation: cart 1.5s ease-in-out forwards;
	}

.cart_button.clicked .fa-box {
   animation: box 1.5s ease-in-out forwards;
	}

.cart_button.clicked span.add-to-cart {
   animation: txt1 1.5s ease-in-out forwards;
	}

.cart_button.clicked span.added {
   animation: txt2 1.5s ease-in-out forwards;
	}

@keyframes cart {
   0% {
		left: -10%;
		}
   40% {
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg)
   	}
	45% {
      transform: translate(-50%, -50%) rotate(20deg)
   	}
	50% {
      transform: translate(-50%, -50%) rotate(0deg)
 		}
   55% {
		transform: translate(-50%, -50%) rotate(-20deg)
   	}
   60% {
 		left: 50%;
   	transform: translate(-50%, -50%) rotate(0deg)
   	}
   100% {
      left: 110%;
   	}
	}

@keyframes box {
  	0%,
  	40% {
     	top: -40%;
    	}
   60% {
  	   top: 40%;
 		left: 52%;
 		}
   100% {
   	top: 40%;
   	left: 112%;
		}
	}

@keyframes txt1 {
   0% {
 	  opacity: 1;
		}
  	20%,
 	100% {
  		opacity: 0;
  		}
	}

@keyframes txt2 {
   0%,
   80% {
      opacity: 0;
  		}
	100% {
 		opacity: 1;
 		}
	}
jQuery(document).ready(function($){
	
	$(".cart_button").each(function () {
 		
		$(this).on("click", function () {
			$(this).addClass("clicked");
      });
		
		$(this).on('animationend webkitAnimationEnd', function (event) {
			if (event.originalEvent.animationName === "cart") {
				if ($(this).hasClass = "clicked") {
            	var $this = $(this);
    				var $my_timeout = setTimeout(test, 2000, $this, $my_timeout);
 				}
			}
		});
	});

	function test($this, $my_timeout) {
		$($this).removeClass("clicked");
		clearTimeout($my_timeout);
    }
	
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js