Як покращити галерею продуктів Woocommerce (покрокове керівництво)

Коли справа доходить до електронної комерції, картинки замінюють тисячі слів. Для більшості онлайн-споживачів рішення про покупку ґрунтуються на фотографії продукту, а не на переконливій комерційній пропозиції, на вдосконалення якої ви витратили багато часу. Отже, щоб забезпечити максимальну конверсію, потрібно бути впевненим, що у вашому магазині WooCommerce фотографії та відео представлені на найвищому рівні. Проблема? Так – стандартна галерея продуктів WooCommerce не демонструє ваші продукти якнайкраще.

У цьому покроковому посібнику ви дізнаєтесь, як покращити галерею продуктів WooCommerce, незалежно від того, яку тему WooCommerce ви встановили. Це простий триетапний процес налаштування за допомогою плагіна WooThumbs для WooCommerce.

Навіщо покращувати стандартну галерею продуктів WooCommerce?

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

Готова галерея WooCommerce досить проста. Тут можна відображати кілька зображень під рекомендованою фотографією продукту, і це майже все.

У галереях продуктів електронної комерції з високою конверсією є кілька зображень для кожного варіанта продукту, вбудовані відеоролики про продукт та плавне масштабування для детального знайомства покупця з вашими продуктами. І це не згадує таких ефектів, як автоматичні переходи або слайдери фотографій.

На жаль, стандартна галерея продуктів WooCommerce не пропонує жодної з цих функцій.

Дивіться також:

Як масово редагувати товарні картки у WooCommerce

Як працює WooThumbs для WooCommerce

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

З плагіном ви зможете

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

Як створити покращену галерею продуктів з WooThumbs

Якщо ви готові створити свою приголомшливу галерею продуктів WooCommerce, то насамперед необхідно встановити та активувати плагін WooThumbs для 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-адресу и Співвідношення сторін .

5. У полі URL вставте URL-адресу з YouTube. Це основна URL-адреса відео – та сама, що ви вставляєте в редакторі постів / сторінок, щоб вбудувати відео.
6. Якщо у вас є вбудоване HTML-посилання на ваше відео, повторіть процес, але натомість вставте це пряме посилання в поле URL медіа.

Після завершення процесу мультимедіа автоматично оновиться. Тепер можна переглянути відео на сторінці продукту.

Тепер ви знаєте, як повністю налаштувати галерею продуктів WooCommerce, додати додаткові зображення до варіацій продукту та вбудувати відео про продукти.

Все, що вам потрібно - це невелика допомога від плагіна WooThumbs for WooCommerce, який збільшить продуктивність вашого онлайн магазину.

Джерело: wplift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/