CodeCanyon WooCommerce Product Image Zoom - Плагин WordPress

Руководство по настройке CodeCanyon WooCommerce Product Image Zoom для товарных изображений

CodeCanyon WooCommerce Product Image Zoom нужен не для того, чтобы просто добавить красивый эффект на карточку товара. В хорошем магазине увеличение изображения помогает покупателю рассмотреть материал, фактуру, форму, фурнитуру, комплектацию и различия между вариантами товара до оформления заказа. В этом руководстве разберём, как подойти к плагину как к рабочему инструменту WooCommerce: что проверить перед установкой, где искать настройки, какой режим выбрать для разных товаров, как подготовить 360-градусные изображения и как понять, что результат не ломает страницу.

В официальных источниках продукт встречается как WooCommerce Product Image Zoom Plugin, Magnify on Hover & Click и как Product Image Zoom for WooCommerce от Extendons. Функционально речь идёт об одном классе задачи: увеличить товарную фотографию при наведении, открыть крупное изображение в lightbox по клику и, при наличии подготовленного набора фотографий, показать товар в 360-градусном вращении. Поэтому дальше я буду называть его кратко - Product Image Zoom, а точное название из задания оставлю там, где оно важно для поиска и скачивания.

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

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

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

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

Три пользовательских сценария

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

• Magnifier помогает быстро рассмотреть фрагмент изображения при наведении. Это лучший стартовый режим для страниц товара с хорошими крупными фото.
• Lightbox открывает крупное изображение по клику и подходит, когда покупателю нужно спокойно пролистать галерею в большем размере.
• Rotate 360 работает только при наличии серии фотографий с разных ракурсов. Этот режим полезен для товаров, где форма важнее одной крупной фактуры.

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

Кому подходит Product Image Zoom и где он будет лишним

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

Когда плагин стоит включить

Product Image Zoom будет уместен, если у вас есть крупные фотографии, несколько изображений в галерее и покупатели часто уточняют детали перед покупкой. В таком магазине zoom снижает неопределённость: пользователь не задаёт менеджеру вопрос о фактуре, шве, порте, разъёме или оттенке, а сам рассматривает нужный участок.

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

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

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

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

Что проверить перед установкой на рабочий магазин

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

Качество и размер исходных изображений

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

Тема, галерея и конструктор страниц

Многие WooCommerce-темы меняют шаблон изображения товара. Некоторые добавляют свой lightbox, свой слайдер миниатюр или свои эффекты при наведении. Если Product Image Zoom включить поверх уже изменённой галереи, могут появиться двойные иконки, конфликт клика, пропадающие миниатюры или неправильная высота блока. Перед внедрением откройте тестовую копию магазина и проверьте:

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

Кеш, минификация и отложенная загрузка

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

Тестовая витрина

Не начинайте с десятков товаров. Создайте или выберите один простой товар, один товар с несколькими фото и один вариативный товар. Для 360-градусного режима подготовьте отдельный набор кадров с последовательными именами. Такой набор даст честную картину: magnifier проверяется на одиночной странице, lightbox - на галерее, 360 - на продукте или вариации, а витринный режим - на категории.

Минимальный набор товаров для проверки

Для первого теста лучше взять не самый красивый товар, а набор, который показывает разные состояния магазина. Первый товар - с одним большим изображением, чтобы проверить чистый magnifier без влияния галереи. Второй - с несколькими миниатюрами, потому что lightbox и переключение изображений чаще ломаются именно на галерее. Третий - вариативный, чтобы увидеть, обновляется ли zoom после выбора цвета, размера или комплектации. Если 360-градусный режим нужен магазину, добавьте четвёртый товар с подготовленным ZIP-набором и отдельный вариант без ZIP, чтобы проверить fallback.

Как зафиксировать исходное состояние

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

Установка и первичная проверка после активации

Установка выполняется как у обычного WordPress-плагина из ZIP-архива. В админ-панели откройте Plugins, затем Add New, используйте Upload Plugin, выберите архив, нажмите Install Now и после установки активируйте плагин через Activate Plugin. Документация WooCommerce указывает путь к настройкам: WooCommerce -> Settings -> Product Image Zoom -> General Settings.

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

Мини-проверка перед настройкой

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

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

Карта настроек: что включать сначала, а что оставить на потом

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

Product page tool

Параметр Product page tool выбирает инструмент для одиночной страницы товара. Для первого запуска чаще всего разумно выбрать magnifier. Он показывает ценность zoom без сильного изменения поведения карточки. Lightbox лучше включать, когда в галерее есть несколько крупных изображений и покупателю нужно просматривать их в большом окне. Rotate 360 стоит включать только там, где у товаров действительно подготовлена серия кадров.

Rotate 360 alternative

Этот параметр важен для магазинов, где 360-градусные наборы есть не у всех товаров. Если покупатель открывает товар без подготовленного архива кадров, плагин должен показать альтернативный инструмент, например magnifier или lightbox. Иначе пользователь увидит неполный сценарий: место под эффект есть, а полезного просмотра нет. Fallback для 360-градусного режима лучше настроить до массового включения функции.

Shop page tool

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

