Stap 1: Ontvang je Photta widget-sleutel
Log in op het Photta Business Dashboard op business.photta.app. Ga naar Instellingen → API Keys en kopieer je 'publishable key', die begint met pk_live_. Dit is de enige inloggegevens die je nodig hebt. Voordat de sleutel werkt, moet je je WooCommerce-winkel domein (bijv. mijnwinkel.nl) toevoegen aan Instellingen → Allowed Domains. De domeincontrole vindt plaats bij elk pasverzoek, dus de whitelist moet zijn ingesteld voordat je live gaat.
Als je lokaal test op een subdomein zoals localhost of een staging-URL, voeg dat domein dan apart toe aan de whitelist. Je kunt tot 10 domeinen toevoegen aan elk betaald abonnement. Het proefaccount staat één domein toe. Zodra je domein in de lijst staat, worden verzoeken van die oorsprong onmiddellijk geaccepteerd — er is geen vertraging voor propagatie.
Stap 2: Kies tussen shortcode of script-tag
WooCommerce biedt twee eenvoudige integratiepaden. Met de shortcode-methode ([photta_widget pk="pk_live_..."]) kun je de widget op een specifieke locatie in je productpagina-template of een aangepaste WooCommerce hook plakken — ideaal als je wilt dat de knop precies tussen de productgalerij en de winkelwagen-knop verschijnt. Om de shortcode te gebruiken, plak je deze direct in het WooCommerce-producttemplatebestand single-product/add-to-cart/simple.php, of gebruik je een page builder blok.
De script-tag-methode voegt de SDK globaal in via het functions.php-bestand van je thema met wp_enqueue_script. Voeg het volgende toe aan de functions.php van je child-theme: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Dit rendert de widget-knop automatisch op elke productpagina, zonder wijzigingen per template. De meeste winkeliers geven de voorkeur aan de script-tag vanwege de eenvoud.
Stap 3: Plak en sla de gekozen snippet op
Voor het shortcode-pad: open de WooCommerce template-override van je child-theme voor de individuele productpagina. Plak [photta_widget pk="pk_live_..."] op de exacte verticale positie waar je de knop wilt laten verschijnen. Sla het bestand op. De shortcode-renderer wordt geregistreerd door de lichtgewicht helper van Photta — er is geen plugin-bestand nodig, aangezien de SDK zelf de shortcode-handler registreert wanneer deze wordt geladen.
Voor het script-tag-pad: open Weergave → Thema-editor in je WordPress-beheer, navigeer naar de functions.php van je child-theme en voeg het wp_footer actie-fragment toe dat in Stap 2 wordt getoond. Klik op Bestand bijwerken om op te slaan. Controleer of de snippet is opgeslagen door de editor te verversen. Als je een caching-plugin gebruikt (WP Rocket, W3 Total Cache), leeg dan nu de cache zodat het nieuwe footer-script wordt geserveerd.
Stap 4: Controleer of de widget in je winkel verschijnt
Navigeer naar een productpagina in je WooCommerce-winkel in een privévenster. Je zou een 'Pas het aan'-knop moeten zien in de buurt van de winkelwagen-sectie. Klik op de knop, upload een testfoto en controleer of het resultaat van het virtuele passen wordt getoond. Als de knop niet verschijnt, open dan de browserconsole (F12) en zoek naar photta-fouten. Een 403-domeinfout betekent dat je domein nog niet in de lijst met Allowed Domains staat.
Controleer ook of de SDK script-tag in de HTML-broncode van de pagina staat door op Ctrl+U (Bron weergeven) te drukken en te zoeken naar photta. Als de tag ontbreekt terwijl je de wp_footer hook hebt toegevoegd, controleer dan of je thema wp_footer() aanroept in het footer-template — sommige oudere of sterk aangepaste thema's laten deze aanroep weg. Het toevoegen van <?php wp_footer(); ?> voor de sluitende </body> in je footer.php lost dit op.
Stap 5: Configureer zichtbaarheid per categorie
Standaard verschijnt de widget-knop op alle productpagina's. Om dit te beperken tot specifieke categorieën, voeg je het data-categories attribuut toe aan je script-tag met een door komma's gescheiden lijst van WooCommerce categorie-slugs: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="damesmode,herenmode,zwemkleding" defer></script>. De SDK leest de WooCommerce categoriegegevens van de huidige pagina en verbergt de knop automatisch op pagina's die niet overeenkomen.
Voor shortcode-gebruikers: plaats de shortcode alleen in de templates die horen bij de doelcategorieën, of wikkel de shortcode in een WooCommerce voorwaarde: gebruik de has_term() PHP-functie om te controleren of het huidige product tot de doelcategorie behoort voordat de shortcode wordt uitgevoerd. Dit patroon geeft je chirurgische controle over welke producttypen de optie voor virtueel passen tonen zonder templates te dupliceren.