Как исправить проблемы с размером изображения WooCommerce

У вас проблемы с размерами изображений в вашем интернет-магазине? Вы пришли в нужное место. В этом руководстве мы покажем вам различные способы устранения наиболее распространенных проблем с размером изображения WooCommerce .

WooCommerce — одна из лучших платформ электронной коммерции, но время от времени вы можете столкнуться с некоторыми проблемами. Мы уже видели, как исправить наиболее распространенные проблемы при оформлении заказа и что делать, если кнопка «Добавить в корзину» не работает. В этом руководстве мы покажем вам различные решения для устранения проблем с размером изображения.

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

Типы изображений в WooCommerce

Есть много типов изображений, которые вы можете добавить на свой веб-сайт, но основные 3 типа, используемые в WooCommerce, — это изображения продуктов, каталогов и эскизы продуктов.

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

Распространенные проблемы с размерами изображений WooCommerce

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

Чтобы иметь возможность исправить проблемы с размером изображения WooCommerce, вам нужно сначала определить проблему . Сложность заключается в том, что есть несколько проблем, с которыми вы можете столкнуться в отношении размеров изображений. Вот некоторые из наиболее распространенных:

1. Размытые изображения

Это одна из самых распространенных проблем. Изображения, которые вы загружаете для своих продуктов или эскизов, выглядят размытыми и могут быть нечетко видны , даже если исходное изображение не было сжато, было четко видно и имело отличное качество.

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

Исходное изображение

Размытое изображение

2. Некачественное изображение

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

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

3. Неправильный размер изображения

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

Например, предположим, что требование вашей темы для изображений каталога составляет не менее 250 x 250 пикселей, но настройки изображения WooCommerce вашего магазина установлены на 200 x 200 пикселей. Поскольку параметры не настроены в соответствии с требованиями темы, ваше изображение может быть автоматически изменено с неправильным размером изображения.

4. Проблемы с зумом, лайтбоксом или ползунком

WooCommerce предоставляет вам параметры масштабирования, лайтбокса и ползунка для предварительного просмотра ваших изображений. Это была новая функция, которая была добавлена ​​в WooCommerce с выпуском версии 3.0 . Если ваша тема не была обновлена ​​в соответствии с ее спецификациями, вы можете столкнуться с некоторыми проблемами.

5. Ширина изображения и поля эскизов отсутствуют

Вы также можете заметить, что поля ширины и эскизов изображений WooCommerce отсутствуют в настройщике в разделе Внешний вид > Настройка > WooCommerce > Изображения продуктов .

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

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

Как исправить проблемы с размером изображения WooCommerce

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

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

1. Начальный контрольный список, о котором следует помнить

Прежде чем мы рассмотрим конкретные решения для устранения проблем с размером изображения, вам нужно помнить о некоторых вещах. Во-первых, убедитесь, что вы правильно настроили WooCommerce, не пропустив ни одного шага. У вас могут возникнуть проблемы с вашим сайтом, если он установлен неправильно.

Во-вторых, мы хотели бы напомнить вам проверить, все ли на вашем сайте обновлено . В вашем магазине могут возникнуть проблемы, если вы не обновили свою тему или плагины до последней версии.

Точно так же убедитесь, что вы обновили WooCommerce до последней доступной версии. Чтобы узнать, есть ли у вас ожидающие обновления, перейдите в «Плагины» > «Установленные плагины » на панели инструментов WordPress. Если есть уведомления с просьбой обновить WooCommerce, нажмите « Обновить сейчас ».

Более того, если вы обновили WordPress с помощью редактора Gutenberg, убедитесь, что WordPress также обновлен до последней версии . С другой стороны, если вы используете WordPress с классическим редактором, лучше всего обновить его до последней версии WordPress 4.9.

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

ПРИМЕЧАНИЕ. В этом руководстве мы будем использовать тему Divi, поэтому некоторые страницы могут выглядеть иначе, чем ваш веб-сайт, если вы используете другую тему. Тем не менее, вы должны быть в состоянии следовать каждому решению без каких-либо проблем. Если вы ищете новую тему, совместимую с WooCommerce, ознакомьтесь с этой статьей.

2. Установите пользовательские размеры изображений WooCommerce

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

Установить пользовательский размер изображения довольно просто. На панели администратора перейдите в раздел « Внешний вид» > «Настроить» и откройте вкладку « WooCommerce », чтобы получить доступ к настройщику.