Exclude products и Exclude Categories

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

Auto slider in lightbox

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

Логика безопасных значений

Безопасная настройка не означает «минимальная». Она означает, что вы включаете только тот слой, который можно быстро проверить и быстро откатить. Для начала достаточно magnifier на одиночной странице товара, понятного fallback для 360 и отключённого или ограниченного режима на витрине. Когда этот набор работает, можно добавлять lightbox, менять тип magnifier и тестировать shop page tool. Такой порядок особенно важен на магазинах с большим количеством плагинов, потому что каждый новый эффект добавляет свою обработку клика, наведения или галереи.

Когда исключения становятся не костылём, а нормальной настройкой

Исключения часто воспринимают как способ «спрятать ошибку» на проблемном товаре. Для Product Image Zoom это скорее рабочий инструмент сегментации. Если категория содержит подарочные карты, цифровые файлы, простые наборы, товары с маленькими иконками или позиции, где покупатель смотрит характеристики, а не фото, исключение делает магазин чище. В большой витрине лучше включить zoom там, где он помогает выбрать, и не загружать его там, где изображение не несёт дополнительной информации.

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

Magnifier: как выбрать режим увеличения под товар

Magnifier - самая частая причина установки Product Image Zoom, но внутри него есть несколько вариантов поведения. Официальные источники перечисляют basic, tint, inner zoom, lens zoom, fade, easing, mouse wheel zoom, image constraint и window. В статье нет смысла пересказывать их как сухой список. Важно понять, какой режим меньше мешает покупке и лучше показывает реальную деталь.

Basic и inner zoom

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

Window и позиция zoom-box

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

Lens zoom

Lens zoom визуально понятен: покупатель видит область, которую «линза» увеличивает. У него есть настройки размера и формы линзы. Этот режим хорош для текстур, мелких швов, маркировки, гравировки, портов, упаковки и деталей, где важна точная область фокуса. Но если изображение маленькое, линза быстро покажет ограничение исходника: вместо деталей будет размытый фрагмент.

Tint, fade, easing и mouse wheel

Tint добавляет цветовую подложку или эффект затемнения, fade и easing меняют ощущение анимации, mouse wheel позволяет управлять увеличением колесом мыши. Эти параметры стоит включать после базовой проверки, а не в первый день. Чем больше эффектов, тем выше шанс, что тема, оптимизация скриптов или мобильное поведение потребуют дополнительной настройки.

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

360-градусный просмотр: где он полезен и как подготовить файлы

Rotate 360 отличается от magnifier тем, что требует отдельной подготовки контента. По документации, в настройках 360-градусного режима можно включить вращение, авто-вращение, загрузку при открытии страницы и кнопку навигации. На странице редактирования товара в блоке данных появляется опция Rotate 360 Image, где загружается ZIP-архив с несколькими фотографиями товара с разных углов, задаётся расширение файлов и скорость авто-вращения.

Как подготовить набор кадров

Серия должна быть последовательной. Документация приводит пример именования вроде 001, 002, 003. Это не декоративная рекомендация: если кадры названы хаотично, вращение может выглядеть рывками или показывать товар в неправильном порядке. Лучше заранее собрать фотографии в отдельную папку, проверить порядок, привести формат к одному расширению и только после этого упаковать их в ZIP.

Скорость и загрузка при открытии страницы

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

Вариативные товары

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

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

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

Цель

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

Подготовка

• У товара есть крупное основное изображение и несколько изображений галереи.
• Для вариаций заполнены изображения, чтобы смена цвета не оставляла старое фото.
• Для 360-градусных вариантов подготовлены ZIP-архивы с последовательными именами кадров.
• На тестовом сайте отключена агрессивная минификация JavaScript или добавлены временные исключения для проверки.

Шаги

1. В General Settings выберите magnifier как инструмент для страницы товара.
2. Для Rotate 360 alternative выберите lightbox или magnifier, чтобы товары без серии кадров не оставались без полезного просмотра.
3. На странице магазина сначала не включайте тяжёлый режим. Проверьте одиночную страницу товара.
4. В Magnifier Settings выберите режим lens или window, затем настройте размер zoom-box или линзы.
5. Откройте редактирование товара и добавьте 360-градусный ZIP там, где набор действительно готов.
6. Сохраните товар и настройки плагина, очистите кеш, откройте страницу товара в приватном окне.

Проверка

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

Нюанс

Если при смене вариации zoom продолжает показывать старое изображение, сначала проверьте сами изображения вариаций и галерею товара. Если там всё правильно, временно отключите кеш, объединение скриптов и сторонние плагины галереи. Такой симптом часто связан не с одной настройкой Product Image Zoom, а с тем, как тема или другой плагин обновляет WooCommerce-галерею после выбора вариации.

Практичные идеи применения по типам магазина

Product Image Zoom не обязан работать одинаково на всех товарах. Его сильная сторона в том, что можно выбрать инструмент под контекст: magnifier для фактуры, lightbox для галереи, Rotate 360 для формы, исключения для простых категорий. Ниже не рекламные идеи, а рабочие сценарии, которые помогают понять, где настройка даст реальную пользу.

