CrocoBlock JetProductGallery - Плагин WordPress

Руководство по CrocoBlock JetProductGallery: галерея товара, слайдер, zoom, видео и проверка результата

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

В этом руководстве разберём, где плагин полезен, какие зависимости проверить перед установкой, как включить нужные виджеты, как выбрать источник изображений, чем отличаются Gallery Grid, Gallery Slider, Gallery Modern и Gallery Anchor Navigation, как настроить lightbox, zoom, видео и миниатюры, а затем проверить результат на странице товара.

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

Какую задачу решает плагин на странице товара

У стандартной галереи WooCommerce есть базовые возможности: главное изображение, дополнительные картинки, zoom, lightbox и порядок миниатюр. Для простого товара этого часто достаточно. Проблема появляется, когда товар нужно показать подробнее: несколько ракурсов, текстура материала, вариант цвета, короткий ролик, вертикальные миниатюры, сетка вместо привычного слайдера или отдельная галерея в шаблоне, собранном через Elementor или редактор блоков.

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

Основные сценарии такие:

• Товар с большим количеством изображений. Слайдер экономит место, а миниатюры помогают быстро перейти к нужному ракурсу.
• Товар, где важны детали. Zoom и lightbox дают покупателю рассмотреть материал, фактуру, фурнитуру, комплектацию или состояние товара.
• Товар с видео. Плагин позволяет добавить ролик в галерею, чтобы показать работу продукта, посадку одежды, обзор комплекта или короткую инструкцию.
• Кастомный шаблон товара. Если страница собрана через JetWooBuilder, Elementor или блоки, галерею можно поставить в нужную колонку и подобрать макет под дизайн.
• Галереи не только из WooCommerce. В документации есть источники Manual Select и Post Types, поэтому блок можно использовать для выбранных вручную изображений или динамических галерей из метаполей, если это подтверждено структурой сайта.

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

Кому CrocoBlock JetProductGallery подходит, а кому лучше выбрать другой путь

Плагин особенно удобен, если сайт уже строится на экосистеме Crocoblock. Документация постоянно связывает его с Elementor, Gutenberg, JetWooBuilder, JetStyleManager и иногда JetEngine. Это не значит, что все эти инструменты нужны всегда, но такой контекст важен: JetProductGallery раскрывается сильнее, когда вы настраиваете шаблон товара как конструктор, а не правите файлы темы вручную.

Когда плагин будет уместен

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

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

Когда стоит быть осторожнее

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

Не стоит ставить JetProductGallery только ради эффекта. Слайдер, lightbox и zoom должны помогать покупателю, а не отвлекать его от выбора. Для дешёвых однотипных товаров иногда лучше компактная простая галерея, быстрая загрузка и понятные характеристики, чем сложный визуальный блок.

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

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

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

Редактор и шаблон

Официальная страница указывает работу с Elementor и Gutenberg. В документации также встречаются сценарии с JetWooBuilder Single Product template. Поэтому заранее решите, где именно будет жить галерея:

• В шаблоне одиночного товара Elementor, если товарная страница строится через JetWooBuilder или похожий визуальный шаблон.
• В редакторе блоков, если вы собираете страницу или шаблон через Gutenberg и используете блоки JetProductGallery.
• На отдельной странице, если нужно вывести галерею конкретного товара по Product ID или показать вручную выбранные изображения.

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

Изображения товара

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

Перед началом проверьте:

• У товара есть главное изображение и несколько дополнительных изображений в Product Gallery.
• Картинки достаточно крупные для zoom и lightbox, а не только маленькие миниатюры.
• Порядок изображений логичен: общий вид, важные детали, варианты, упаковка, видео или дополнительный контекст.
• Файлы не чрезмерно тяжёлые. Большие оригиналы полезны, но на сайте должны работать корректные размеры и оптимизация.
• Alt-тексты и названия изображений не выглядят как случайные файлы с камеры, особенно для товаров, где изображения участвуют в поисковой выдаче.

Кэш, оптимизация и конфликтующие галереи

Любая интерактивная галерея зависит от стилей и сценариев. Если на сайте включены минификация, отложенная загрузка скриптов, объединение JavaScript, оптимизация изображений, lazy loading, агрессивный кэш или встроенная галерея темы, тестируйте JetProductGallery на копии страницы и только потом переносите настройки на рабочий товар.

