YITH Infinite Scrolling - Плагин WordPress

Руководство по настройке YITH Infinite Scrolling для каталога, блога и WooCommerce

YITH Infinite Scrolling нужен не для того, чтобы просто спрятать обычные номера страниц. Его задача - заменить классическую пагинацию на загрузку следующих товаров, записей или других элементов через AJAX, при этом сохранить управляемость списка, нормальную работу темы и понятную проверку результата.

В этом руководстве разберём, как подготовить сайт, где искать настройки, почему CSS-селекторы важнее красивого загрузчика, чем отличаются автоматическая прокрутка, кнопка Load More и AJAX-пагинация, как проверить работу на странице магазина, что делать с фильтрами, кешем и несколькими товарными сетками на одной странице.

Материал рассчитан на владельца WordPress-сайта, вебмастера или разработчика, который уже понимает, где находится архив товаров или записей, но хочет настроить бесконечную прокрутку без случайных конфликтов с темой, WooCommerce, Elementor, фильтрами и оптимизацией скорости.

Как плагин меняет обычную пагинацию WordPress

Классическая пагинация работает просто: страница архива показывает ограниченное количество элементов, а ссылка Next ведёт на следующую страницу. YITH Infinite Scrolling использует эту же логику как источник данных, но меняет пользовательский путь. Посетитель остаётся на текущей странице, а плагин находит ссылку на следующую страницу, отправляет запрос, получает новые элементы и добавляет их в существующий список.

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

Это важное отличие от универсальных конструкторов запросов. YITH Infinite Scrolling удобен, когда у вас уже есть рабочая страница магазина, блога или архива, и вы хотите заменить способ перехода между страницами. Если же нужно собрать новый список из произвольных типов записей, таксономий, шаблонов вывода и сложных параметров запроса, лучше заранее оценить более гибкие решения из раздела альтернатив.

Что происходит при загрузке следующей порции

Логика бесконечной прокрутки состоит из четырёх частей. Сначала плагин определяет область навигации, где находится ссылка на следующую страницу. Затем берёт из этой навигации саму ссылку. После этого находит контейнер, в который нужно добавить новые карточки, и отдельный селектор карточки, чтобы не вставить лишнюю обёртку, заголовок или дубль.

В документации YITH эти элементы описаны как Navigation Selector, Next Selector, Item Selector и Content Selector. Эти поля выглядят технически, но именно они решают, будет ли плагин работать в вашей теме. Ошибка в одном селекторе может привести к тишине, бесконечному загрузчику, повтору товаров или вставке не той сетки.

Чем полезна смена URL

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

Мини-проверка: если после загрузки следующей порции адрес в строке браузера не меняется, это не всегда ошибка. В бесплатной версии и в некоторых конфигурациях такой функции может не быть. Для SEO и возврата по кнопке назад тогда особенно важно оставить обычную пагинацию доступной в исходном HTML.

Кому подойдёт бесконечная прокрутка, а где лучше оставить страницы

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

Но бесконечная прокрутка не универсальна. Если человек пришёл за конкретным товаром, сравнивает много параметров, часто возвращается к найденной позиции или должен быстро попасть в нижний колонтитул, классическая пагинация или кнопка Load More могут оказаться удобнее. UX-исследования по этому паттерну отдельно отмечают проблемы с повторным поиском уже просмотренного элемента, доступом к нижней части страницы, нагрузкой на слабое соединение и доступностью для клавиатурной навигации.

Хорошие сценарии

• Каталог товаров с однородными карточками, где пользователю удобно просматривать ассортимент потоком.
• Мобильная витрина, в которой лишний переход на следующую страницу мешает просмотру.
• Блоговая лента, архив новостей или портфолио, где посетитель не привязан к номеру страницы.
• Категории WooCommerce, где уже есть стабильная серверная пагинация и корректные ссылки на следующие страницы.
• Страница с фильтрами, если используется совместимая AJAX-фильтрация и плагин настроен на правильный контейнер результатов.

Ситуации, где стоит подумать дважды

