title: WooCommerce - Ajax Add To Cart and Update Total
body: <p>I'm working on a website that allows users to add products to cart from the home page. I've followed a few resources online from their website and other SO questions which allows me to add products to the cart via Ajax but the cart total will not update without a page reload.</p>
  <p><a href="http://docs.woothemes.com/document/show-cart-contents-total/" rel="nofollow noreferrer">WooCommerce's documentation</a> is where the <code>cpp_header_add_to_cart_fragment</code> function came from and it doesn't seem to work at all. Originally I was using <code>add_to_cart_fragments</code> but I found out that was deprecated and I should be using <code>woocommerce_add_to_cart_fragments</code> but that change doesn't help either.</p>
  <p>The more I read the code... I'm noticing that the fragments are being returned from the ajax call so I'm beginning to think I need to replace the html that is showing the cart total with what is returned from the javascript?</p>
  <p><strong>page_home.php</strong></p>
  <pre><code>&lt;!-- Cart link to be updated when products are added --&gt;
  &lt;a class=&quot;cart-contents&quot; href=&quot;&lt;?php echo WC()-&gt;cart-&gt;get_cart_url(); ?&gt;&quot; title=&quot;&lt;?php _e( 'View your shopping cart' ); ?&gt;&quot;&gt;
      &lt;?php echo WC()-&gt;cart-&gt;get_cart_total(); ?&gt;
  &lt;/a&gt;
  </code></pre>
  <p><strong>functions.php</strong></p>
  <pre><code>add_action('wp_enqueue_scripts', 'cpp_enqueue_scripts');
  function cpp_enqueue_scripts() {
      /* Other enqueue/registers */
      wp_register_script('diy_kits', get_template_directory_uri().'/js/diy_kit.js');
      wp_enqueue_script('diy_kits');
      wp_localize_script(
          'diy_kits',
          'cpp_ajax',
          array(
              'ajaxurl' =&gt; admin_url('admin-ajax.php'),
              'diy_product_nonce' =&gt; wp_create_nonce('diy_product_nonce')
          )
      );
  }
  
  add_action('wp_ajax_nopriv_cpp_ajax-submit', 'cpp_ajax_submit');
  add_action('wp_ajax_cpp_ajax-submit', 'cpp_ajax_submit');
  function cpp_ajax_submit() {
      global $woocommerce;
  
      $nonce = $_POST['nonce'];
      if(!wp_verify_nonce($nonce, 'diy_product_nonce')) {
          wp_die('Busted!');
      }
  
      // Add product to cart... this works        
      $product_id = $_POST['product_id'];
      if( $woocommerce-&gt;cart-&gt;add_to_cart( $product_id ) ) {
          $data = apply_filters('woocommerce_add_to_cart_fragments', array());
          do_action('woocommerce_ajax_added_to_cart', $product_id);
      } else {
          $data = array( 'success' =&gt; false, 'product_id' =&gt; $product_id );
      }
      $response = json_encode($data);
      header(&quot;Content-Type: application/json&quot;);
      echo $response; 
      exit;
  }
  </code></pre>
  <p><strong>cpp_header_add_to_cart_fragment</strong></p>
  <pre><code>// CART UPDATE AJAX this doesn't work
  add_filter('woocommerce_add_to_cart_fragments', 'cpp_header_add_to_cart_fragment');
  function cpp_header_add_to_cart_fragment( $fragments ) {
      global $woocommerce;
      ob_start(); ?&gt;
      &lt;a class=&quot;cart-contents&quot; href=&quot;&lt;?php echo WC()-&gt;cart-&gt;get_cart_url(); ?&gt;&quot; title=&quot;&lt;?php _e( 'View your shopping cart' ); ?&gt;&quot;&gt;
          &lt;?php echo WC()-&gt;cart-&gt;get_cart_total(); ?&gt;
      &lt;/a&gt;
  
      &lt;?php
      $fragments['a.cart-contents'] = ob_get_clean();
      return $fragments;
  }
  </code></pre>
  <p><strong>diy_kits.js</strong></p>
  <pre><code>// setup and other stuff...
  links.click(function(e) {
      /* unrelated stuff */
      jQuery.post(
          cpp_ajax.ajaxurl, 
          {
              action      : 'cpp_ajax-submit',
              nonce       : cpp_ajax.diy_product_nonce,
              product_id  : jQuery(this).attr('data-product-id')
          },
          function(response) {
              console.log(response);
          }
      );
  });
  </code></pre>