Для первого запуска лучше выбрать один тестовый товар с 5-7 изображениями, настроить галерею на нём и проверить публичную часть в обычном окне браузера, режиме инкогнито и на мобильной ширине. Так вы быстрее поймёте, проблема в настройках блока или в данных конкретного товара.

Установка, включение виджетов и первичная проверка

После установки и активации плагина главная техническая проверка - убедиться, что нужные виджеты и блоки включены. В справке Crocoblock для JetProductGallery Dashboard Overview указан путь в админ-панели: Crocoblock - JetPlugins Settings - JetWooProductGallery - Widgets. В этом разделе доступны Gallery Anchor Navigation, Gallery Grid, Gallery Modern и Gallery Slider.

Эта настройка важна для скорости и порядка в редакторе. Если вы используете только Gallery Slider, нет смысла держать все элементы активными в панели конструктора. Если позже понадобится сетка или anchor navigation, виджет можно снова включить.

Порядок первичной проверки

1. Откройте админ-панель WordPress и убедитесь, что WooCommerce активен, если галерея должна брать изображения из товара.
2. Проверьте, что CrocoBlock JetProductGallery активирован и отображается в списке плагинов.
3. Перейдите в настройки JetPlugins и включите только те виджеты, которые планируете тестировать.
4. Откройте редактор Elementor или редактор блоков и найдите элементы JetProductGallery.
5. Создайте тестовую страницу или откройте шаблон одиночного товара, добавьте выбранный блок и задайте источник изображений.
6. Опубликуйте или обновите страницу, затем проверьте публичную часть сайта без режима редактирования.

Если виджет не появился в Elementor или Gutenberg, сначала вернитесь в dashboard-настройки JetProductGallery. Не начинайте диагностику с переустановки плагина: часто достаточно включить нужный элемент или очистить кэш редактора.

Как понять, что первый запуск успешен

Успешный первый запуск - это не идеальный дизайн. На этом этапе достаточно увидеть, что блок выводит изображения, источник выбран правильно, клики по миниатюрам работают, а страница не показывает фатальных ошибок. Стили, отступы, lightbox, zoom и видео настраиваются следующим этапом.

Не оценивайте плагин по первому виду без настройки. Галерея почти всегда требует подгонки размера изображений, направления слайдера, количества миниатюр и поведения lightbox под конкретный шаблон товара.

Источники изображений: WooCommerce, Manual Select и Post Types

Один из ключевых выборов в CrocoBlock JetProductGallery - поле Source. В документации для Elementor и Gutenberg повторяются три варианта: WooCommerce Products, Manual Select и Post Types. Это не декоративная настройка, а логика, которая определяет, откуда блок берёт изображения и почему иногда галерея оказывается пустой.

WooCommerce Products

Этот источник нужен для товарной страницы. Если блок находится в шаблоне одиночного товара, он может подтягивать текущий товар. В некоторых сценариях можно указать Product ID, чтобы вывести изображения конкретного товара на обычной странице или в тестовом блоке. Документация Crocoblock показывает, что Product ID можно посмотреть в списке товаров WooCommerce при наведении на товар.

Выбирайте WooCommerce Products, если галерея должна отражать карточку товара: главное изображение, Product Gallery, изображения вариаций и связанные товарные данные. Это самый естественный режим для магазина.

Manual Select

Manual Select подходит, когда галерея не должна зависеть от конкретного товара. Например, вы собираете промо-страницу, лендинг коллекции, подборку фото объекта аренды или статический блок в записи. В Gutenberg-документации Crocoblock описывает выбор изображений через Media Library, создание галереи, изменение порядка и вставку набора в блок.

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

Post Types

Post Types нужен для более сложных динамических сценариев. В документации указано, что этот вариант работает на одиночной записи, где есть галерейное метаполе, созданное, например, через JetEngine. Такой источник полезен не только для товаров, но и для каталогов объектов, портфолио, недвижимости, бронирования или кастомных типов записей.

