Добавление последовательных вариаций товара в WooCommerce

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

Почему стоит реализовать последовательный выбор вариаций в WooCommerce

Стандартный интерфейс вариаций не всегда удобен, если товар имеет множество взаимозависимых опций. Последовательный выбор позволяет:

• Упорядочить процесс выбора для пользователя;
• Избежать выбора невозможных комбинаций;
• Улучшить UX и повысить конверсию;
• Сократить количество возвратов из-за ошибок при оформлении заказа.

Такой функционал особенно актуален для сложных товаров, например, техники с набором совместимых аксессуаров, одежды с зависимыми параметрами (размер, цвет, материал).

Как организовать последовательный выбор вариаций: обзор способов

Для реализации последовательного выбора вариаций можно использовать несколько подходов:

1. Использовать готовые плагины, расширяющие стандартный функционал WooCommerce.
2. Реализовать кастомный JavaScript с AJAX для динамической подгрузки доступных опций.
3. Создать собственные хуки и фильтры для изменения вывода вариаций на странице товара.

Популярные плагины для последовательного выбора вариаций

Рассмотрим несколько известных плагинов, которые можно интегрировать с WooCommerce:

• WooCommerce Variation Swatches and Photos — улучшает отображение вариаций и позволяет создавать красивые селекторы, однако не всегда поддерживает строго последовательный выбор.
• WooCommerce Extra Product Options — мощный плагин с возможностью создавать условные поля и настраивать логику показа вариаций.
• Clearfy Pro — комплексное решение для оптимизации WooCommerce, позволяет гибко настраивать логику отображения элементов.

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

Рассмотрим поэтапный пример, как реализовать последовательный выбор вариаций без сторонних плагинов. Для простоты считаем, что у товара есть две атрибута: color и size, где доступные размеры зависят от выбранного цвета.

1. Изменение шаблона выбора вариаций

Сначала нужно перехватить вывод стандартных селекторов вариаций и разделить их на два шага.

add_action('woocommerce_before_single_variation', 'wporders_show_first_attribute_only', 5);
function wporders_show_first_attribute_only() {
    // Получаем все атрибуты
    global $product;
    $attributes = $product->get_attributes();
    if (empty($attributes)) return;

    // Выводим только первый атрибут
    $keys = array_keys($attributes);
    $first_attr = $keys[0];

    // Здесь можно скрыть остальные селекторы через JS или CSS
    // например добавив класс 'hidden' к диву с остальными атрибутами
}

2. Динамическая подгрузка вариантов второго атрибута через AJAX

После выбора первого атрибута нужно подгрузить доступные значения второго.

add_action('wp_ajax_wporders_get_second_attribute_options', 'wporders_get_second_attribute_options');
add_action('wp_ajax_nopriv_wporders_get_second_attribute_options', 'wporders_get_second_attribute_options');

function wporders_get_second_attribute_options() {
    $product_id = intval($_POST['product_id']);
    $first_attr_value = sanitize_text_field($_POST['first_attr_value']);

    $product = wc_get_product($product_id);
    if (!$product) wp_die();

    $variations = $product->get_available_variations();
    $second_attr_values = [];

    foreach ($variations as $variation) {
        if ($variation['attributes']['attribute_pa_color'] === $first_attr_value) {
            $second_value = $variation['attributes']['attribute_pa_size'];
            if ($second_value && !in_array($second_value, $second_attr_values)) {
                $second_attr_values[] = $second_value;
            }
        }
    }

    wp_send_json($second_attr_values);
}

В JS нужно реализовать отправку AJAX-запроса при выборе первого атрибута и обновление списка второго.

3. JS пример для обновления второго селектора

jQuery(document).ready(function($) {
    $('#pa_color').on('change', function() {
        var firstAttr = $(this).val();
        var productId = $('form.variations_form').data('product_id');

        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'wporders_get_second_attribute_options',
                product_id: productId,
                first_attr_value: firstAttr
            },
            success: function(response) {
                var sizeSelect = $('#pa_size');
                sizeSelect.empty();
                $.each(response, function(i, val) {
                    sizeSelect.append($('<option></option>').attr('value', val).text(val));
                });
                sizeSelect.prop('disabled', false);
            }
        });
    });
});

Рекомендации по улучшению и тестированию

Для полноценной интеграции важно продумать:

• Обработку ошибок и отсутствия доступных вариаций;
• Поддержку кэширования для AJAX-запросов;
• Совместимость с мобильными устройствами;
• Оптимизацию скорости загрузки страницы.

Тестируйте функционал на разных товарах и с разными наборами вариаций, чтобы убедиться в надежности решения.

Заключение

Последовательный выбор вариаций в WooCommerce — востребованная задача для магазинов со сложными товарами. Ее можно решить как с помощью готовых плагинов, так и через кастомный код с использованием AJAX и хуков WooCommerce. Такой подход улучшает UX, снижает ошибки при заказах и повышает конверсию.

Если вы ищете готовые расширения для подобных задач, рекомендуем обратить внимание на Clearfy Pro, который предлагает гибкие настройки для вариаций и оптимизации WooCommerce.