Steg 1: Hämta din Photta widget-nyckel
Logga in på Photta Business-kontrollpanelen på business.photta.app. Gå till Inställningar → API-nycklar och kopiera din publicerbara nyckel, som börjar med pk_live_. Detta är den enda uppgiften du behöver. Innan nyckeln fungerar måste du lägga till din WooCommerce-butiksdomän (t.ex. minbutik.se) i Inställningar → Tillåtna domäner. Domänkontrollen körs vid varje provningsförfrågan, så listan över tillåtna domäner måste vara inställd innan du går live.
Om du testar lokalt på en underdomän som localhost eller en staging-URL, lägg till den domänen separat. Du kan lägga till upp till 10 domäner på valfri betalplan. Testkontot tillåter en domän. När din domän väl är listad kommer förfrågningar från det ursprunget att accepteras omedelbart — det finns ingen fördröjning för spridning.
Steg 2: Välj kortkod vs. skripttagg
WooCommerce ger dig två rena integrationsvägar. Kortkodsmetoden ([photta_widget pk="pk_live_..."]) låter dig klistra in widgeten på en specifik plats i din produktsidesmall eller en anpassad WooCommerce-hook — perfekt om du vill att knappen ska visas exakt mellan produktgalleriet och Köp-knappen. För att använda kortkoden, klistra in den direkt i WooCommerce-produktmallfilen single-product/add-to-cart/simple.php, eller använd ett block i en sidbyggare.
Skripttaggsmetoden infogar SDK:n globalt via ditt temas functions.php-fil med hjälp av wp_enqueue_script. Lägg till följande i ditt barntemas functions.php: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Detta renderar widget-knappen automatiskt på varje produktsida utan ändringar i varje enskild mall. De flesta e-handlare föredrar skripttaggsmetoden för dess enkelhet.
Steg 3: Klistra in och spara ditt valda kodklipp
För kortkodsmetoden: öppna ditt barntemas WooCommerce-mallöverskridning för den enskilda produktsidan. Klistra in [photta_widget pk="pk_live_..."] på den exakta vertikala position där du vill att knappen ska visas. Spara filen. Kortkods-renderaren registreras av Photta:s lättviktshjälpmedel — ingen plugin-fil behövs eftersom SDK:n själv registrerar kortkodshanteraren när den laddas.
För skripttaggsmetoden: öppna Utseende → Temafilredigerare i din WordPress-admin, navigera till ditt barntemas functions.php och lägg till wp_footer-kodklippet som visas i steg 2. Klicka på Uppdatera fil för att spara. Verifiera att kodklippet sparades genom att ladda om redigeraren och bekräfta att koden finns kvar. Om du använder ett cache-plugin (WP Rocket, W3 Total Cache), rensa cachen nu så att det nya sidfots-skriptet börjar levereras.
Steg 4: Verifiera att widgeten visas i din butik
Navigera till en produktsida i din WooCommerce-butik i ett privat webbläsarfönster. Du bör se en 'Prova'-knapp nära Köp-sektionen. Klicka på knappen, ladda upp ett testfoto och verifiera att provningsresultatet renderas. Om knappen inte visas, öppna webbläsarkonsolen (F12) och leta efter photta-fel. Ett 403-domänfel innebär att din domän ännu inte finns i listan över tillåtna domäner.
Kontrollera också att SDK-skripttaggen visas i sidans HTML-källkod genom att trycka Ctrl+U (Visa källkod) och söka efter photta. Om taggen saknas trots att du lagt till wp_footer-hooken, dubbelkolla att ditt tema anropar wp_footer() i sin sidfotsmall — vissa äldre eller kraftigt anpassade teman utelämnar detta anrop. Att lägga till <?php wp_footer(); ?> innan den avslutande </body>-taggen i din footer.php åtgärdar detta.
Steg 5: Konfigurera synlighet per kategori
Som standard visas widget-knappen på alla produktsidor. För att begränsa den till specifika kategorier, lägg till attributet data-categories i din skripttagg med en kommaseparerad lista över WooCommerce-kategorisluggar: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="damklader,herrklader,badklader" defer></script>. SDK:n läser den aktuella sidans WooCommerce-kategoridata och döljer automatiskt knappen på sidor som inte matchar.
För kortkodsanvändare: placera kortkoden endast i de mallar som är associerade med målkategorierna, eller omslut kortkoden i ett WooCommerce-villkor: använd PHP-funktionen has_term() för att kontrollera om den aktuella produkten tillhör målkategorin innan du skriver ut kortkoden. Detta mönster ger dig kirurgisk kontroll över vilka produkttyper som ska visa provningsalternativet utan att behöva duplicera mallar.