Главный риск - неверный ключ метаполя. Если указать неправильный Gallery Key, блоку нечего выводить. Поэтому перед настройкой Post Types проверьте, как именно называется метаполе, где оно заполнено и на каком типе записи открывается шаблон.

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

Выбор макета: Grid, Slider, Modern и Anchor Navigation

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

Gallery Grid

Gallery Grid показывает изображения сеткой. В документации Crocoblock для Elementor описаны параметры Image Size, Grid Columns, Primary Gallery Image, Grid Items Count и Overlay Text. Этот макет хорош, когда нужно сразу показать несколько кадров: товар со многими ракурсами, недвижимость, набор, комплект, handmade-изделие, визуальный каталог.

Primary Gallery Image делает первое изображение крупнее, а остальные - дополнительными. Это полезно, когда первый кадр должен быть главным доказательством, а остальные раскрывают детали. Grid Items Count позволяет ограничить количество видимых элементов и показать overlay-текст, если изображений больше. Так страница остаётся компактной, но покупатель видит, что в галерее есть продолжение.

Gallery Slider

Gallery Slider экономит место. В Gutenberg-документации описаны направление, infinite loop, equal slides, sensitivity, transition effect, navigation, pagination и thumbnails controller. Для магазинов чаще всего важны два решения: горизонтальный слайдер с миниатюрами снизу или вертикальный слайдер с миниатюрами сбоку.

Горизонтальный слайдер привычен и хорошо работает в широких карточках. Вертикальный вариант полезен, если основное изображение должно оставаться большим, а миниатюры занимают левую или правую колонку. Но вертикальные миниатюры чувствительнее к высоте контейнера: если у карточки товара плотный первый экран, проверьте мобильную версию особенно внимательно.

Gallery Modern

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

Gallery Anchor Navigation

Gallery Anchor Navigation создаёт прокручиваемый просмотр с навигацией по изображениям. В документации для Gutenberg указано, что блок может использовать вертикальную или горизонтальную пагинацию, а Navigation Position можно поставить до или после изображения. Это удобный вариант, когда покупатель должен быстро переходить между кадрами, но вы не хотите прятать всё в классический слайдер.

Как выбрать без долгих споров

Если изображений мало и они равнозначны, начните с Gallery Grid. Если изображений много и важна компактность, пробуйте Gallery Slider. Если первый экран должен выглядеть как витрина, сравните Gallery Modern. Если покупатель должен быстро перескакивать между кадрами, используйте Anchor Navigation. Затем проверяйте не только настольный экран, но и мобильную ширину, потому что там макет может ощущаться совсем иначе.

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

Самый полезный этап - не установка, а настройка поведения галереи. Ниже логика, которую удобно применять почти к любому макету JetProductGallery. Названия отдельных полей могут отличаться между Elementor и Gutenberg, но смысл остаётся одинаковым: источник, изображения, интерактивность, слайдер, lightbox, style и проверка результата.

General: источник, текущий товар и базовые переключатели

В General сначала выберите Source. Для шаблона одиночного товара почти всегда используйте WooCommerce Products. Если блок стоит не в шаблоне, а на обычной странице, укажите Product ID и проверьте, что он соответствует нужному товару. Если ID пустой на обычной странице, галерея может не понять, какой товар показывать.

Дальше включайте только нужные функции. В Crocoblock-документации для Gutenberg перечислены Enable Featured Image, Enable Video, Enable Zoom и Enable Photoswipe Gallery. Не включайте всё подряд. Если товару не нужен видеообзор, не добавляйте видеоповедение только потому, что оно есть. Если у изображений низкое разрешение, zoom может показать пикселизацию и ухудшить впечатление.

Безопасная последовательность

1. Сначала добейтесь вывода обычных изображений.
2. Затем включите lightbox или Photoswipe Gallery и проверьте клик по изображению.
3. После этого включите zoom и оцените качество увеличения.
4. В конце добавляйте video, если ролик действительно помогает товару.

Так проще понять, какая настройка сломала поведение, если что-то пошло не так.

Images: размер, колонки, миниатюры и первый кадр

