Schritt 1: Ihren Photta-Widget-Key abrufen
Loggen Sie sich im Photta Business-Dashboard unter business.photta.app ein. Gehen Sie zu Einstellungen → API-Keys und kopieren Sie Ihren Publishable Key (beginnend mit pk_live_). Dies ist die einzige Anmeldeinformation, die Sie benötigen. Bevor der Key funktioniert, fügen Sie Ihre WooCommerce-Shop-Domain (z. B. mystore.com) unter Einstellungen → Erlaubte Domains hinzu. Die Domain-Prüfung erfolgt bei jeder Anfrage, daher muss die Allowlist vor der Liveschaltung konfiguriert sein.
Wenn Sie lokal auf einer Subdomain wie localhost oder einer Staging-URL testen, fügen Sie diese Domain separat zur Allowlist hinzu. In jedem kostenpflichtigen Plan können Sie bis zu 10 Domains hinzufügen. Das Testkonto erlaubt eine Domain. Sobald Ihre Domain gelistet ist, werden Anfragen von diesem Ursprung sofort akzeptiert – es gibt keine Verzögerung bei der Verteilung.
Schritt 2: Shortcode vs. Script-Tag wählen
WooCommerce bietet Ihnen zwei saubere Integrationswege. Mit dem Shortcode-Ansatz ([photta_widget pk="pk_live_..."]) können Sie das Widget an einer bestimmten Stelle in Ihrem Produktseiten-Template oder einem benutzerdefinierten WooCommerce-Hook einfügen – ideal, wenn der Button exakt zwischen der Produktgalerie und dem Warenkorb-Button erscheinen soll. Fügen Sie den Shortcode direkt in die WooCommerce-Produkt-Templatedatei single-product/add-to-cart/simple.php ein oder nutzen Sie einen Page Builder Block.
Der Script-Tag-Ansatz fügt das SDK global über die functions.php Ihres Themes mittels wp_enqueue_script ein. Fügen Sie Folgendes zur functions.php Ihres Child-Themes hinzu: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Dies rendert den Widget-Button automatisch auf jeder Produktseite, ohne dass Änderungen am Template nötig sind. Die meisten Händler bevorzugen diesen Ansatz aufgrund seiner Einfachheit.
Schritt 3: Das gewählte Snippet einfügen und speichern
Für den Shortcode-Weg: Öffnen Sie den WooCommerce-Template-Override Ihres Child-Themes für die Einzelproduktseite. Fügen Sie [photta_widget pk="pk_live_..."] an der exakten vertikalen Position ein, an der der Button erscheinen soll. Speichern Sie die Datei. Der Shortcode-Renderer wird durch den leichtgewichtigen Helper von Photta registriert – es ist keine Plugin-Datei erforderlich, da das SDK den Shortcode-Handler beim Laden selbst registriert.
Für den Script-Tag-Weg: Öffnen Sie Design → Theme-Datei-Editor in Ihrem WordPress-Adminbereich, navigieren Sie zur functions.php Ihres Child-Themes und fügen Sie das in Schritt 2 gezeigte wp_footer-Action-Snippet hinzu. Klicken Sie auf Datei aktualisieren. Vergewissern Sie sich, dass das Snippet gespeichert wurde, indem Sie den Editor aktualisieren. Falls Sie ein Caching-Plugin nutzen (WP Rocket, W3 Total Cache), leeren Sie den Cache jetzt, damit das neue Footer-Skript ausgeliefert wird.
Schritt 4: Das Erscheinen des Widgets im Shop prüfen
Rufen Sie eine Produktseite in Ihrem WooCommerce-Shop in einem privaten Browserfenster auf. Sie sollten einen Button „Anprobieren“ in der Nähe des Warenkorb-Bereichs sehen. Klicken Sie auf den Button, laden Sie ein Testfoto hoch und prüfen Sie, ob das Ergebnis gerendert wird. Falls der Button nicht erscheint, öffnen Sie die Browser-Konsole (F12) und suchen Sie nach Photta-Fehlern. Ein 403-Domain-Fehler bedeutet, dass Ihre Domain noch nicht in der Liste der erlaubten Domains steht.
Prüfen Sie auch, ob der SDK-Script-Tag im HTML-Quelltext der Seite erscheint, indem Sie Strg+U (Quelltext anzeigen) drücken und nach „photta“ suchen. Falls der Tag fehlt, obwohl Sie den wp_footer-Hook hinzugefügt haben, stellen Sie sicher, dass Ihr Theme wp_footer() in seinem Footer-Template aufruft – einige ältere oder stark angepasste Themes lassen diesen Aufruf weg. Das Hinzufügen von <?php wp_footer(); ?> vor dem schließenden </body> in Ihrer footer.php behebt dies.
Schritt 5: Sichtbarkeit pro Kategorie konfigurieren
Standardmäßig erscheint der Widget-Button auf allen Produktseiten. Um ihn auf bestimmte Kategorien zu beschränken, fügen Sie das Attribut data-categories zu Ihrem Script-Tag hinzu, mit einer kommagetrennten Liste von WooCommerce-Kategorie-Slugs: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="damenbekleidung,herrenbekleidung,bademode" defer></script>. Das SDK liest die WooCommerce-Kategoriedaten der aktuellen Seite aus und blendet den Button auf nicht passenden Seiten automatisch aus.
Shortcode-Nutzer platzieren den Shortcode nur in den Templates, die den Zielkategorien zugeordnet sind, oder umschließen ihn mit einer WooCommerce-Bedingung: Verwenden Sie die PHP-Funktion has_term(), um zu prüfen, ob das aktuelle Produkt zur Zielkategorie gehört, bevor der Shortcode ausgegeben wird. Dieses Muster ermöglicht eine präzise Steuerung darüber, welche Produkttypen die Anproben-Option anzeigen, ohne Templates duplizieren zu müssen.