В этом руководстве мы рассмотрим различные методы преобразования раскрывающегося списка выбора варианта в радиовход на одной странице продукта на веб-сайте WooCommerce. Такое преобразование может обеспечить клиентам более интуитивно понятный и удобный интерфейс при выборе вариантов продукта. Мы обсудим несколько подходов и предоставим примеры кода для каждого метода.

Метод 1: использование JavaScript/jQuery для замены раскрывающегося списка выбора
Один из способов добиться такого преобразования — использование JavaScript/jQuery. Мы можем прослушивать событие изменения в раскрывающемся списке выбора варианта, скрывать его и динамически генерировать радиовходы на основе доступных вариантов. Вот пример того, как это можно реализовать:

jQuery(document).ready(function($) {
  // Hide the variation select dropdown
  $('.variations_form').on('woocommerce_variation_select_change', function() {
    $(this).find('.variations select').hide();

    // Generate radio inputs based on available variations
    $(this).find('.variations select option').each(function() {
      var value = $(this).val();
      var label = $(this).text();

      // Create radio input element
      var radioInput = '<input type="radio" name="variation" value="' + value + '">';
      var radioLabel = '<label>' + label + '</label>';

      // Append radio input to the container
      $(this).closest('.variations').append(radioInput + radioLabel);
    });
  });
});

Метод 2. Изменение файлов шаблонов WooCommerce.
Другой подход заключается в непосредственном изменении файлов шаблонов WooCommerce. Переопределив файл шаблона variable.php, мы можем заменить раскрывающийся список выбора варианта радиовходами. Вот пример того, как это можно сделать:

1. Скопируйте файл шаблона variable.phpиз каталога плагина WooCommerce в текущий каталог темы в разделе woocommerce/single-product/add-to-cart/variable.php.
2. Откройте скопированный файл variable.phpв текстовом редакторе.
3. Найдите строку кода, которая генерирует раскрывающийся список выбора варианта, и замените ее следующим кодом:

<?php foreach ( $attributes as $attribute_name => $options ) : ?>
  <div class="variation">
    <h4><?php echo wc_attribute_label( $attribute_name ); ?></h4>
    <?php foreach ( $options as $option ) : ?>
      <?php
        $radio_input = '<input type="radio" name="' . esc_attr( 'attribute_' . sanitize_title( $attribute_name ) ) . '" value="' . esc_attr( $option ) . '" /> ';
        $label = '<label>' . esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '</label>';
        echo $radio_input . $label;
      ?>
    <?php endforeach; ?>
  </div>
<?php endforeach; ?>

Метод 3. Использование плагина WooCommerce
Если вы предпочитаете решение на основе плагина, вы можете использовать плагин «Образцы вариантов для WooCommerce». Этот плагин позволяет легко заменить раскрывающийся список выбора варианта образцами или радиовходами, не изменяя какой-либо код. Просто установите и активируйте плагин, настройте параметры и выберите вариант радиовхода для своих вариантов.

В этом руководстве мы рассмотрели несколько методов преобразования раскрывающегося списка выбора варианта в радиовходы на одной странице продукта на веб-сайте WooCommerce. Мы обсудили использование JavaScript/jQuery, изменение файлов шаблонов и использование специального плагина WooCommerce. Каждый метод предлагает свой подход, что позволяет вам выбрать тот, который лучше всего соответствует вашим требованиям. Внедрив эти методы, вы сможете улучшить взаимодействие с пользователем и сделать процесс выбора вариантов продукта более интуитивным и увлекательным.