Затем откройте опцию « Изображения продукта ». Здесь вы можете изменить размер страницы продукта и эскизов ваших продуктов. Чтобы отредактировать основное изображение страницы продукта, добавьте нужный размер изображения в раздел « Ширина основного изображения ».

Вы также можете редактировать размеры миниатюр и обрезку здесь. Если вы хотите настроить размер миниатюры, отредактируйте параметр « Ширина миниатюры ».

Кроме того, есть три варианта настройки обрезки миниатюр: 1:1, пользовательская и необрезанная. Чтобы свести к минимуму проблемы с изображением как с точки зрения функциональности, так и с точки зрения внешнего вида, наилучшим вариантом является кадрирование 1:1 . После внесения всех необходимых изменений нажмите « Опубликовать ».

3. Проверьте размеры изображения продукта вашей темы

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

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

Например, если вы используете Google Chrome , щелкните правой кнопкой мыши изображение продукта и нажмите « Проверить ». Вы сможете увидеть размер изображения в инструменте разработчика элемента проверки, как показано ниже.

В данном случае размер изображения товара составляет 900×600 . Если требования к изображениям вашей темы отличаются, у вас могут возникнуть проблемы.

Вы можете соответствующим образом настроить размер изображения продукта в настройщике, используя метод, который мы описали в пункте 2. Точно так же вы можете проверить размер миниатюры таким же образом и при необходимости отредактировать его в настройщике.

4. Изменить размеры изображения по умолчанию

Если вы испробовали все вышеперечисленные решения, но по-прежнему сталкиваетесь с проблемами с изображениями, вам может потребоваться настроить размеры изображений WordPress по умолчанию .

Для этого перейдите в « Настройки» > «Мультимедиа » на панели инструментов WordPress, и вы увидите параметры размера миниатюр, изображений среднего и большого размера .

Установите размеры изображения в соответствии с требованиями темы и сохраните изменения .

Кроме того, вы можете удалить некоторые размеры по умолчанию, если вы их не используете. Чтобы узнать больше об этом, ознакомьтесь с нашим руководством по удалению размеров изображений WordPress по умолчанию.

5. Исправьте проблемы с размером изображения WooCommerce с помощью плагинов

Другой альтернативой для решения проблем с размером изображения WooCommerce является использование специального плагина. Есть несколько инструментов, которые вы можете использовать для этого. В этом разделе мы покажем вам несколько, чтобы вы могли предотвратить дальнейшие проблемы с размером изображения на своем веб-сайте.

Давайте посмотрим на некоторые из лучших инструментов, которые вы должны использовать.

5.1. Идеальные изображения и поддержка Retina

Проще говоря, Retina Support — это вариант отображения изображений на вашем веб-сайте с очень высоким разрешением и качеством . Дисплей Retina-ready гарантирует, что любое изображение, просматриваемое на любом устройстве с любым размером экрана, будет четким и без видимых пиксельных линий или границ.

Это идеальное решение, если загруженные изображения на вашем сайте размыты или имеют низкое качество. Если вы хотите создать изображение для сетчатки вручную, вам нужно удвоить размер и размеры изображения, оптимизировать их, а затем повторно загрузить. Однако вы можете использовать плагин, чтобы ваши изображения автоматически отображались на сетчатке. Для этого Perfect Images — один из лучших плагинов.

Perfect Images — это простой плагин для добавления изображений с дисплеем Retina на ваш сайт. Он автоматически обнаруживает любые изображения с проблемами сетчатки и создает их копию для сетчатки. Кроме того, вы можете создавать отдельные изображения для сетчатки или делать это массово, чтобы сэкономить время.

Теперь давайте посмотрим, как использовать этот плагин.

5.1.1. Установите и активируйте плагин

Во-первых, вам нужно установить его и активировать. На панели инструментов WordPress перейдите в раздел « Плагины» > «Добавить новый », найдите плагин и нажмите « Установить сейчас» .

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

5.1.2. Настройка параметров изображения для дисплея Retina

После активации плагина вам необходимо настроить параметры сетчатки для изображений WooCommerce или веб-сайта. Перейдите в Meow Apps > Perfect Images , и вы увидите все параметры для ваших изображений сетчатки на вкладке « Общие ». Параметры по умолчанию подходят для большинства веб-сайтов, поскольку они создают изображения сетчатки для наиболее распространенных размеров изображений.