Если сайт продаёт дорогие товары с длинным сравнением характеристик, бесконечная прокрутка может ухудшить ориентацию. Пользователь увидел товар, перешёл в карточку, вернулся и потерял место. Если в нижнем колонтитуле находятся важные ссылки на доставку, возврат, контакты или справку, автоматическая догрузка может мешать до него добраться. Если аудитория часто пользуется клавиатурой или экранными считывателями, обязательно тестируйте доступность и рассматривайте кнопку Load More как более управляемый компромисс.

Главный критерий выбора - не мода на бесконечные ленты, а задача пользователя. Если он исследует поток похожих карточек, YITH Infinite Scrolling может сделать путь мягче. Если он ищет точную позицию, сравнивает и возвращается назад, лучше сохранить заметные ориентиры.

Что проверить перед установкой и включением

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

Проверка обычной пагинации

Откройте страницу магазина, категории или блога без включённого эффекта. Перейдите на вторую страницу обычной ссылкой. Если URL открывается, товары не повторяются, сортировка сохраняется, а фильтры не сбрасывают список неожиданным образом, у плагина есть нормальная база для работы. Если уже на этом этапе вторая страница не отличается от первой или выдаёт ошибку, сначала исправляйте архив, тему, WooCommerce-запрос или настройки постоянных ссылок.

Проверка структуры HTML

Нажмите правой кнопкой на сетке товаров или записей и откройте инструменты разработчика. Вам нужно увидеть:

• Общий контейнер списка, например ul.products, #post-list или другой стабильный блок.
• Отдельный элемент карточки, например li.product или article.post.
• Блок навигации, где находится ссылка на следующую страницу.
• Ссылку, которая действительно ведёт на следующую порцию списка.

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

Проверка кеша и оптимизации

Плагины кеширования, минификации, объединения JavaScript и отложенной загрузки иногда ломают AJAX-поведение. На этапе первичной настройки включайте YITH Infinite Scrolling на тестовой странице или в непиковое время, а затем временно очищайте кеш после каждого изменения. Если сайт использует агрессивную оптимизацию скриптов, добавьте проверку в обычном окне, в режиме инкогнито и под незалогиненным пользователем.

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

Установка и первичная проверка в админ-панели

Установка стандартная для WordPress-плагина. Через админ-панель откройте Plugins, добавьте плагин из каталога или загрузите ZIP-архив, затем нажмите Activate. Если вы работаете с бесплатной версией из WordPress.org, ориентируйтесь на её ограничения: один раздел сайта, включение на мобильных разрешениях и загрузчик. Если у вас премиум-версия, появятся отдельные секции, несколько режимов события, дополнительные загрузчики, анимации и смена URL.

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

Первые действия после активации

1. Откройте настройки плагина в админ-панели YITH.
2. Выберите тестовый раздел, где обычная пагинация уже работает.
3. Заполните селекторы навигации, следующей страницы, элемента и контейнера.
4. Сохраните настройки через Save Changes или аналогичную кнопку панели.
5. Очистите кеш сайта, если он включён.
6. Откройте страницу в новом окне без прав администратора и прокрутите до конца списка.

Если всё настроено верно, после достижения нижней части списка или нажатия кнопки новые элементы добавятся без полной перезагрузки страницы. Если результата нет, не меняйте сразу все поля. Проверяйте по одному: сначала ссылка на следующую страницу, затем контейнер, потом элемент карточки.

Настройка селекторов: главный этап, где чаще всего ошибаются

В YITH Infinite Scrolling селекторы - это не дополнительная техническая мелочь, а основа работы. Плагин должен понять, какую часть страницы считать списком, какие элементы добавлять, где искать ссылку Next и какой блок навигации убрать или заменить. Если селектор слишком общий, плагин может взять не ту сетку. Если слишком узкий - ничего не найдёт. Если на странице несколько одинаковых сеток с одним и тем же ul.products, результат может стать непредсказуемым.

Четыре обязательных селектора

Для стандартного WooCommerce-архива часто встречается пара ul.products и li.product, но это не правило для всех тем. У Flatsome, Elementor-шаблонов, кастомных архивов и блоковых тем разметка может быть другой. В поддержке YITH встречаются случаи, где для блога на Flatsome приходилось использовать селекторы вроде #post-list article.post и отдельную навигацию темы. Это хороший пример: настройка зависит от реальной разметки, а не от универсальной формулы.

