Как улучшить галерею продуктов Woocommerce (пошаговое руководство)

Как улучшить галерею продуктов Woocommerce (пошаговое руководство)

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

В этом пошаговом руководстве вы узнаете, как улучшить галерею продуктов WooCommerce, независимо от того, какую тему WooCommerce вы установили. Это простой трехэтапный процесс параметра при помощи плагина WooThumbs for WooCommerce.

Зачем улучшать стандартную галерею продуктов WooCommerce?

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

Готовая галерея WooCommerce довольно проста. Здесь можно выводить пару картинок под рекомендуемой фотографией продукта, и это почти все.

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

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

Как работает WooThumbs для WooCommerce

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

Галерея WooThumbsС плагином вы сможете

  • Выбирать между горизонтальным ползунком, вертикальным ползунком или эффектом затухания.
  • Размещать эскизы выше, сбоку или под основным изображением продукта.
  • Регулировать расстояние между эскизами, цвет значков, скорость перехода и многое иное.
  • Добавлять дополнительные варианты картинки.
  • Встраивать в галерею видеоконтент с YouTube, Vimeo и иных платформ.
  • Плавно масштабировать картинки с настраиваемыми режимами выведения.
  • Внедрять полноэкранную, в полном объеме адаптивную галерею картинок, включая мобильное масштабирование.
  • Выбирать, сколько эскизов выводить одновременно.

Как создать улучшенную галерею продуктов с WooThumbs

Если вы готовы создать потрясающую галерею продуктов WooCommerce, то первым делом надо установить и активировать плагин WooThumbs for WooCommerce.

Настройте галерею картинок продукта

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

1. После установки перейдите в WooCommerce > WooThumbs.

2. Оказавшись на панели инструментов WooThumbs, перейдите в Параметра дисплея.

3. В этом меню вы можете настроить следующее:

    • Ширину галереи По умолчанию это значение составляет 48%, так как это наиболее распространенная ширина раздела картинки в темах WooCommerce. Однако можно увеличить это значение до 100%.
    • Положение Перемещать галерею картинок влево, вправо или вообще не перемещать.
    • Цвета значков Цвет значков, расположенных на изображении, к примеру, значки предыдущий / следующий.
    • Показывать значки при наведении? Если этот настройка включен, значки будут видны только при наведении курсора на изображение.
    • Показать всплывающие подсказки к значкам? Когда значки наведены, выводится всплывающая подсказка.

Когда значки наведены, выводится всплывающая подсказка

4. Далее перейдите к разделу «Размеры картинки», где можно настроить размеры картинок, коэффициенты кадрирования, размеры миниатюр и добавить картинки большого размера.

5. Есть ещё 5 вариантов параметра, доступных посетителям с той же панели инструментов:

    • Параметра карусели.
    • Параметра навигации добавление стрелок в галерею продуктов W ooCommerce y).
    • Параметра масштабирования.
    • Полноэкранные параметра создание лайтбокса галереи товаров).
    • Адаптивные параметра.

Добавьте дополнительные варианты картинки

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

  1. Перейдите к переменному продукту.
  2. Щелкните вкладку Варианты.
  3. Раскройте одну из вариаций.
  4. Щелкните ссылку Добавить дополнительные картинки. Появится медиа-галерея.
  5. Выберите одно или пару дополнительных картинок и нажмите « Добавить вариант».
  6. Сейчас вы увидите дополнительные картинки, перечисленные на вкладке варианта. Важно отметить, что вы все равно должны добавить в вариант «избранное» изображение по умолчанию.
  7. После того как вы завершите этот процесс для всех вариантов, либо обновите продукт, либо нажмите кнопку « Сохранить изменения ».

Как добавить видео в галерею продуктов WooCommerce

Доказано, что видео будет одним из самых конвертируемых медиаформатов: 73% онлайн-покупателей с большей вероятностью купят продукт после просмотра видео.

Существует три варианта поиска видео в WooThumbs: мультимедиа на основе oEmbed, встроенный HTML и собственное видео. Для видео, размещенных на веб-сайтах oEmbed, таких как YouTube и Vimeo, просто выполните следующие действия(в виде примера используется YouTube).

  1. Скопируйте URL-адрес видео на YouTube.
  2. Откройте медиа-галерею.
  3. Выберите изображение, с которым хотели бы связать видео.
  4. Далее вы увидите два поля ввода под данными WooThumbs Media: это URL-адрес и Соотношение сторон.

Далее вы увидите два поля ввода под данными WooThumbs Media

  1. В поле ввода URL вставьте URL с YouTube. Это основной URL-адрес видео – тот же, что вы вставляете в редакторе записей / страниц, чтобы встроить видео.
  2. Если у вас есть встроенная HTML-ссылка на видео, повторите процесс, но вместо этого вставьте эту прямую ссылку в поле ввода Media URL.

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

Сейчас можно просмотреть видео на странице продукта

Сейчас вы знаете, как в полном объеме изменить галерею продуктов WooCommerce, добавить дополнительные картинки к вариациям продукта и встроить видеоролики о продуктах.

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

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

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