Крок 1: Отримайте ключ віджета Photta
Увійдіть у панель керування Photta Business за адресою business.photta.app. Перейдіть у Налаштування → API Keys і скопіюйте ваш публічний ключ, який починається з pk_live_. Це єдині дані, які вам потрібні. Перед тим як ключ запрацює, додайте домен вашого магазину WooCommerce (наприклад, mystore.com) у Налаштування → Allowed Domains. Перевірка домену виконується при кожному запиті на примірку, тому білий список має бути налаштований до запуску.
Якщо ви тестуєте локально на піддомені на кшталт localhost або на тестовому URL, додайте цей домен до білого списку окремо. Ви можете додати до 10 доменів на будь-якому платному тарифі. Тріальний акаунт дозволяє один домен. Як тільки ваш домен з'явиться у списку, запити з цього джерела будуть прийматися негайно — затримки розповсюдження немає.
Крок 2: Оберіть шорткод або тег скрипта
WooCommerce пропонує два чистих шляхи інтеграції. Підхід із шорткодом ([photta_widget pk="pk_live_..."]) дозволяє вставити віджет у конкретне місце всередині шаблону сторінки товару або кастомного хука WooCommerce — ідеально, якщо ви хочете, щоб кнопка з'явилася точно між галереєю товарів і кнопкою «Додати в кошик». Щоб скористатися шорткодом, вставте його безпосередньо у файл шаблону продукту WooCommerce single-product/add-to-cart/simple.php або використайте блок конструктора сторінок.
Підхід із тегом скрипта вставляє SDK глобально через файл functions.php вашої теми за допомогою wp_enqueue_script. Додайте наступне до functions.php вашої дочірньої теми: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Це автоматично відобразить кнопку віджета на кожній сторінці товару без змін у шаблонах. Більшість продавців віддають перевагу тегу скрипта через його простоту.
Крок 3: Вставте та збережіть обраний фрагмент коду
Для шорткоду: відкрийте перевизначення шаблону WooCommerce вашої дочірньої теми для сторінки одного товару. Вставте [photta_widget pk="pk_live_..."] у точну вертикальну позицію, де має з'явитися кнопка. Збережіть файл. Обробник шорткоду реєструється легким помічником Photta — файл плагіна не потрібен, оскільки сам SDK реєструє обробник шорткоду під час завантаження.
Для тегу скрипта: відкрийте Вигляд → Редактор файлів теми в адмінпанелі WordPress, перейдіть до functions.php вашої дочірньої теми та додайте фрагмент wp_footer, показаний у кроці 2. Натисніть «Оновити файл», щоб зберегти зміни. Переконайтеся, що фрагмент зберігся, оновивши редактор і перевіривши наявність коду. Якщо ви використовуєте плагін кешування (WP Rocket, W3 Total Cache), очистіть кеш зараз, щоб новий скрипт футера почав працювати.
Крок 4: Перевірте появу віджета у вашому магазині
Перейдіть на сторінку товару у вашому магазині WooCommerce у режимі інкогніто. Ви повинні побачити кнопку «Приміряти» біля розділу «Додати в кошик». Натисніть кнопку, завантажте тестове фото та перевірте результат примірки. Якщо кнопка не з'являється, відкрийте консоль браузера (F12) і пошукайте помилки photta. Помилка домену 403 означає, що ваш домен ще не додано до списку Allowed Domains.
Також перевірте, чи з'являється тег SDK у HTML-коді сторінки, натиснувши Ctrl+U (Перегляд коду) і виконавши пошук за словом photta. Якщо тег відсутній, хоча ви додали хук wp_footer, перевірте, чи викликає ваша тема функцію wp_footer() у своєму шаблоні футера — деякі старі або сильно модифіковані теми пропускають цей виклик. Додавання <?php wp_footer(); ?> перед закриваючим тегом </body> у вашому footer.php виправить це.
Крок 5: Налаштуйте видимість за категоріями
За замовчуванням кнопка віджета з'являється на всіх сторінках товарів. Щоб обмежити її певними категоріями, додайте атрибут data-categories до вашого тегу скрипта зі списком ярликів категорій WooCommerce через кому: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. SDK зчитує дані категорій WooCommerce поточної сторінки та автоматично приховує кнопку на сторінках, що не збігаються.
Користувачі шорткодів можуть розміщувати шорткод лише в шаблонах, пов'язаних із цільовими категоріями, або обгорнути шорткод в умову WooCommerce: використовуйте PHP-функцію has_term(), щоб перевірити, чи належить поточний товар до цільової категорії, перед виведенням шорткоду. Ця схема дає вам хірургічний контроль над тим, які типи товарів відображають опцію примірки, без дублювання шаблонів.