Обновление и передача значения в PHP

Question

Я хочу создать связку в Wordpress, используя Woocommerce, где вы выбираете 1 из 4 футболок + 1 из 4 пар носков, и они добавляются в корзину.В настоящее время я застрял в поиске, как подойти к этому.В настоящее время мне нужно добиться следующего: верхнее изображение, которое соответствует выбранному в данный момент продукту, и три меньших изображения под ним.Как только вы нажмете на маленькое изображение, оно должно изменить верхнее изображение.Внизу также есть заголовок, соответствующий выбранному в данный момент продукту, который меняется вместе с верхним изображением. Вы можете увидеть ожидаемый результат здесь.

Мне нужно каким-то образом получить идентификатор продукта, на который пользователь нажимает, и передать его другим функциям php.Вот где я застрял.Кто-нибудь может мне помочь?

Код должен выглядеть примерно так:

<div id="selected-product-image">
  <?php get_the_post_thumbnail(/* ID of the currently selected product*/); ?>
</div>

<ul class="products">
  <?php
      $args = array( 'post_type' => 'product', 'posts_per_page' => 4, 'product_cat' => 't-shirts', 'orderby' => 'name' );
      $loop = new WP_Query( $args );
        				?>

    <?php while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

      <li class="product">

        <div class="select-product"><!--This should have a function to capture the product ID on click. -->
          <?php echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); ?>
        </div>

      </li>
      <?php endwhile; ?>

      <div id="selected-product-name">
        <?php get_the_title(/* ID of the currently selected product*/) ?>;
      </div>

      <?php wp_reset_query(); ?>
</ul>

Я понимаю, что могу сделать что-то подобное, используя AJAX, но я не уверен, как использовать возвращенный идентификатор обратно в get_the_post_thumbnail () или get_the_title ().Вот что я получил:

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery("#select-product").click(function() {
      var id = 29; /* Any value for testing */

      jQuery.ajax({
          method: "post",
          url: "/test.php",
          data: {
            productID: id
          }
        })
        .done(function(data) {
          alert(data);
          /* How do I use this data to update the picture/title? */
        });
    });
  });
</script>


<!-- THE test.php FILE -->
<?php 
$productID = $_POST['productID'];
echo $productID;
?>

ОБНОВЛЕНИЕ: Я попытался отредактировать test.php, чтобы вызвать функцию, но я получаю ошибку 500 каждый раз, когда пытаюсь использовать функцию Wordpress внутри test.phpфайл.Я попытался включить файл wp-blog-header.php, чтобы функции могли работать, но это все равно не помогает.Что я делаю не так?

<!-- THE test.php FILE -->
<?php 
include_once('wp-blog-header.php');

$productID = $_POST['productID'];
echo get_the_post_thumbnail($productID);
?>