Изменить размер изображений товаров в магазине Woocommerce – info-effect.ru

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

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

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

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

 

настройки Woocommerce

 

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

 

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

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

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

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

 

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

 

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

 

каталог Woocommerce

 

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

 

каталог Woocommerce

 

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

 

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

 

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

 

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

  1. Александр

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Александр

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

      2. Admin автор

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

  2. Андрей

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Александр

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

  3. Андрей

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

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

    Ответить
    1. Александр

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

      Ответить
    2. Александр

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

      Ответить
  4. Андрей

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

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

    Ответить
    1. Александр

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

      Ответить
  5. Андрей

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

    Ответить
    1. Александр

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

      Ответить
      1. Андрей

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

  6. Ольга

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

    Ответить
    1. Admin автор

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

      Ответить
    2. Admin автор

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

      Ответить
  7. Ольга

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

    Ответить