Как отключить автоматическое отображение вариантов товаров WooCommerce

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

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

Пошаговое решение: как убрать автоматическое отображение вариаций

1. Отключаем вывод стандартного шаблона вариаций

WooCommerce использует шаблон single-product/add-to-cart/variable.php для вывода вариаций. Чтобы убрать его вывод, можно отцепить соответствующий хук или переопределить шаблон в дочерней теме.

Самый надежный способ — убрать действие woocommerce_single_product_summary, вызывающее вывод формы вариативного товара:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

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

2. Альтернативный способ — переопределить шаблон в теме

Скопируйте файл woocommerce/templates/single-product/add-to-cart/variable.php в your-child-theme/woocommerce/single-product/add-to-cart/variable.php и полностью очистите его содержимое. Это гарантированно предотвращает вывод формы выбора вариаций.

3. Убираем скрипты вариаций WooCommerce

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

function disable_wc_variation_scripts() {
    if ( is_product() ) {
        wp_dequeue_script( 'wc-add-to-cart-variation' );
    }
}
add_action( 'wp_enqueue_scripts', 'disable_wc_variation_scripts', 100 );

Это предотвратит загрузку лишних JavaScript-файлов, если вы не используете стандартный функционал вариаций.

Проверка результата

1. Откройте страницу вариативного товара в браузере.
2. Убедитесь, что селектор вариаций (выпадающие списки выбора вариаций) не отображается.
3. Проверьте код страницы — в HTML не должно быть блока form.variations_form.
4. В консоли браузера убедитесь, что скрипт wc-add-to-cart-variation.js не загружается.

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

• Ошибка: Селектор вариаций все еще показывается.
  Причина: Код отключения хука запущен слишком поздно или в неправильном месте.
  Решение: Добавьте remove_action в хук init или wp с более высоким приоритетом.
• Ошибка: Ошибки JavaScript после отключения скрипта вариаций.
  Причина: На странице есть кастомные скрипты, которые зависят от стандартного скрипта WooCommerce.
  Решение: Проверьте консоль и исправьте зависимости или отключите кастомные скрипты.
• Ошибка: Форма добавления в корзину отсутствует, но кнопка «Купить» нужна.
  Причина: Полное удаление шаблона убирает и кнопку.
  Решение: Создайте кастомный шаблон с нужными элементами без вариаций.

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

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

Сравнение способов отключения вариаций WooCommerce