Шаг 1: Получите ключ виджета Photta
Войдите в личный кабинет Photta Business по адресу business.photta.app. Перейдите в Settings → API Keys и скопируйте ваш публичный ключ (publishable key), который начинается с pk_live_. Это единственные учетные данные, которые вам понадобятся. Прежде чем ключ заработает, добавьте домен вашего магазина WooCommerce (например, mystore.com) в Settings → 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 в исходном коде страницы, нажав Ctrl+U и выполнив поиск по слову photta. Если тег отсутствует, хотя вы добавили хук wp_footer, убедитесь, что ваша тема вызывает функцию wp_footer() в своем шаблоне подвала — некоторые старые или сильно измененные темы пропускают этот вызов. Добавление <?php wp_footer(); ?> перед закрывающим тегом </body> в вашем файле footer.php решит проблему.
Шаг 5: Настройте видимость по категориям
По умолчанию кнопка виджета появляется на всех страницах товаров. Чтобы ограничить ее показ конкретными категориями, добавьте атрибут data-categories в ваш скрипт-тег со списком ярлыков (slugs) категорий 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() для проверки принадлежности товара к категории перед выводом шорткода. Этот метод дает ювелирный контроль над тем, для каких типов товаров отображается опция примерки, без дублирования шаблонов.