WooCommerce: как изменить количество отображаемых вариантов товара в Elementor

Диагностика проблемы: почему не отображаются все варианты товара

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

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

• Используется ли кастомный виджет Elementor для вывода вариативных товаров;
• Присутствуют ли ограничения в настройках виджета по количеству вариантов;
• Отсутствуют ли фильтры или хуки, которые ограничивают выборку вариаций;
• Проверить, не влияет ли тема или сторонние плагины на вывод вариантов.

Пошаговое решение: изменение количества отображаемых вариантов товара

1. Изменение вывода вариаций через фильтр WooCommerce

Если вы используете стандартный шаблон WooCommerce или кастомный шаблон с Elementor, можно ограничить количество вариантов, изменив запрос вариаций с помощью фильтра woocommerce_available_variation или изменить количество вариаций в массиве $available_variations.

Пример ограничения количества вариаций до 3:

add_filter('woocommerce_available_variations', function($variations) {
    return array_slice($variations, 0, 3);
});

2. Ограничение вариантов в виджете Elementor (если используется кастомный виджет)

Если вы используете виджет Elementor для вывода вариативных товаров, убедитесь, что в настройках виджета есть параметр «Максимальное количество вариантов». Если такого нет, можно добавить фильтр в functions.php, который перед выводом виджетов ограничит количество вариантов.

3. Вывод вариантов вручную через кастомный код

Если нужно полностью контролировать вывод вариаций, можно использовать WP_Query для получения вариаций и вывести их в Elementor через HTML-блок или виджет «Код».

$product = wc_get_product(get_the_ID());
if ($product && $product->is_type('variable')) {
    $variations = $product->get_available_variations();
    $variations = array_slice($variations, 0, 3); // ограничение до 3 вариантов
    foreach ($variations as $variation) {
        echo '<div class="variation-item">';
        echo '<strong>' . esc_html($variation['attributes']['attribute_pa_color'] ?? '') . '</strong>';
        echo ' - Цена: ' . wc_price($variation['display_price']);
        echo '</div>';
    }
}

Проверка результата после внедрения

Чтобы убедиться, что ограничение количества вариантов работает, выполните следующие шаги:

• Откройте страницу вариативного товара на фронтенде сайта;
• Проверьте, что отображается ровно заданное количество вариантов (например, 3);
• Если используете кэширование, очистите кэш браузера и сайта;
• Проверьте консоль браузера и логи сервера на наличие ошибок;
• Если используете Elementor, обновите страницу редактирования и проверьте предпросмотр.

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

• Неверный ID товара в коде. Используйте get_the_ID() только в контексте цикла или передавайте корректный ID.
• Фильтр не срабатывает из-за приоритетов. Укажите приоритет фильтра, например, add_filter('woocommerce_available_variations', 'callback', 20);.
• Плагины кэширования не обновляют вывод. Очистите все кэш-плагины и CDN.
• Виджет Elementor игнорирует кастомные фильтры. Проверьте, не используется ли AJAX-загрузка, тогда фильтры нужно применять иначе.

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

• Ограничение количества вариантов уменьшает нагрузку на сервер и ускоряет загрузку страницы.
• При выводе вариаций через кастомный код используйте esc_html() и другие функции экранирования для защиты от XSS.
• Если используете AJAX-загрузку вариантов, следите за правильной реализации nonce для безопасности.
• Для контроля SEO можно скрывать из индексации лишние вариации с помощью мета-тегов.

Сравнение вариантов решения