title: Add ajax to add to cart buttons and prevent the page reload
body: <p>Im wondering how to improve my code below. It's fully 100% working but I want to use ajax in order  that we can prevent the page from reload after adding a products to cart.</p>
  <p>The code below adds two buttons to add directly 6 or 12 items to the cart. But if I click a button then the page reloads. How can I do that better with ajax?</p>
  <pre><code>add_action( 'woocommerce_after_add_to_cart_button', 'additional_simple_add_to_cart', 20 );
  function additional_simple_add_to_cart() {
      
      global $product;
  
      // Only for simple product type
      if( ! $product-&gt;is_type('simple') ) return;
                  
          // Only for products from category &quot;bier&quot; AND/OR &quot;Cider&quot;
          if ( has_term( array('bier', 'cider', 'getraenke'), 'product_cat', $product-&gt;get_id() ) ) {
          
          // Open parent layout wrapper
          echo '&lt;div class=&quot;flex-container-pack-wrapper&quot;&gt;';
              
          // Open child left layout wrapper
          echo '&lt;div class=&quot;flex-container-pack-child left&quot;&gt;';
              
              // Only display when more than 6 are available
              if( $product-&gt;get_stock_quantity() &gt;= 6 ) {
  
                  $href = '?add-to-cart=' . esc_attr( $product-&gt;get_id() ) . '&amp;quantity=6';
                  $class = 'single_add_to_cart_button-6 button alt';
                  $style = 'display: inline-block; margin-top: 12px;';
                  $button_text = __( &quot;6er Pack&quot;, &quot;woocommerce&quot; );
  
                  // Output add to cart button
                  echo '&lt;a rel=&quot;no-follow&quot; href=&quot;'.$href.'&quot; class=&quot;'.$class.'&quot; style=&quot;'.$style.'&quot;&gt;'.$button_text.'&lt;/a&gt;';
                                  
              }
              
              else {
                  echo '&lt;a class=&quot;single_sold_out_button button alt disabled &quot;&gt;6er Pack&lt;p class=&quot;pack_soldout&quot;&gt;(Ausverkauft)&lt;/p&gt;&lt;/a&gt;';
              }
              
              // Close child left layout wrapper
              echo '&lt;/div&gt;';
              
              // Open child right layout wrapper
              echo '&lt;div class=&quot;flex-container-pack-child right&quot;&gt;';
  
              // Only display when more than 12 are available
              if( $product-&gt;get_stock_quantity() &gt;= 12 ) {
  
                  $href = '?add-to-cart=' . esc_attr( $product-&gt;get_id() ) . '&amp;quantity=12';
                  $class = 'single_add_to_cart_button-12 button alt';
                  $style = 'display: inline-block; margin-top: 12px;';
                  $button_text = __( &quot;12er Pack&quot;, &quot;woocommerce&quot; );
  
                  // Output add to cart button
                  echo '&lt;a rel=&quot;no-follow&quot; href=&quot;'.$href.'&quot; class=&quot;'.$class.'&quot; style=&quot;'.$style.'&quot;&gt;'.$button_text.'&lt;/a&gt;';
                  
              }
              
              else {
                  echo '&lt;a class=&quot;single_sold_out_button button alt disabled &quot;&gt;12er Pack&lt;p class=&quot;pack_soldout&quot;&gt;(Ausverkauft)&lt;/p&gt;&lt;/a&gt;';
              }
  
              // Close child right layout wrapper
              echo '&lt;/div&gt;';
              
              // Close parent layout wrapper
              echo '&lt;/div&gt;';
              
              // Open wrapper shipping info
              echo '&lt;div class=&quot;container_pack_wrapper_shipping_ino&quot;&gt;';
              
              // Output Info text for &quot;bier&quot; or &quot;cider&quot; products
              //echo '&lt;p class=&quot;shipping_info&quot;&gt;Wähle 6, 9-12 oder 24 Biere einer Brauerei aus.&lt;/p&gt;';
              //echo '&lt;p class=&quot;shipping_info_extra&quot;&gt;*Spezial Angebote z.B Probierpakete sind von dieser Beschränkung ausgeschlossen.&lt;/p&gt;';
              
              // Tsting link to vendor
              global $product;
              $seller = get_post_field( 'post_author', $product-&gt;get_id());
              $author  = get_user_by( 'id', $seller );
              $vendor = dokan()-&gt;vendor-&gt;get( $seller );
  
              $store_info = dokan_get_store_info( $author-&gt;ID );
  
              if ( !empty( $store_info['store_name'] ) ) { 
  
              // Output Info text for &quot;bier&quot; or &quot;cider&quot; products
              echo '&lt;p class=&quot;shipping_info&quot;&gt;Wähle 6, 9-12 oder 24 Biere einer Brauerei aus.&lt;/p&gt;';
                  
              // Output Vendor link
              printf( '&lt;i class=&quot;fas fa-angle-double-right pack&quot;&gt;&lt;/i&gt;&lt;a class=&quot;vendor_pack_info&quot; href=&quot;%s&quot;&gt;Mehr von %s&lt;/a&gt;', $vendor-&gt;get_shop_url(),  $vendor-&gt;get_shop_name() );
  
              // Output shipping Info             
              echo '&lt;p class=&quot;shipping_info_extra&quot;&gt;*Spezial Angebote z.B Probierpakete sind von dieser Beschränkung ausgeschlossen. Versand wird je Brauerei berechnet.&lt;/p&gt;';
  
              }
        
              // Close wrapper shipping info
              echo '&lt;/div&gt;';
          }
  }
  </code></pre>