Настройки изображений влияют на качество и читаемость галереи. В документации для Gallery Grid указаны Image Size, Grid Columns, Primary Gallery Image, Grid Items Count и Overlay Text. В Slider-блоке отдельно упоминаются Image Size и Thumbnails Size, причём Crocoblock поясняет, что эти поля отвечают за качество рендера, а фактический размер блока определяется контейнером или секцией.

Для типового магазина начните с такого подхода:

• Главное изображение должно занимать достаточно места, чтобы товар был понятен без открытия lightbox.
• Количество колонок в сетке подбирайте под ширину карточки: слишком много колонок дают мелкие картинки.
• Миниатюры в слайдере должны быть узнаваемыми, а не превращаться в полоску одинаковых пятен.
• Первый кадр используйте как главный общий вид товара, а не как случайную деталь.
• Overlay Text применяйте только если скрытые изображения действительно есть и покупателю нужен сигнал продолжения.

Slider: направление, навигация, пагинация и чувствительность

Для Gallery Slider важны Direction, navigation и pagination. Горизонтальное направление обычно универсальнее. Вертикальное подходит, когда макет страницы позволяет отдать высоту под основное изображение и разместить миниатюры сбоку.

Если включаете Show Navigation, проверьте иконки стрелок. В документации для Gutenberg описано, что иконки можно выбрать через Media Library. Для блоков также есть важное замечание: некоторые функции, включая gallery или video pop-ups, могут не отображаться без назначенной trigger icon. Это практический нюанс, который часто выглядит как поломка, хотя на самом деле не выбран значок.

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

Lightbox и Photoswipe Gallery

Lightbox нужен, когда покупателю важно открыть изображение крупно. В документации Crocoblock для lightbox сказано, что все четыре виджета или блока поддерживают эту функцию через Enable Gallery. В зависимости от макета появляются Trigger Type, Button или Image, icon, position, Show on Hover, а также controls: caption, fullscreen, zoom, share, counter и arrows.

Для большинства товаров удобнее Trigger Type Image: покупатель кликает по фото и сразу открывает увеличенный просмотр. Trigger Type Button стоит выбирать, если вы хотите явно показать иконку открытия или не хотите, чтобы любой клик по изображению запускал lightbox. Show on Hover лучше применять осторожно: на мобильных устройствах hover-поведение не ощущается так же, как на настольном экране.

Zoom: когда включать и какой Magnify выбрать

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

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

Video: YouTube, Vimeo и Self Hosted

Видео добавляется не в каждом сценарии. В документации Crocoblock для WooCommerce product video описаны Video Type, варианты YouTube, Vimeo и Self Hosted, placeholder и Video URL. Также в настройках виджета можно выбрать, показывать видео в слайдере или popup, задать Aspect Ratio, Autoplay, Loop, Overlay Color и icon.

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

Style: не пытайтесь лечить структуру стилями

JetStyleManager может помочь со стилями в Gutenberg, а Elementor даёт свои параметры оформления. Но стиль не должен компенсировать неправильный источник, плохой порядок картинок или слишком мелкий макет. Сначала настройте механику, потом отступы, рамки, цвет фона, border radius, стрелки и состояние активной миниатюры.

Если вам нужен безопасный небольшой CSS-приём, используйте дополнительный класс самого блока, а не внутренние классы плагина. В документации для Gallery Grid упоминается поле Additional CSS Class(es) в Advanced. Например, можно дать блоку класс jpg-compact-grid и добавить мягкое ограничение для картинок в настройках темы или дочерней теме:

.jpg-compact-grid img {
  border-radius: 8px;
}

.jpg-compact-grid a:focus-visible,
.jpg-compact-grid button:focus-visible {
  outline: 2px solid #2f6fed;
  outline-offset: 3px;
}

Этот пример не трогает ядро WordPress, WooCommerce, тему или файлы плагина. Он влияет только на блок, которому вы сами добавили класс. Проверка простая: откройте страницу товара, перейдите по элементам клавиатурой и убедитесь, что фокус виден. Откат - удалить класс у блока или убрать CSS.

Практический пример: собираем галерею для товара с фото, миниатюрами, zoom и видео

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

Цель

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

Подготовка