Как безопасно уточнить селектор

Если на странице одна товарная сетка, можно начать с простого селектора. Если сеток несколько, добавьте родительский класс или идентификатор к конкретному блоку и используйте его как префикс. Например, вместо общего ul.products лучше использовать .catalog-main ul.products, если класс catalog-main есть только у нужной витрины. Для карточки аналогично: .catalog-main li.product.

В конструкторе страниц это особенно важно. Когда Elementor или другой редактор выводит несколько виджетов товаров, все они могут иметь одинаковые внутренние классы. Плагин видит несколько подходящих контейнеров и не всегда понимает, какой список надо продолжать. Поэтому уникальный родительский класс для нужной сетки часто решает больше, чем перебор загрузчиков и анимаций.

Проверка через инструменты разработчика

1. Откройте страницу архива в браузере.
2. Выберите первую карточку товара через инспектор.
3. Проверьте, какой селектор стабильно находит все карточки текущей сетки, но не затрагивает похожие блоки ниже или выше.
4. Откройте блок пагинации и найдите ссылку на следующую страницу.
5. Сравните HTML первой и второй страницы, чтобы убедиться, что контейнер и карточки сохраняют такую же структуру.

Режимы загрузки: бесконечная прокрутка, кнопка и AJAX-пагинация

В премиум-настройках YITH можно выбрать тип события для секции. Это не только вопрос вкуса. Режим определяет, кто контролирует момент загрузки: сам скролл страницы, явное действие пользователя по кнопке или привычная пагинация, которая работает без полной перезагрузки.

Автоматическая прокрутка

Автоматический режим подходит для лент, где пользователь просматривает поток и не обязан часто попадать в нижний колонтитул. Он снижает количество кликов и выглядит привычно на мобильных устройствах. Но у него есть обратная сторона: если товаров много, страница может стать тяжёлой, а пользователь может потерять ориентир.

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

Кнопка Load More

Кнопка даёт пользователю контроль. Она полезна, если нужно сохранить доступ к нижнему колонтитулу, снизить нагрузку на слабое соединение или сделать поведение более предсказуемым для доступности. В настройках можно задать подпись кнопки и дополнительный CSS-класс. Это хороший вариант для магазинов, где бесконечная лента кажется слишком агрессивной, но обычная пагинация выглядит лишним барьером.

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

AJAX-пагинация

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

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

Настройки после установки: что включать сразу, а что только по необходимости

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

Базовый набор для типового магазина

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

Мобильное включение стоит проверять отдельно. На смартфонах бесконечная прокрутка действительно привычна, но именно там заметнее медленные изображения, тяжёлые карточки и нестабильное соединение. Если мобильная категория грузится тяжело, кнопка Load More может быть честнее для пользователя.

Загрузчик и эффект появления

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

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

Смена URL и возврат назад

Если у вас доступна настройка смены URL, включайте её для каталогов, где пользователь часто открывает товар и возвращается в список. После включения проверьте путь: прокрутите до следующей порции, откройте товар, нажмите назад. Ожидаемый результат - пользователь возвращается ближе к просмотренному месту, а не в начало первой страницы. Если браузер всё равно возвращает в начало, проверьте кеш, работу истории браузера и то, меняется ли адрес при догрузке.

Интеграция с фильтрами

На странице продукта YITH указана интеграция с YITH WooCommerce Ajax Product Filter. Её смысл в том, что фильтр меняет выдачу без перезагрузки, а бесконечная прокрутка продолжает работать с отфильтрованным списком. Это сценарий, где особенно важны контейнеры и порядок проверки: сначала фильтр должен корректно менять товары, затем прокрутка должна подхватывать следующую страницу уже отфильтрованного результата.

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

Практический пример: включаем загрузку товаров в категории WooCommerce

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

Цель

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

Подготовка

• WooCommerce-архив открывается без ошибок.
• Вторая страница категории отличается от первой и содержит новые товары.
• Кеш очищен или временно отключён для теста.
• Вы знаете контейнер списка, элемент карточки, навигацию и ссылку следующей страницы.
• На тестовой странице нет двух одинаковых товарных сеток с одинаковыми селекторами.

Шаги настройки