Одежда, ткани и аксессуары

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

Электроника и техника

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

Категории с быстрым сравнением

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

Премиальные и дорогие товары

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

Как проверить результат на странице товара, в категории и на мобильных устройствах

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

Одиночная страница товара

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

Страница магазина и категории

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

Мобильный и планшетный вид

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

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

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

Что не нужно исправлять как ошибку

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

Скорость и SEO-аккуратность

Zoom не заменяет базовую работу с изображениями. Alt-тексты, имена файлов, сжатие, WebP или другой современный формат, правильные размеры и отсутствие лишних тяжёлых 360-наборов по-прежнему важны. Не стоит включать самый тяжёлый режим на весь каталог, если часть товаров не получает от него пользовательской пользы. Для SEO важнее, чтобы страница быстро загружалась, изображения были описаны и покупатель не уходил из-за неудобного просмотра.

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

Безопасная адаптация внешнего вида без правки плагина

У Product Image Zoom есть собственные настройки magnifier, размера zoom-box, курсора, положения и 360-градусного поведения. Поэтому начинать надо с них. Кодовые правки стоит использовать только как аккуратное дополнение к теме, а не как способ переписать логику плагина. Я не нашёл публично подтверждённых hooks или filters именно этого продукта, поэтому не буду придумывать PHP API. Безопасный вариант - небольшой CSS, который касается стандартного контейнера галереи WooCommerce и помогает оставить место для внешнего окна увеличения.

Такой фрагмент можно добавить через Appearance -> Customize -> Additional CSS или через дочернюю тему. Он не меняет ядро WordPress, WooCommerce или плагина. Перед применением проверьте селекторы в инспекторе браузера: тема может использовать собственный шаблон галереи.

.single-product div.product .woocommerce-product-gallery {
  max-width: 620px;
}

.single-product div.product .woocommerce-product-gallery__image img {
  height: auto;
}

Задача этого CSS - не «починить» zoom, а не дать галерее растягиваться непредсказуемо в теме, где колонка товара слишком широкая или изображение получает жёсткую высоту. После вставки откройте 2-3 товара, проверьте desktop и mobile, затем сравните до и после. Если тема стала хуже выравнивать карточку, удалите фрагмент из Additional CSS - это и есть безопасный откат.

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

Диагностика: почему zoom, lightbox или 360 могут работать неправильно

Ошибки у zoom-плагинов часто выглядят одинаково, но причины разные. Ниже собран путь диагностики для Product Image Zoom и похожих WooCommerce-галерей: сначала проверяем изображение, потом настройки, затем тему, кеш и вариативные товары. Такой порядок экономит время и не заставляет отключать половину сайта без причины.

Увеличение есть, но деталей не видно

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

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

Lightbox не открывается или открывается дважды

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

Проверьте, нет ли в теме уже включённого lightbox для WooCommerce. Если есть два обработчика клика, они могут мешать друг другу. Временно отключите lightbox темы или выберите в Product Image Zoom только magnifier. После очистки кеша проверьте страницу товара без авторизации.

Window zoom перекрывает цену или кнопку покупки

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

Причина обычно в позиции zoom-box и ширине макета. Измените положение окна на другую сторону или выберите inner/lens-режим. Если тема очень узкая, не пытайтесь заставить window работать любой ценой. Для таких карточек аккуратный lightbox часто удобнее.

360-градусное вращение не появляется

Симптом: режим выбран, но на товаре нет вращения или кнопки.

Проверьте, включён ли Rotate 360 в настройках, загружен ли ZIP-архив в данных товара, совпадает ли указанное расширение с файлами, идут ли кадры в последовательном порядке. Если у товара нет 360-набора, должен сработать alternative tool. Если не срабатывает и он, вернитесь к общему инструменту страницы товара и проверьте кеш.

Zoom ломается после выбора вариации

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

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

Эффект есть в админской сессии, но не виден покупателю

Симптом: у администратора всё работает, а в приватном окне или у клиента эффект не запускается.

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

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

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

Когда CodeCanyon WooCommerce Product Image Zoom будет удачным выбором

CodeCanyon WooCommerce Product Image Zoom стоит использовать, если у магазина есть визуально важные товары, качественные изображения и понятная задача: показать деталь, открыть крупную галерею или дать 360-градусный обзор подготовленных товаров. Его сильная сторона - сочетание magnifier, lightbox, Rotate 360, исключений и отдельных настроек для страницы товара и витрины.

Не спешите включать все возможности сразу. Начните с одного тестового товара, выберите безопасный magnifier, настройте fallback для 360-градусного режима, проверьте тему и кеш, затем добавьте lightbox, витринный режим и 360-наборы там, где они действительно помогают покупателю. Такой подход даёт контролируемый результат и не превращает карточку товара в набор эффектов ради эффектов.

Если после проверки продукт подходит вашему каталогу, можно скачать CodeCanyon WooCommerce Product Image Zoom, установить его на тестовую копию магазина и пройти настройку по этому руководству. Финальная проверка простая: покупатель должен быстрее понять товар, а страница должна оставаться быстрой, понятной и удобной на desktop и mobile.