Ошибка "Выберите опции товара перед его добавлением в вашу корзину"

Сегодня на одном из проектов по метрике обнаружили, что на сайте Wordpress с Woocommerce посетители не могут добавить товары в корзину, вместо этого появляется алерт (сообщение, ошибка) — Выберите опции товара перед его добавлением в вашу корзину. Самое интересное, что ранее всё работало хорошо. Но решение есть и оно оказалось простым!

Как узнать из-за чего эта ошибка

В этой ситуации следует зайти в консоль, выбрать Woocommerce > Статус. На открывшейся странице нажимаем "Получить системный отчет", в котором и присутствует информации о возможных конфликтах. В моём случае:

Outdated Templates: ❌

Как исправить ошибку

Вариант 1

Чтобы исправить ошибку выбора опции товара — необходимо просто обновить плагин Woocommerce, в моём случае это было обновление до версии 7.0.1. После этого обновления я еще раз протестировал функцию, всё отлично работает. 

Вариант 2

Также проблема может заключаться в отсутствии подключения wp_head в вашем шаблоне в файле header.php

Вариант 3

Вариативные товары также могут выдавать ошибку при попытке положить товар в корзину из-за сторонних плагинов, что является тоже распространенным. Как показывает практика — мешать работе функции может всё "кэширующее и сжимающее", поэтому пробуем отключать плагины, в нашем случае проблема частично исчезла после деактивации WP Rocket. 

Вариант 4

Далее проблема снова появилась — в этот раз она напрямую была связана с вариативностью и проявлялась следующим образом:

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

Покапался немного в настройках этой самой "Вариативности", там я увидел, что выбран формат "да/нет". Поменял его на чекбоксы, чтобы покупка распространялась на оба варианта. После этих действий функция стала работать, но только после ручного указания / смены выбора этой вариации. Почему не срабатывает js и автоматически не распознаёт выбор — не понятно, подключение и подмена библиотек не помогли. Тогда я решил написать код, который автоматически выбирает селектор:

<script>
jQuery(document).ready(function(){
setTimeout(() => {
var colorSelectEl = jQuery("#44pole option[value='1']");
colorSelectEl.prop("selected", true);
colorSelectEl.trigger('change');
}, 500);
});
</script> 

Обращаю внимание, что ID элемента селектора и значение берется по моему id вариации, на других сайтах ID будет отличаться, проверяйте как называется это поле у вас и какое имеет содержание. На всякий случай я подсветил красным цветом.

Конечно этот код на мой взгляд некие "костыли", т.к. по хорошему нужно разбираться в косяках плагинов, однако времени на это нет и нужно, чтобы сайт как можно быстрее продолжил работу. В целом в обслуживании сайтов это почти нормальная практика, когда что-то где-то слетает. Происходит это может просто по причине обновления серверных компонентов или компонентов сайта, далее мы получаем конфликт, после чего долгая разгадка величайшего секрета и/или придумывание способов обхода. Надеюсь данный материал окажется полезным, а решение тем же!

P.S. Рекомендация — лучше сразу строить сайты, где нужный функционал накладывается не плагинами, а изначально вшит в систему, отлажен и корректно работает (например 1С-Bitrix), либо стараться не перегружать сайт плагинами.