1. Откройте настройки YITH Infinite Scrolling и создайте или настройте секцию для магазина.
2. В поле Navigation Selector укажите блок WooCommerce-пагинации, который содержит ссылку на следующую страницу.
3. В поле Next Selector укажите ссылку следующей страницы, а не весь набор номеров.
4. В поле Item Selector укажите одну карточку товара.
5. В поле Content Selector укажите контейнер всей сетки товаров.
6. Выберите режим: автоматическая прокрутка для поточной витрины или Load More для более контролируемого поведения.
7. Сохраните настройки, очистите кеш и откройте категорию в окне без авторизации.

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

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

Нюанс с несколькими сетками

Если на странице есть блок “популярные товары”, “рекомендуем” и основная категория, все они могут использовать ul.products и li.product. В таком случае общий селектор слишком широк. Добавьте уникальный родительский класс к основной сетке и уточните поля YITH через этот класс. Это снижает риск повторов и вставки товаров не в тот блок.

Идеи применения для разных типов страниц

YITH Infinite Scrolling полезен не только для стандартной страницы магазина. Документация описывает применение к товарам, записям, отзывам и другим секциям, если у них есть цикл и пагинация. Но каждый сценарий требует своего контроля: одно дело - карточки WooCommerce, другое - блоговая лента, третье - виджет с товарами внутри конструктора.

Категория магазина с большим ассортиментом

Для категории, где пользователь выбирает глазами, бесконечная прокрутка снижает количество действий. Здесь важны скорость изображений, стабильное количество колонок и корректная работа фильтров. Проверьте, что после догрузки карточки получают такие же стили, как исходные, а события кнопок не теряются.

Блоговая лента или архив записей

Для блога настройка похожа, но селекторы будут другими. Частая ошибка - пытаться включить эффект на одиночной записи, где нет полноценного цикла следующих записей. Плагину нужен список, который имеет пагинацию. Если одиночная запись содержит только навигацию “предыдущая/следующая запись”, это не то же самое, что архивный цикл.

Страница с AJAX-фильтрами

Если магазин использует AJAX-фильтр, сначала проверяйте фильтр отдельно. Затем включайте прокрутку и смотрите, как формируется следующая страница после фильтрации. Хороший результат - новая порция соответствует выбранным фильтрам. Плохой результат - после первой догрузки список возвращает товары без учёта фильтра или перемешивает элементы из разных состояний.

Секция внутри конструктора страниц

Конструктор удобен для дизайна, но может усложнить выбор селекторов. Если виджет товаров находится внутри нескольких вложенных обёрток, добавьте понятный класс на верхний контейнер виджета и используйте его в селекторах. Не делайте селектор по случайному автосгенерированному классу, который редактор может изменить после правки страницы.

Скорость, SEO и доступность: как не испортить полезную функцию

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

SEO-проверка

Google в рекомендациях по бесконечной прокрутке подчёркивает идею доступных страниц серии. Для практики WordPress это значит: обычные URL страниц пагинации должны открываться, а контент не должен существовать только после JavaScript-догрузки. Не закрывайте страницы пагинации от индексации без понимания последствий и не удаляйте навигацию из HTML так, чтобы поисковый робот не мог добраться до последующих товаров.

Если доступна смена URL при догрузке, проверьте её на живой странице. Если она недоступна, особенно аккуратно относитесь к внутренним ссылкам, карте сайта, категориям и обычной пагинации. Плагин должен улучшать пользовательское взаимодействие, а не делать часть ассортимента невидимой для обхода.

Скорость и изображения

Каждая новая порция товаров добавляет изображения, кнопки, скрипты виджетов и иногда сторонние элементы. Если карточки тяжёлые, страница будет расти по памяти и времени отрисовки. Перед запуском проверьте размер изображений, ленивую загрузку, количество товаров на странице и поведение на слабом мобильном соединении. Иногда лучше загружать меньше товаров за один раз, чем создавать длинную страницу с сотнями DOM-элементов.

Доступность и нижний колонтитул

Автоматическая догрузка может мешать клавиатурной навигации и доступу к нижнему колонтитулу. Если внизу страницы есть важные ссылки, рассмотрите кнопку Load More. Она позволяет посетителю решать, когда загружать следующий блок, и не создаёт ощущения, что нижняя часть сайта постоянно убегает.

