Встановлення Looma на WordPress / WooCommerce

Цей гайд охоплює встановлення Looma на сайтах WordPress, зокрема магазинах WooCommerce.

Передумови

• Сайт WordPress з доступом адміністратора
• Ваш код встановлення Looma (доступний у Дашборді → Site Settings → Installation)

Спосіб 1: Плагін "WPCode" (Рекомендовано)

Найпростіший та найбезпечніший спосіб — без редагування файлів теми.

Крок 1: Встановіть плагін WPCode

1. Увійдіть до панелі WordPress Admin
2. Перейдіть до Plugins → Add New
3. Знайдіть "WPCode — Insert Headers and Footers"
4. Натисніть Install Now, потім Activate

Крок 2: Додайте скрипт

1. Перейдіть до Code Snippets → Header & Footer (у лівій бічній панелі)
2. У секції Header вставте ваш код встановлення Looma:

<script>
(function(d) {
    var s = d.createElement('script');
    s.defer = true;
    s.src = 'https://widget.looma.chat/loader.js?token=YOUR_SITE_TOKEN';
    if (d.head) d.head.appendChild(s);
})(document);
</script>

3. Натисніть Save Changes

Крок 3: Перевірте

1. Відвідайте ваш сайт
2. Бульбашка чату Looma має з'явитися в нижньому правому куті
3. Перевірте статус встановлення в Дашборді Looma

Спосіб 2: Редактор файлів теми

Якщо ви не хочете встановлювати додаткові плагіни:

Крок 1: Відкрийте редактор теми

1. Перейдіть до Appearance → Theme File Editor
2. Праворуч знайдіть та натисніть Theme Header (header.php)

Крок 2: Додайте скрипт

1. Знайдіть закриваючий тег </head>
2. Вставте код встановлення Looma безпосередньо перед ним
3. Натисніть Update File

WARNING

Оновлення теми можуть перезаписати ваші зміни. Якщо ви використовуєте цей спосіб, спершу подумайте про створення дочірньої теми (child theme). Спосіб з плагіном (Спосіб 1) безпечніший і зберігається після оновлень теми.

Спосіб 3: functions.php

Для розробників, які надають перевагу програмному підходу:

1. Перейдіть до Appearance → Theme File Editor
2. Відкрийте functions.php
3. Додайте наступний код у кінець:

function looma_add_widget_script() {
    echo '<script>
    (function(d) {
        var s = d.createElement("script");
        s.defer = true;
        s.src = "https://widget.looma.chat/loader.js?token=YOUR_SITE_TOKEN";
        if (d.head) d.head.appendChild(s);
    })(document);
    </script>';
}
add_action('wp_head', 'looma_add_widget_script');

4. Натисніть Update File

Google Merchant фід для WooCommerce

WooCommerce не генерує фід Google Merchant за замовчуванням. Вам знадобиться плагін:

Варіант 1: Product Feed PRO for WooCommerce (Рекомендовано)

1. Перейдіть до Plugins → Add New
2. Знайдіть "Product Feed PRO for WooCommerce"
3. Встановіть та активуйте
4. Перейдіть до Marketing → Product Feed PRO
5. Створіть новий фід → оберіть шаблон Google Shopping
6. Налаштуйте та згенеруйте фід
7. Скопіюйте URL фіду та вставте його в Дашборді Looma → Site Settings → Feed URL

Варіант 2: Google Listings & Ads

1. Встановіть плагін Google Listings & Ads (офіційний від Google & WooCommerce)
2. Підключіть ваш акаунт Google Merchant Center
3. Товари синхронізуватимуться автоматично

Варіант 3: Інші популярні плагіни

• CTX Feed — WooCommerce Product Feed Manager
• JEXY — Google Shopping Feed
• Flavflavor — Product Feed for WooCommerce

Усунення несправностей

Віджет не з'являється

• Перевірте, чи активний плагін кешування (WP Super Cache, W3 Total Cache, LiteSpeed Cache). Очистіть кеш після додавання скрипта
• Спробуйте в режимі інкогніто / приватного перегляду
• Перевірте консоль браузера на наявність помилок (F12 → вкладка Console)
• Переконайтеся, що токен сайту коректний

Конфлікти з іншими плагінами

• Деякі плагіни безпеки (Wordfence, Sucuri) можуть блокувати зовнішні скрипти. Додайте widget.looma.chat до білого списку
• Якщо використовуєте конструктор сторінок (Elementor, Divi), переконайтеся, що скрипт знаходиться у глобальному заголовку, а не в секції окремої сторінки

Проблеми, специфічні для WooCommerce

• Якщо віджет з'являється на одних сторінках, але не на інших, переконайтеся, що скрипт знаходиться у глобальному header.php, а не в окремому шаблоні
• Перевірте, чи не має ваша тема окремих заголовків для сторінок магазину/товарів

Наступні кроки

• Налаштування AI-асистента — налаштуйте поведінку та вигляд чату
• Налаштування швидкого пошуку — замініть стандартний пошук WooCommerce
• Товари та AI Magic Data — керуйте каталогом товарів