Как добавить поле с вариантами в выводе продуктов WooCommerce для удобства выбора

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

Почему стандартного вариативного выбора WooCommerce недостаточно

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

Добавление выбора вариаций прямо в карточку товара на витрине решает эту проблему, позволяя клиенту выбрать нужный вариант и добавить товар в корзину с одной страницы. Это особенно важно для магазинов с ограниченным ассортиментом вариаций и высоким трафиком.

Обзор решения: добавляем поле с вариантами в вывод товаров

Чтобы добавить поле с вариантами, нам нужно:

• Получить все варианты товара (если товар вариативный).
• Отобразить эти варианты в виде списка select или набора кнопок.
• Обработать добавление в корзину с выбранной вариацией.

Для этого можно использовать хуки WooCommerce, а также немного кастомного кода.

Шаг 1. Получаем варианты товара в цикле вывода

В файле шаблона, отвечающем за вывод товаров в цикле (обычно content-product.php), используем следующий код для получения вариаций:

function wpbuy_get_product_variations_select( $product_id ) {
    $product = wc_get_product( $product_id );
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return '';
    }
    $variations = $product->get_available_variations();
    if ( empty( $variations ) ) {
        return '';
    }
    $html = '<select name="variation_id" class="wpbuy-variation-select">';
    foreach ( $variations as $variation ) {
        $variation_obj = wc_get_product( $variation['variation_id'] );
        $attributes = [];
        foreach ( $variation['attributes'] as $attr_name => $attr_value ) {
            $attributes[] = $attr_value;
        }
        $label = implode( ' / ', $attributes );
        $price = $variation_obj->get_price_html();
        $html .= '<option value="' . esc_attr( $variation['variation_id'] ) . '">' . esc_html( $label ) . ' — ' . $price . '</option>';
    }
    $html .= '</select>';
    return $html;
}

Этот код формирует выпадающий список с вариантами товара, где в опции указаны параметры вариации и цена.

Шаг 2. Добавляем поле выбора вариации в карточку товара

Подключим наше поле в цикле товаров, используя хук woocommerce_after_shop_loop_item:

add_action( 'woocommerce_after_shop_loop_item', 'wpbuy_show_variations_select_in_loop', 15 );
function wpbuy_show_variations_select_in_loop() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        echo wpbuy_get_product_variations_select( $product->get_id() );
        echo '<button class="button wpbuy-add-to-cart-variation">Добавить в корзину</button>';
    }
}

Мы вывели select с вариантами и кнопку для добавления в корзину. Однако, чтобы кнопка работала, нужен JavaScript и обработка на сервере.

Шаг 3. Обработка добавления вариации в корзину через AJAX

Для удобства пользователя добавим AJAX-запрос, который отправит выбранный вариант в корзину без перезагрузки страницы.

JavaScript (jQuery):

jQuery(document).ready(function($) {
    $('.wpbuy-add-to-cart-variation').on('click', function(e) {
        e.preventDefault();
        var $container = $(this).closest('.product');
        var variation_id = $container.find('select.wpbuy-variation-select').val();
        if (!variation_id) {
            alert('Пожалуйста, выберите вариант товара.');
            return;
        }
        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'wpbuy_add_variation_to_cart',
                variation_id: variation_id,
                quantity: 1
            },
            success: function(response) {
                if (response.success) {
                    alert('Товар добавлен в корзину');
                    $(document.body).trigger('wc_fragment_refresh');
                } else {
                    alert('Ошибка при добавлении товара');
                }
            }
        });
    });
});

PHP: добавляем обработчик AJAX-запроса в functions.php или в плагине:

add_action( 'wp_ajax_wpbuy_add_variation_to_cart', 'wpbuy_add_variation_to_cart' );
add_action( 'wp_ajax_nopriv_wpbuy_add_variation_to_cart', 'wpbuy_add_variation_to_cart' );
function wpbuy_add_variation_to_cart() {
    if ( ! isset( $_POST['variation_id'] ) ) {
        wp_send_json_error();
    }
    $variation_id = intval( $_POST['variation_id'] );
    $quantity = isset( $_POST['quantity'] ) ? intval( $_POST['quantity'] ) : 1;

    if ( WC()->cart->add_to_cart( wp_get_post_parent_id( $variation_id ), $quantity, $variation_id ) ) {
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
}

Дополнительные улучшения: стилизация и проверка

Чтобы улучшить UX, можно добавить стили для селекта и кнопки, а также валидацию выбора вариации, чтобы нельзя было добавить товар без выбора варианта. При большом количестве вариаций стоит подумать о фильтрации по атрибутам.

Также рекомендуем протестировать работу на мобильных устройствах и проверить совместимость с вашей темой и другими плагинами.

Альтернативные плагины для расширения функционала вариаций

Если не хочется писать код самостоятельно, можно рассмотреть плагины, которые расширяют работу с вариациями WooCommerce:

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

Выводы

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