Небольшое улучшение внешнего вида кнопки

Если вы выбрали режим Load More, в премиум-настройках можно добавить дополнительный класс кнопки. Это безопасный способ стилизовать кнопку через CSS, не меняя код плагина и не трогая файлы темы напрямую. Ниже пример для класса catalog-load-more, который можно указать в поле Extra Class of the Button.

.catalog-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 6px;
  background: #6f42c1;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.catalog-load-more:hover,
.catalog-load-more:focus {
  background: #56329a;
  color: #fff;
  outline: 2px solid #cbb7ff;
  outline-offset: 2px;
}

Добавляйте CSS в дочернюю тему, в раздел дополнительного CSS темы или через безопасный сниппет-плагин. После сохранения откройте страницу как обычный посетитель, нажмите кнопку, убедитесь, что товары догружаются, фокус виден с клавиатуры, а кнопка не конфликтует с общим стилем темы. Откат простой: удалите CSS и уберите дополнительный класс из настройки кнопки.

Почему YITH Infinite Scrolling не работает и как искать причину

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

Ничего не загружается после прокрутки

Симптом: пользователь доходит до конца списка, загрузчик не появляется или висит бесконечно. Возможная причина - неверный Next Selector, отсутствующая ссылка на следующую страницу, ошибка JavaScript или оптимизация, которая перенесла скрипт в неправильное место.

Проверьте вторую страницу вручную. Затем откройте консоль браузера и вкладку сети. Если запроса нет, ищите проблему в событии скролла или селекторах. Если запрос есть, но ответ не вставляется, переходите к контейнеру и элементу карточки. Если кнопка Load More работает, а автоматическая прокрутка нет, временно оставьте кнопку и проверьте мобильную высоту страницы, sticky-элементы и скрипты оптимизации.

Товары повторяются или вставляются не в тот блок

Симптом: запросы уходят, но пользователь видит повтор карточек, перемешивание сеток или догрузку в неправильном месте. В поддержке YITH встречается такой сценарий при нескольких товарных сетках на одной странице, особенно с конструкторами. Причина часто в слишком общем Content Selector или Item Selector.

Добавьте уникальный класс к нужной сетке и используйте его как префикс. Если на странице несколько виджетов WooCommerce Products, не рассчитывайте, что общий ul.products будет достаточно точным. Когда проблема появляется только на главной, но не на обычной категории, сравните число сеток и обёртки вокруг них.

После фильтрации подгружаются неправильные товары

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

Сначала убедитесь, что AJAX-фильтр сам по себе работает корректно. Затем проверьте, какую ссылку следующей страницы видит плагин после применения фильтра. Если используется YITH WooCommerce Ajax Product Filter, опирайтесь на официальную интеграцию и проверяйте оба плагина вместе. Если фильтр сторонний, не обещайте себе полной совместимости без теста на реальной категории.

Кнопки карточек или избранное перестают работать после догрузки

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

Проверьте, есть ли у соответствующего плагина совместимость с AJAX-догрузкой. Для YITH-экосистемы разработчик заявляет общий фреймворк и отдельные интеграции, но сторонние виджеты нужно тестировать. Если функция критична, выбирайте режим Load More и проверяйте повторную инициализацию элементов после каждого клика.

Проблема видна только незалогиненным пользователям

Симптом: у администратора всё работает, а у посетителя нет. Частая причина - кеш страницы, оптимизация JavaScript или разное состояние минифицированных файлов. Очистите кеш сайта, браузера и CDN, временно отключите объединение скриптов для проверки, затем включайте оптимизацию обратно по одному пункту.

Когда лучше откатить настройку

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

Когда YITH Infinite Scrolling будет удачным выбором

YITH Infinite Scrolling стоит использовать, если на сайте уже есть рабочий каталог или архив, вам нужно улучшить просмотр длинного списка, а структура страницы позволяет точно указать навигацию, контейнер и элементы. Плагин особенно уместен для WooCommerce-категорий, блоговых лент и витрин, где посетитель просматривает много похожих карточек и не хочет каждый раз переходить на следующую страницу.

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

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