Нужны активные WordPress, WooCommerce и JetProductGallery. Если вы собираете шаблон через Elementor, используйте шаблон одиночного товара. Если работаете с Gutenberg, откройте страницу или шаблон, где можно добавить блок Gallery Slider. В карточке товара заранее добавьте главное изображение, 4-6 изображений галереи и, если нужно, видео.

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

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

1. Откройте шаблон одиночного товара или тестовую страницу.
2. Добавьте Gallery Slider widget или block в область, где должна быть галерея.
3. В General выберите Source WooCommerce Products. Если это не шаблон текущего товара, укажите Product ID.
4. Включите Featured Image, если хотите показывать главное изображение вместе с галереей.
5. В Images задайте подходящий размер изображений и размер миниатюр. Не ставьте слишком маленькие значения для товара с zoom.
6. В Slider выберите Direction Horizontal для первого теста. Включите navigation и pagination с thumbnails, если покупателю важно видеть следующие кадры.
7. Включите Enable Gallery или Photoswipe Gallery, выберите Trigger Type Image и оставьте только нужные controls.
8. Включите Enable Zoom и задайте умеренный Zoom Magnify.
9. Если есть видео, добавьте его в карточку товара или настройки видео по документации Crocoblock, выберите Video Type и placeholder.
10. Обновите шаблон и откройте публичную страницу товара.

Проверка

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

Нюанс, который часто пропускают

Если видео или lightbox не срабатывают в Gutenberg, проверьте trigger icon. В официальной статье про ручное добавление Gallery Grid есть примечание: некоторые функции в редакторе блоков не отображаются без вручную выбранной иконки. Поэтому симптом "настройка включена, но кнопки нет" не всегда означает конфликт плагина. Иногда не хватает назначенного значка.

Как проверять результат на сайте, а не только в редакторе

Редактор показывает приблизительный вид, но решение о качестве нужно принимать по публичной странице. У покупателя нет панели Elementor, режима редактирования и подсказок. Он видит только товар, изображения, скорость загрузки, клики и поведение на своём устройстве.

Проверка на уровне товара

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

Затем проверьте каждое действие:

• Клик по миниатюре меняет главное изображение.
• Lightbox открывается только тогда, когда пользователь ожидает его открыть.
• Стрелки и счётчик в lightbox не перекрывают важную часть изображения.
• Zoom показывает деталь, а не размытое пятно.
• Видео открывается, имеет корректное соотношение сторон и не запускается навязчиво, если autoplay не нужен.
• На мобильной ширине миниатюры, стрелки и подписи остаются нажимаемыми.

Проверка скорости и кэша

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

Проверка вариативных товаров

Официальная страница Crocoblock отмечает совместимость с variable и variable-subscription product types в истории обновлений. Но на конкретном сайте важно проверить, как изображения меняются при выборе цвета, размера или другого атрибута. Откройте товар, выберите разные вариации и убедитесь, что галерея не показывает устаревший набор кадров.

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

Частые проблемы и диагностика

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

Виджет или блок не отображается в редакторе

Симптом: JetProductGallery установлен, но Gallery Grid, Gallery Slider, Gallery Modern или Gallery Anchor Navigation не видны в Elementor или Gutenberg.

Возможная причина: нужный виджет отключён в настройках JetWooProductGallery, редактор не обновил список элементов, либо открыт не тот редактор.

Что проверить: путь Crocoblock - JetPlugins Settings - JetWooProductGallery - Widgets, активность плагина, тип редактора и кэш админ-панели.

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

Галерея пустая или показывает не тот товар

Симптом: блок добавлен, но изображений нет, либо выводятся картинки другого товара.

Возможная причина: выбран неправильный Source, Product ID пустой или неверный, шаблон открыт не как одиночный товар, у товара нет Product Gallery.

Что проверить: источник WooCommerce Products, ID товара, наличие главного изображения и дополнительных картинок в карточке товара, контекст шаблона.

Как исправить: для Single Product template оставьте текущий товар, для обычной страницы укажите ID вручную, а для Manual Select выберите изображения через Media Library. Если используется Post Types, проверьте точный ключ галерейного метаполя.

Lightbox включён, но не открывается

Симптом: Enable Gallery или Photoswipe Gallery активирован, но клик по изображению ничего не делает или кнопка не видна.

