Изменить размер изображений товаров в магазине Woocommerce — ТОП
размер изображений товаров

Изменить размер изображений товаров в магазине Woocommerce


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

Чтобы изменить размер изображений товаров, перейдите на страницу: Woocommerce — Настройки — Товары — Отображение.

 

настройки Woocommerce

 

Далее, внизу страницы вы сможете изменить размер изображения товаров. Здесь у вас будет три параметра для изменения размера:

 

— Изображения каталога, вы сможете изменить размер изображений на странице «Магазин» или «Каталог» где отображаются анонсы товаров.

— Изображение единичного товара, вы сможете изменить размер изображений на странице товара.

— Миниатюра товара, вы сможете изменить размер изображений в галереи товара, где отображаются дополнительные изображения товара.

Сохраните изменения.

 

изменить размер изображений товаров

 

Так выглядят изображения в каталоге по умолчанию:

 

каталог Woocommerce

 

А так выглядит каталог после того как я уменьшил размер изображений в два раза:

 

каталог Woocommerce

 

размер изображений Woocommerce

 

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

 

Остались вопросы ? Напиши комментарий ! Удачи !

 






info-effect.ru
Изменить размер изображений товаров в магазине Woocommerce обновлено: Январь 24, 2017 автором: Илья Журавлёв

19 комментариев

  • Александр 05.03.2018 Ответить

    Добрый день.
    WooCommerce 3.3.3. В карточку товара залиты изображения, при пролистывании они прыгают — все разного размера по высоте. Раньше в настройках W00Commerce был пункт «Отображение», где можно было задать размеры и жесткую обрезку, как описано у Вас в статье.
    В новой версии подобного не нахожу, во «Внешний вид»—«Настроить» есть только «Ширина основного изображения» и «Ширина миниатюры» + обрезка миниатюры.Подскажите пожалуйста где задать изображения для самой карты товара в новой версии WordPress?

    • Илья Журавлёв 06.03.2018 Ответить Автор

      Добрый день. Не понял, что значит для карты товара?

      • Александр 06.03.2018 Ответить

        В карте товара галерея, скриншот:
        Не получается задать высоту, все изображения прыгают

        • Илья Журавлёв 06.03.2018 Ответить Автор

          И не получится. Если вы укажите высоту, изображения перестанут быть адаптивными. Здесь уже всё зависит от исходных размеров изображений. В Woocommerce теперь так, на любой теме. Никакой ошибки здесь нет. Вы либо грузите фото одинакового размера, либо можно плагин поставить. Рекомендую — WooCommerce Dynamic Gallery

  • Андрей 06.03.2018 Ответить

    Илья, Ваша статься не актуальна, так как и Ваш ответ Александру! В новой версии woocommerce убрали функцию жёсткой обрезки, что повлекло за собой кривую вёрстку. В каталоге товаров изображения отображаются разной высотой. И исправить это невозможно, так как есть картинки альбомного вида, есть книжного, а есть равносторонний квадрат. В галереи товаров та же ситуация — туда сюда прыгают картинки.
    Также, каждый вправе решать оставлять адаптивные изображения или нет. Здесь же всё убрали. Я считаю, кто хочет увидеть полное изображение, может перейти в галерею и нажать на него — и оно будет в полном виде!
    Сейчас же получается не каталог товаров, а кривое уродство!!
    И при чём здесь этот плагин? Он не может решить проблему Александра.
    Честно, поражаюсь разработчикам вукоммерс. Опять нужно лезть в css и всё менять руками

    • Илья Журавлёв 06.03.2018 Ответить Автор

      Как раз таки Александру я всё чётко ответил. Плагин этот поможет 100% лично ставил его в интернет-магазин и настраивал. На счёт каталога, смотрите новые настройки Woocommerce, там ответ на ваш вопрос. Будьте внимательней.

      • Александр 06.03.2018 Ответить

        Спасибо большое за помощь!

  • Андрей 06.03.2018 Ответить

    Не знаю каким образом данный плагин смог решить проблему. У плагина есть два режима отображения галереи товаров — fixed и dinamyc. Ни первый, ни второй вариант не даёт адекватного отображения. В первом случае остаются отступы по бокам у изображения книжного вида. Во втором случае (dynamic) — остаются отступы сверху и снизу в книжном изображении. Вот скриншот
    Для примера, как всё нормально выглядит на старой версии вукоммерс.

    «Спасибо вукоммерс» за то, что «они идут в ногу со времен» и дают просто и без лишних движений настроить обычное отображение изображений. UX и UI там «боги оптимизаций»…. И это в 2018 году :D XD

    • Александр 06.03.2018 Ответить

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

    • Александр 06.03.2018 Ответить

      ++ тоже самое белые края рядом с фото((
      раньше было все отлично. выход вижу следующий — откатывать WooCommerce до версии 3.1, где у меня все корректно работало. изображения и сама галерея были адаптивны, изображения сами обрезались под нужный размер.

  • Андрей 06.03.2018 Ответить

    Есть такая идея.
    Вместо max-width: 100% !important ставим min-width: 100% !important; Тогда изображение будет на всю область. Но, оно будет видно верхним куском.
    Можно добавить position: relative; top: -25%;
    Тогда отображение будет смещено ближе к центру.
    Но, тогда и изображения с альбомным видом будут смещаться.
    Если бы для изображений книжного вида можно было добавить class, и только для них применять свойства, задача была бы решена..

    Кстати, Flatsome классный шаблон)

    • Александр 06.03.2018 Ответить

      Я сейчас пробую откатить до WooCommerce 3.1. И буду смотреть как будет работать) С ним все было отлично.

  • Андрей 06.03.2018 Ответить

    Напишите как результат?) Если всё ок, тоже поставлю эту версию

    • Александр 07.03.2018 Ответить

      У меня последняя версия темы Flatsome, обновил ее вместе с WooCommerce ранее.. Видимо все таки в самой теме разработчики что-то адаптировали под новую версию WooCommerce 3.3. Раньше старая тема и WooCommerce 3.1 корректно с картинками работали, а новая тоже самое косячи с изображениями.
      Пришлось в фотошопе править. Успехов!)

      • Андрей 07.03.2018 Ответить

        Я поставил плагин Twist — Woocommerce Product Gallery Slider. Картинки не прыгают, так как работает перелистывание только эскизов. В модальном окне красиво всё.
        В общем, других вариантов пока не вижу..

  • Ольга 19.03.2018 Ответить

    В Woocommerce при настройке страницы «Магазин» в теме шаблона при загрузке изображения есть надпись «Загрузите большое изображение баннера, которое будет отображаться в качестве фона в описании магазина». Каких размеров должно быть изображение,чтобы не было размытого изображения?

    • Илья Журавлёв 20.03.2018 Ответить Автор

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

    • Илья Журавлёв 20.03.2018 Ответить Автор

      Вот такой плагин можете себе ещё поставить — Definitely allow mobile zooming

  • Ольга 23.03.2018 Ответить

    Илья, спасибо за помощь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

восклицательный знак Отправляя свои данные Вы соглашаетесь с Политикой Конфиденциальности сайта info-effect.ru.


Яндекс.Метрика

WhatsApp 7 922 717 9869   Связь - Мой Супер хостинг

Политика конфиденциальности - Пользовательское соглашение

Стрелка вверх