Как сделать кастомное отображение изображений товара в woocommerce?
На странице одного продукта woocommerce миниатюры галереи по умолчанию отображаются так:
Т.е. активное изображение большое и находится наверху. Неактивные же маленькие и находятся внизу.
Я хочу чтобы было так:
Подскажите пожалуйста как это сделать?
В thems/тема/woocommerce/single_product_image.php довольно большой кусок кода, который отвечает (я не уверен) за именно такой вывод, поэтому я не стал его прикреплять.
Дополнительно:
Ответы:
Варианты
1. Переписать галерею. В дочерней теме, если тема не самописная.
2. Найти плагин галереи с нужными задачами
3. Сменить тему, где такая галерея уже имеется.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Кастомное отображение галереи товара WooCommerce лучше делать через дочернюю тему или хуки, а не править файлы WooCommerce/родительской темы напрямую. Шаблон галереи обычно находится в
woocommerce/single-product/product-image.phpиproduct-thumbnails.php, но конкретная тема могла переопределить их.Правильный путь:
Например, путь в дочерней теме:
wp-content/themes/child-theme/woocommerce/single-product/product-image.php
Если нужно, чтобы миниатюры были сбоку, часто достаточно CSS, если HTML уже содержит главное изображение и thumbnails:
.woocommerce-product-gallery { display: grid; grid-template-columns: 90px 1fr; gap: 16px; } .woocommerce-product-gallery .flex-control-thumbs { order: -1; display: flex; flex-direction: column; gap: 10px; }
Но это зависит от галереи вашей темы. Некоторые темы используют Swiper/Slick/Flexslider и переопределяют структуру. Тогда CSS может быть недостаточно, придётся менять JS-инициализацию.
Если нужен не просто другой порядок, а полноценная галерея как в референсе, иногда проще поставить плагин product gallery и выбрать layout. Но если дизайн строго кастомный, лучше переписать шаблон в дочерней теме.
После правки обязательно проверьте мобильную версию. Боковые миниатюры на десктопе часто нужно превращать в горизонтальную ленту на телефоне, иначе галерея станет слишком узкой.