Однако после преобразования изображений в формат retina-ready их может потребоваться оптимизировать. Изображения Retina-ready, как правило, очень большие и могут замедлить работу вашего сайта. Это может сильно оттолкнуть ваших клиентов, поскольку большинство пользователей используют мобильные устройства для онлайн-покупок.

Чтобы убедиться, что изображения retina не снижают скорость вашего сайта, вам необходимо убедиться, что они хорошо оптимизированы. Вы можете сделать это из плагина, перейдя на вкладку « Оптимизация и скорость ». Имейте в виду, что для этого вам нужно будет подписаться на их премиум-план, который включает Easy IO для оптимизации и стоит 10 долларов США в месяц.

Кроме того, вы также можете оптимизировать их вручную, используя плагин или службу оптимизации изображений, такие как TinyPNG или Smush .

5.1.3. Преобразование изображений для поддержки Retina

После того, как вы настроили все необходимые параметры для ваших изображений Retina, вы можете начать их преобразование. Сначала перейдите в « Медиа» > «Идеальные изображения », и вы будете перенаправлены на вкладку « Проблемы с Retina ». Здесь вы можете создавать изображения для сетчатки, чтобы исправить проблемы с размером изображения WooCommerce.

Вы также можете создавать эскизы и изображения сетчатки, выбирая нужные изображения.

5.2. Восстановить миниатюру

Восстановление эскизов также является отличным способом решения проблем с размерами изображений, особенно с миниатюрами .

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

Если на вашем сайте много миниатюр, вы можете использовать Perfect Images . Все, что вам нужно сделать, это настроить параметры размера изображения так же, как мы делали это в шагах 5.1.1 и 5.1.2. Затем перейдите в « Медиа» > «Идеальные изображения », откройте вкладку « Все », и вы увидите все изображения на своем сайте. Как и в случае с поддержкой сетчатки, вы можете регенерировать миниатюры для отдельных изображений или сразу для всех.

Чтобы повторно сгенерировать изображения в пакетном режиме, нажмите Массовые действия и выберите Регенерировать все записи для повторного создания эскизов. Имейте в виду, что это может занять несколько минут, если на вашем сайте много изображений.

6. Программное решение

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

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

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

Изменить размер изображения с помощью фрагментов кода

Чтобы изменить размеры изображения, когда ширина изображения и ширина эскиза отсутствуют в настройщике, вы можете использовать следующий фрагмент кода. Перейдите в « Внешний вид» > «Редактор тем» и откройте файл functions.php .

Затем просто добавьте следующий фрагмент кода внизу редактора.

 add_theme_support('woocommerce', apply_filters('divi_woocommerce_args', массив(
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => массив (
   'default_columns' => 3,
   'default_rows' => 4,
   'мин_столбцов' => 1,
   'max_columns' => 6,
   'мин_рядов' => 1
   )
) ) );

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

7. Варианты поддержки

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

На данный момент лучший вариант — обратиться в службу поддержки. У WooCommerce есть отличные варианты поддержки, поэтому вы можете связаться с ними по поводу проблем с размером изображения. В качестве альтернативы, если вы считаете, что проблема может заключаться в вашей теме, вы можете связаться с поставщиком темы и попросить его о помощи.

Вывод

В общем, существуют разные типы изображений (отдельный продукт, каталог и эскизы продуктов) и несколько общих проблем с размерами изображений. Наиболее распространенными из них являются размытые или низкокачественные изображения, неправильные размеры изображений, параметры масштабирования, лайтбокса и ползунка, а также отсутствие полей ширины и эскизов.

В этом руководстве мы рассмотрели различные решения для устранения наиболее распространенных проблем с размером изображения WooCommerce .

1. Обновите свою тему и плагины до последней версии, включая WooCommerce.
2. Установите пользовательские размеры изображений WooCommerce
3. Проверьте размеры продукта изображения вашей темы
4. Изменить размеры изображений по умолчанию
5. Используйте плагины
6. Программное решение с небольшим количеством кода
7. Свяжитесь с WooCommerce или со службой поддержки вашей темы

Если эта статья была вам полезна, поделитесь ею в социальных сетях и помогите своим друзьям избавиться от этих проблем. Сталкивались ли вы с этими проблемами раньше? Как вы их решили? Дайте нам знать в комментариях ниже.

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

• Как добавить изображение к товару в WooCommerce
• 3 метода удаления миниатюр в WordPress
• Как добавить пользовательские размеры изображений в WordPress