WooCommerce: автоматическое отключение опций в вариантах товаров при выборе

Проблема: необходимость ограничить выбор вариантов товаров в WooCommerce

В WooCommerce часто возникает задача, когда при выборе определённой опции товара (например, цвета) нужно автоматически отключать несовместимые опции другой характеристики (например, размера). По умолчанию WooCommerce не предлагает такого поведения, что может привести к ошибочным заказам.

Диагностика задачи: что именно нужно сделать

Пользователь хочет, чтобы при выборе одного варианта атрибута другие варианты, которые нельзя скомбинировать с выбранным, становились недоступны (disabled). Например, при выборе "Красный" цвет, размеры "XL" и "XXL" для этого цвета недоступны — они должны быть отключены в селекте.

Это улучшает UX и снижает количество ошибок при заказе.

Пошаговое решение с примером кода

1. Определяем несовместимые варианты

Для начала нужно получить все варианты и их доступность для выбранных атрибутов. WooCommerce хранит вариации в виде постов типа product_variation с метаданными атрибутов.

2. Добавляем JavaScript для динамического отключения опций

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

jQuery(document).ready(function($) {
  var $form = $('.variations_form');
  $form.on('woocommerce_variation_select_change', function() {
    var selectedAttrs = {};
    $form.find('.variations select').each(function() {
      var attrName = $(this).attr('name');
      var val = $(this).val();
      selectedAttrs[attrName] = val;
    });

    // Получаем все доступные вариации
    var availableVariations = $form.data('product_variations');

    // Находим совместимые вариации
    var compatibleVariations = availableVariations.filter(function(variation) {
      for (var attr in selectedAttrs) {
        if (selectedAttrs[attr] && variation.attributes[attr] !== selectedAttrs[attr]) {
          return false;
        }
      }
      return true;
    });

    // Формируем список доступных опций для каждого атрибута
    var availableOptions = {};
    compatibleVariations.forEach(function(variation) {
      for (var attr in variation.attributes) {
        if (!availableOptions[attr]) {
          availableOptions[attr] = new Set();
        }
        availableOptions[attr].add(variation.attributes[attr]);
      }
    });

    // Обновляем опции селектов
    $form.find('.variations select').each(function() {
      var attrName = $(this).attr('name');
      $(this).find('option').each(function() {
        var val = $(this).attr('value');
        if (val === '') { // пустое значение — всегда доступно
          $(this).prop('disabled', false);
          return;
        }
        if (availableOptions[attrName] && availableOptions[attrName].has(val)) {
          $(this).prop('disabled', false);
        } else {
          $(this).prop('disabled', true);
        }
      });
    });
  });

  // Триггерим событие при загрузке страницы
  $('.variations_form').trigger('woocommerce_variation_select_change');
});

3. Подключение скрипта

Добавьте этот скрипт в файл вашей темы или через wp_enqueue_script в functions.php:

function custom_enqueue_variation_script() {
  if (is_product()) {
    wp_enqueue_script('custom-variation-disable', get_stylesheet_directory_uri() . '/js/variation-disable.js', ['jquery', 'wc-add-to-cart-variation'], '1.0', true);
  }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_variation_script');

Как проверить, что решение сработало

• Откройте страницу товара с вариациями.
• Выберите одну опцию первого атрибута (например, цвет).
• Второй атрибут (размер) должен автоматически обновиться: варианты, несовместимые с выбранным цветом, должны стать disabled в выпадающем списке.
• При смене выбора других атрибутов отключаемые опции должны меняться динамически.

Частые ошибки и как их исправить

• Проблема: Скрипт не работает, переменная product_variations не доступна.
  Решение: Проверьте, что на странице подключён скрипт wc-add-to-cart-variation и что тема использует стандартный шаблон WooCommerce.
• Проблема: Опции отключаются, но нельзя выбрать другие варианты
  Решение: Убедитесь, что в коде учтены пустые значения опций и событие триггерится при загрузке страницы.
• Проблема: Несовместимые варианты не отключаются, т.к. вариации с пустыми атрибутами мешают
  Решение: Проверьте, что все вариации имеют заполненные атрибуты без пустых значений для основных характеристик.

Практические советы по производительности и безопасности

• Загружайте скрипт только на страницах товаров с вариациями, чтобы не нагружать остальные страницы.
• Кэшируйте данные вариаций при необходимости, если у вас большой каталог, чтобы не перегружать браузер.
• Не меняйте HTML селектов вручную на стороне сервера, чтобы сохранить совместимость с WooCommerce.

Сравнение вариантов реализации

Способ	Плюсы	Минусы
JavaScript (описанный выше)	Динамичное отключение без перезагрузки страницы, гибко для любых атрибутов	Зависит от поддержки JS и правильной структуры вариаций
Плагины (например, WooCommerce Variation Swatches)	Простая настройка, готовые UI улучшения	Могут грузить лишний код, не всегда бесплатно
Серверная фильтрация вариантов	Контроль на уровне PHP, можно полностью контролировать логику	Требует доработки шаблонов, может вызвать дополнительную нагрузку