Возможная причина: не выбран Trigger Type, не назначена иконка для кнопочного триггера, функцию ломает оптимизация JavaScript, либо поверх изображения лежит другой элемент шаблона.

Что проверить: Trigger Type Image или Button, наличие иконки, Show on Hover, работу в инкогнито и после отключения минификации.

Как исправить: для первого теста поставьте Trigger Type Image, отключите Show on Hover, назначьте иконку, очистите кэш. Если lightbox начинает работать без оптимизации, настройте исключения в плагине кэша.

Zoom показывает плохое качество

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

Возможная причина: исходное изображение слишком маленькое, выбран неподходящий Image Size, Zoom Magnify завышен, оптимизатор заменяет файлы на слишком сжатые версии.

Что проверить: размер оригинала в Media Library, настройки Product Image в WooCommerce, Image Size в блоке, силу Magnify и правила оптимизации изображений.

Как исправить: загрузите более крупный исходник, выберите качественный размер вывода, уменьшите Magnify или отключите zoom для товара, где детальное увеличение не добавляет пользы.

Слайдер ломается на мобильном экране

Симптом: миниатюры слишком мелкие, стрелки перекрывают товар, появляется горизонтальная прокрутка или вертикальный слайдер занимает слишком много места.

Возможная причина: направление слайдера и thumbnails controller выбраны под десктоп, контейнер темы слишком узкий, стиль миниатюр не адаптирован.

Что проверить: Direction, Slides per View, Space Between, Position миниатюр, ширину родительской колонки, мобильные настройки Elementor или блока.

Как исправить: уменьшите количество миниатюр, поменяйте vertical на horizontal для мобильной ширины, проверьте контейнер и отступы. Если макет темы не даёт нормальной ширины, лучше выбрать Grid или Modern для этого шаблона.

Видео не запускается или выглядит как пустое место

Симптом: видео добавлено, но в галерее нет заметного триггера, ролик не открывается или нарушено соотношение сторон.

Возможная причина: неверный Video Type, неправильная ссылка, отсутствует placeholder или trigger icon, включены конфликтующие правила блокировки внешних iframe.

Что проверить: Video Type, Video URL, Aspect Ratio, placeholder, иконку, настройки popup или display in slider.

Как исправить: начните с одного ролика YouTube или Vimeo, задайте placeholder и иконку, отключите autoplay на первом тесте. Если используется Self Hosted, проверьте формат файла и то, как сайт отдаёт видео посетителю.

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

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

Возможная причина: кэш страницы, кэш объекта, CDN, кеширование браузера, не обновлён шаблон или редактируется не та копия шаблона.

Что проверить: кнопку Publish, Update или Save, активный шаблон товара, очистку кэша сайта, инкогнито и URL товара.

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

SEO, скорость и удобство: что важно для товарной галереи

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

SEO и изображения

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

Не пишите один и тот же alt на все фото. Для главного изображения используйте название товара, для деталей - конкретное описание: материал, цвет, крупный план, вид сбоку, комплект. CrocoBlock JetProductGallery выводит визуальный блок, но смысл изображений задаёте вы в медиатеке и товарной карточке.

Скорость

Если в галерее 12 больших изображений и видео, страница будет тяжелее, чем товар с тремя оптимизированными фото. Используйте столько медиа, сколько нужно для выбора. Для одежды, мебели и техники 5-8 кадров часто полезны. Для простого аксессуара может хватить 3-4.

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

Удобство

Не каждый эффект улучшает UX. Autoplay в слайдере может мешать, если покупатель рассматривает детали. Infinite loop удобен для длинной галереи, но иногда сбивает понимание, где начало набора. Share-кнопки в lightbox могут быть лишними для обычного магазина. Counter полезен, когда изображений много, но не нужен в маленькой галерее.

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

Когда CrocoBlock JetProductGallery будет удачным выбором

CrocoBlock JetProductGallery стоит использовать, если вам нужна управляемая товарная галерея в WordPress и WooCommerce: разные макеты, slider, grid, modern view, anchor navigation, lightbox, zoom, видео и выбор источника изображений. Особенно хорошо плагин ложится на сайты, где шаблон товара собирается через Elementor, Gutenberg или инструменты Crocoblock.

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

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

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