Создание пользовательской кнопки добавления в корзину для переменных продуктов с вариациями в WooCommerce

Я пытаюсь создать специальную кнопку для продуктов, которые имеют варианты в WooCommerce.

Для контекста: в WooCommerce у меня есть атрибут продукта под названием «Тип лицензии». Этот атрибут имеет 2 термина:

1. Лицензия на один объект,
2. Лицензия на несколько сайтов.

У меня есть продукт (с ID из 203), который содержит эти два варианта:

В моей теме есть переопределение шаблона content-single.product.php, в котором есть следующие фрагменты:

1. Раскрывающийся список select, позволяющий пользователю определить, какую лицензию он хочет:

<?php

global $product;

if ($product->is_type('variable')) :

  $taxonomy = 'pa_license_type';
  $terms = array();

  foreach ($product->get_children() as $variation_id) :
    $variation = wc_get_product($variation_id);

    if (!$variation) :
      continue;
    endif;

    // Get the attribute value for the specified taxonomy
    $attribute_value = $variation->get_attribute($taxonomy);

    if ($term = get_term_by('slug', esc_html($attribute_value), $taxonomy)) :
      $terms[$variation->get_id()] = $term;
    endif;

  endforeach;

  if (count($terms) > 0) :
    printf('<label for = "%s">%s</label><select name = "%s" id = "%s">', esc_attr($taxonomy), wc_attribute_label($taxonomy), esc_attr($taxonomy), esc_attr($taxonomy));
    foreach ($terms as $variation_id => $term) :
      printf('<option value = "%s" data-variation-id = "%d">%s</option>', esc_attr($term->slug), $variation_id, esc_html($term->name));
    endforeach;
    echo '</select>';
  endif;

endif;

?>

2. Пользовательская разметка кнопок:

<?php if ( $product  && $product->is_in_stock() ) :

  $product_id = $product->get_id();
  $add_to_cart_url = esc_url( '?add-to-cart=' . $product_id . '&redirect_to_cart=1' );

  if ($product->is_type('variable')) : ?>
    <a id = "variationBtn" href = "<?= $add_to_cart_url; ?>">
      <?php _e( 'Add to Cart (Variation)', 'woocommerce' ); ?>
    </a>
  <?php else: ?>
    <a href = "<?= $add_to_cart_url; ?>">
      <?php _e( 'Add to Cart', 'woocommerce' ); ?>
    </a>
  <?php endif; ?>

<?php endif; ?>

3. JS, который управляет href на кнопке варианта на основе идентификатора варианта выбранной лицензии из раскрывающегося списка:

document.addEventListener('DOMContentLoaded', function() {
  const variationBtn = document.getElementById('variationBtn');
  const licenseTypeSelect = document.getElementById('pa_license_type');

  function updateAddToCartUrl() {
    const selectedOption = licenseTypeSelect.options[licenseTypeSelect.selectedIndex];
    const selectedLicenseType = selectedOption.value;
    const variationId = selectedOption.getAttribute('data-variation-id');

    const addToCartUrl = `?add-to-cart=<?php echo $product_id; ?>&variation_id=${variationId}&attribute_pa_license-type=${selectedLicenseType}&redirect_to_cart=1`;
    variationBtn.setAttribute('href', addToCartUrl);
  }

  // Init on page load with default values
  updateAddToCartUrl();

  // Update the URL when the license type changes
  licenseTypeSelect.addEventListener('change', updateAddToCartUrl);
});

Например, образец HTML-представления моей кнопки:

<a id = "variationBtn" href = "?add-to-cart=203&amp;variation_id=211&amp;attribute_pa_license-type=single-site-license&amp;redirect_to_cart=1">Add to Cart (Variation)</a>

Желаемый функционал

1. Пользователь выбирает тип лицензии из раскрывающегося списка
2. Пользователь нажимает кнопку «Добавить в корзину»
3. Система распознает, какой вариант добавить в корзину, по идентификатору продукта и варианту.
4. Пользователь автоматически перенаправляется в корзину

Текущие результаты

Шаг 3 — мой подход не работает.

Моя ссылка на кнопку успешно обновляется с указанием идентификатора варианта при изменении и т. д. Но при нажатии кнопки мой продукт не добавляется в корзину.