title: Create WooCommerce custom Order meta via AJAX on thank you page
body: <p>I am trying to use update_meta_data via AJAX on the WooCommerce thank you page but I am stuck.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>    //Following function gets called from the page already
  
      function renderForm() {
              echo "&lt;script&gt;
              jQuery(document).ready(function() {
                  $('body').on('click', '#button', function(){
  
                      $.ajax({
                           type: 'POST',
                           url: 'https://thepropdrop.com/wp-admin/admin-ajax.php',
                           data: {
                              action: 'create_user_meta'
                           },
                           success: function(textStatus){
                              console.log('Success');
                           },
                          error: function(MLHttpRequest, textStatus, errorThrown){
                              alert('errorThrown');
                          }
                      });
                });
              });
  
          &lt;/script&gt;";
      }
  
  add_action("wp_ajax_create_user_meta", "create_user_meta");
  add_action("wp_ajax_nopriv_create_user_meta", "create_user_meta");
  
  function create_user_meta() {
     $order = wc_get_order($order_id);
     $order-&gt;update_meta_data('hasAnswered', 'Yes');
     $order-&gt;save();
     die();
  }
  </code></pre>
  
  <p>Any help you could provide would be greatly appreciated.</p>
  
  <hr>
  
  <p><strong>EDIT</strong> - My related code, that will provide some context:</p>
  
  <p>Here is the button on the thankyou.php:</p>
  
  <pre><code>&lt;span class="button gameStart"&gt;
          Let's do this
          &lt;/span&gt;
          &lt;script&gt;
          jQuery(document).ready(function() {
              $('.gameStart').click(function(event){
                $(this).remove();
                $('.gameHeader').remove();
                $('.gamePage .gameContainer').css('display', 'block');
                $.ajax({
                    type: 'GET',
                    url: '&lt;?php echo admin_url("admin-ajax.php");?&gt;',
                    data: {
                        action: 'CCAjax'
                    },
                    success: function(textStatus){
                       $( '.gameForm' ).prepend( textStatus );
                    },
                    error: function(MLHttpRequest, textStatus, errorThrown){
                        alert(errorThrown);
                    }
                });
            });
          });
          &lt;/script&gt;
                  &lt;div class="gameContainer"&gt;
              &lt;div class="timerWrapper"&gt;
                  &lt;div id="timer"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="gameForm"&gt;
                          &lt;h3&gt;Which of the following countries has the largest land mass?&lt;/h3&gt;
  
                          &lt;div id='answerSubmitButton'&gt;Submit answer&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Then functions.php:</p>
  
  <pre><code>function CCAjax() {
      get_template_part('template-parts/game');
      die();
  }
  add_action('wp_ajax_CCAjax', 'CCAjax');
  </code></pre>
  
  <p>Then the game.php:</p>
  
  <pre><code>&lt;?php
  renderForm();
  ?&gt;
  </code></pre>
  
  <p>Now here is the full render form function (It pulls 3 potential answers from DB and also has a countdown timer, hence why i didnt post it all i didnt want to confuse)</p>
  
  <pre><code>function renderForm() {
  
      // Fetch contries object
      global $wpdb;
      $results = $wpdb-&gt;get_results("select * from ( select *,@curRow :=@curRow + 1 as row_number from ( select * from ( select * from wpCountriesDB order by rand() limit 3 )b order by Mass desc )a JOIN (select @curRow :=0)r)x order by RAND()");
  
      // Create array for answers
      if(!empty($results)) {
          $i = 1;
          foreach ($results as $r) {
              echo "&lt;div class='answerWrapper'&gt;
              &lt;span class='questionNumber'&gt;&lt;span&gt;$i&lt;/span&gt;&lt;/span&gt;
              &lt;label class='label' for='radio$i'&gt;".$r-&gt;Country."&lt;/label&gt;
              &lt;input type='radio' id='radio$i' name='like' value='$r-&gt;row_number' /&gt;
              &lt;/div&gt;";
              $i++;
          }
      }
  
      // Display timer and check answer correct
      echo "&lt;script&gt;
          var timeLeft = 3000;
          var elem = document.getElementById('timer');
  
          var timerId = setInterval(countdown, 1000);
  
          function countdown() {
              if (timeLeft &lt; 0) {
                  clearTimeout(timerId);
                  $('#answerSubmitButton').click();
              } else {
                  elem.innerHTML = timeLeft + 's';
                  timeLeft--;
              }
          }
  
          jQuery(document).ready(function() {
              $('body').on('click', '#answerSubmitButton', function(){
                      var fetchInput = document.querySelector('.answerWrapper input[name=\'like\']:checked');
                var fetchSelected = fetchInput.value;
  
                if (fetchSelected == 1) {
                          $.ajax({
                               type: 'POST',
                               url: 'ajaxURL',
                               data: {
                                   action: adding_custom_meta
                                  },
  
                               success: function(textStatus){
                                      console.log('Success');
                               },
                               error: function(MLHttpRequest, textStatus, errorThrown){
                                       alert('errorThrown');
                               }
                       });
                } else {
                  console.log('incorrect')
                }
            });
          });
  
      &lt;/script&gt;";
  }
  
  add_action("wp_ajax_create_user_meta", "create_user_meta");
  add_action("wp_ajax_nopriv_create_user_meta", "create_user_meta");
  
  function create_user_meta() {
  
      $order = wc_get_order($order_id);
      $order-&gt;update_meta_data('hasAnswered', 'Yes');
      $order-&gt;save();
      die();
  
  }
  </code></pre>
  
  <p>Do i have to pass the Order ID at the very start?</p>