Привет ! Мы продолжаем создавать свой интернет-магазин с помощью Супер плагина Woocommerce ! Сегодня вы узнаете как изменить размер изображений товаров на главной странице интернет-магазина Woocommerce. Вы сможете изменить размер изображений на странице с каталогом товаров, где отображаются анонсы товаров. Можно изменить размер изображения на единичной странице товара. Можно изменить размер изображения миниатюры товара, которые отображаются в галереи товара под основным изображением товара.
Чтобы изменить размер изображений товаров, перейдите на страницу: Woocommerce – Настройки – Товары – Отображение.
Далее, внизу страницы вы сможете изменить размер изображения товаров. Здесь у вас будет три параметра для изменения размера:
– Изображения каталога, вы сможете изменить размер изображений на странице “Магазин” или “Каталог” где отображаются анонсы товаров.
– Изображение единичного товара, вы сможете изменить размер изображений на странице товара.
– Миниатюра товара, вы сможете изменить размер изображений в галереи товара, где отображаются дополнительные изображения товара.
– Сохраните изменения.
Так выглядят изображения в каталоге по умолчанию:
А так выглядит каталог после того как я уменьшил размер изображений в два раза:
Если после изменения изображений размеры остались прежними, вам необходимо – регенерировать изображения.
Остались вопросы ? Напиши комментарий ! Удачи !
Добрый день.
WooCommerce 3.3.3. В карточку товара залиты изображения, при пролистывании они прыгают – все разного размера по высоте. Раньше в настройках W00Commerce был пункт “Отображение”, где можно было задать размеры и жесткую обрезку, как описано у Вас в статье.
В новой версии подобного не нахожу, во “Внешний вид”–“Настроить” есть только “Ширина основного изображения” и “Ширина миниатюры” + обрезка миниатюры.Подскажите пожалуйста где задать изображения для самой карты товара в новой версии WordPress?
Добрый день. Не понял, что значит для карты товара?
В карте товара галерея, скриншот:
Не получается задать высоту, все изображения прыгают
И не получится. Если вы укажите высоту, изображения перестанут быть адаптивными. Здесь уже всё зависит от исходных размеров изображений. В Woocommerce теперь так, на любой теме. Никакой ошибки здесь нет. Вы либо грузите фото одинакового размера, либо можно плагин поставить. Рекомендую – WooCommerce Dynamic Gallery
Илья, Ваша статься не актуальна, так как и Ваш ответ Александру! В новой версии woocommerce убрали функцию жёсткой обрезки, что повлекло за собой кривую вёрстку. В каталоге товаров изображения отображаются разной высотой. И исправить это невозможно, так как есть картинки альбомного вида, есть книжного, а есть равносторонний квадрат. В галереи товаров та же ситуация – туда сюда прыгают картинки.
Также, каждый вправе решать оставлять адаптивные изображения или нет. Здесь же всё убрали. Я считаю, кто хочет увидеть полное изображение, может перейти в галерею и нажать на него – и оно будет в полном виде!
Сейчас же получается не каталог товаров, а кривое уродство!!
И при чём здесь этот плагин? Он не может решить проблему Александра.
Честно, поражаюсь разработчикам вукоммерс. Опять нужно лезть в css и всё менять руками
Как раз таки Александру я всё чётко ответил. Плагин этот поможет 100% лично ставил его в интернет-магазин и настраивал. На счёт каталога, смотрите новые настройки Woocommerce, там ответ на ваш вопрос. Будьте внимательней.
Спасибо большое за помощь!
Не знаю каким образом данный плагин смог решить проблему. У плагина есть два режима отображения галереи товаров – fixed и dinamyc. Ни первый, ни второй вариант не даёт адекватного отображения. В первом случае остаются отступы по бокам у изображения книжного вида. Во втором случае (dynamic) – остаются отступы сверху и снизу в книжном изображении. Вот скриншот
Для примера, как всё нормально выглядит на старой версии вукоммерс.
“Спасибо вукоммерс” за то, что “они идут в ногу со времен” и дают просто и без лишних движений настроить обычное отображение изображений. UX и UI там “боги оптимизаций”…. И это в 2018 году :D XD
Плагин рекомендованный Ильей сейчас настраиваю. В целом изображения перестали прыгать, но сам плагин косячно отображается у меня с темой Flatsome, еще пока настраиваю. WooCommerce конечно накосячили с обновлением.
++ тоже самое белые края рядом с фото((
раньше было все отлично. выход вижу следующий – откатывать WooCommerce до версии 3.1, где у меня все корректно работало. изображения и сама галерея были адаптивны, изображения сами обрезались под нужный размер.
Есть такая идея.
Вместо max-width: 100% !important ставим min-width: 100% !important; Тогда изображение будет на всю область. Но, оно будет видно верхним куском.
Можно добавить position: relative; top: -25%;
Тогда отображение будет смещено ближе к центру.
Но, тогда и изображения с альбомным видом будут смещаться.
Если бы для изображений книжного вида можно было добавить class, и только для них применять свойства, задача была бы решена..
Кстати, Flatsome классный шаблон)
Я сейчас пробую откатить до WooCommerce 3.1. И буду смотреть как будет работать) С ним все было отлично.
Напишите как результат?) Если всё ок, тоже поставлю эту версию
У меня последняя версия темы Flatsome, обновил ее вместе с WooCommerce ранее.. Видимо все таки в самой теме разработчики что-то адаптировали под новую версию WooCommerce 3.3. Раньше старая тема и WooCommerce 3.1 корректно с картинками работали, а новая тоже самое косячи с изображениями.
Пришлось в фотошопе править. Успехов!)
Я поставил плагин Twist – Woocommerce Product Gallery Slider. Картинки не прыгают, так как работает перелистывание только эскизов. В модальном окне красиво всё.
В общем, других вариантов пока не вижу..
В Woocommerce при настройке страницы “Магазин” в теме шаблона при загрузке изображения есть надпись “Загрузите большое изображение баннера, которое будет отображаться в качестве фона в описании магазина”. Каких размеров должно быть изображение,чтобы не было размытого изображения?
Посмотрите в Яндекс Метрике на каком размере экрана чаще всего смотрят ваш сайт. Примерно таким по ширине можно сделать изображение. Если шаблон адаптивный, изображение на любом экране будет нормально отображаться.
Вот такой плагин можете себе ещё поставить – Definitely allow mobile zooming
Илья, спасибо за помощь.