WooCommerce mobiele app voor klanten: opties en testplan

Een mobiele WooCommerce-app voor klanten is een afzonderlijke iOS- en Android-app onder de naam van uw winkel die kopers installeren om te bladeren en te kopen. U kunt op vier manieren verkrijgen: een app-plug-in die uw catalogus opnieuw tekent vanuit de WooCommerce API, een website-naar-app-converter die uw live winkel laadt, een beheerde service of een aangepaste build. De juiste hangt vooral af van hoeveel van uw winkel in plug-ins bestaat.

Deze gids helpt u een route te kiezen en vervolgens te bewijzen dat deze in uw eigen winkel werkt voordat u geld uitgeeft. Voor de korte versie, zie de WooCommerce naar app-pagina. Voor een bredere vergelijking die ook WordPress-inhoudssites omvat, lees WordPress naar app-plug-ins versus converters.

Is de officiële WooCommerce-app voor klanten?

Nee. De WooCommerce-app in de App Store en Google Play is een app voor winkelbeheer voor verkopers. WooCommerce's documentatie voor mobiele apps beschrijft het in deze termen: u verwerkt bestellingen, maakt en beheert producten en neemt persoonlijke betalingen aan. Uw klanten kunnen er niet in winkelen en het draagt ​​uw merk niet.

Een klantenapp is iets anders. Het bevat uw winkelnaam en -pictogram, bevindt zich op het startscherm van de klant en opent uw catalogus, winkelwagen en accountgedeelte. WooCommerce verzendt er geen, dus elke winkel krijgt het van een derde partij of bouwt het.

Moet een WooCommerce-winkel überhaupt een app hebben?

Een app verdient zijn plaats als dezelfde mensen keer op keer bij u kopen. Voordat u routes vergelijkt, controleert u uw winkel op deze vragen.

• Bestellen klanten opnieuw? Koffie, dierenvoeding, supplementen, huidverzorging, printbenodigdheden en handelsonderdelen worden op de kringloop gekocht. Een startschermpictogram en een opgeslagen login verkorten elke herhaalbestelling.
• Loggen klanten in om iets te doen? Abonnementen om te pauzeren of over te slaan, boekingen om te beheren, groothandelsprijslijsten, het volgen van bestellingen en downloads geven mensen allemaal een reden om regelmatig een account te openen.
• Heeft u nieuws dat het vermelden waard is? Drops, aanvullingen, seizoensassortimenten en verkooppush. Een winkel die twee keer per jaar wisselt, heeft weinig te sturen.
• Is de mobiele site al goed? Als telefonische kopers vandaag uw kassa verlaten, neemt een app die op die kassa is gebouwd het probleem over.

Als de meeste van uw bestellingen afkomstig zijn van nieuwe bezoekers die via zoekopdrachten of advertenties arriveren, besteed dan uw aandacht aan de mobiele site. Niemand installeert een app om één keer te kopen.

Wat maakt WooCommerce anders dan een gehoste winkel?

WooCommerce geeft je WordPress en laat je de rest in elkaar zetten. Een typische winkel heeft een thema, een betalingsgateway of drie, een verzendcalculator en vervolgens de plug-ins die het de jouwe maken: WooCommerce-abonnementen, boekingen, productadd-ons, een plug-in voor groothandelsprijzen, een loyaliteitsprogramma, een aangepast afrekenveld voor leveringsbonnen.

Stel daarom bij elke route hieronder één vraag: laat de app zien wat mijn plug-ins toevoegen, of alleen wat de kern van WooCommerce weet?

Wat zijn de vier manieren om een ​​WooCommerce-klantapp te krijgen?

Route 1: Een app-plug-in die de winkel opnieuw opbouwt vanuit de API

Verschillende services zijn via de verbinding met uw winkel verbonden WooCommerce REST-API, meestal met een bijbehorende WordPress-plug-in, en teken producten, categorieën, de winkelwagen en bestellingen als hun eigen native schermen. Je ontwerpt de app in het dashboard van de leverancier en betaalt een abonnement.

Goed in: native productlijsten en productpagina's die scrollen en animeren zoals elke winkel-app, en een startscherm dat u anders kunt indelen dan uw website.

Controleer zorgvuldig: de API beschrijft producten, varianten, klanten en bestellingen. Het beschrijft niet wat een plug-in van derden op de pagina weergeeft. Voor een add-onsformulier, een boekingskalender, op rollen gebaseerde prijzen of een aangepaste betaalstap moet de leverancier ondersteuning voor die specifieke plug-in hebben ingebouwd. Sommige van deze diensten tonen om deze reden de afrekening van uw website in een WebView. Vraag de leverancier om een ​​lijst met ondersteunde extensies en gateways en vergelijk deze vervolgens regel voor regel met uw eigen plug-inlijst.

Route 2: Een website naar app-converter

Een converter bouwt een native shell rond uw live website. De shell levert het app-pictogram, het startscherm, een native header, menu's en onderste tabbladen en optionele pushmeldingen. Uw storefront wordt erin geladen in een WebView, dezelfde browserengine die Safari en Chrome gebruiken.

Goed in: trouw. Wat uw thema en plug-ins ook weergeven op een telefoon, het is wat de app laat zien, omdat het dezelfde pagina van dezelfde server is. Niets hoeft te synchroniseren en u onderhoudt geen tweede catalogus of ontwerp.

Controleer zorgvuldig: u krijgt geen native opnieuw getekende productschermen. De app is net zo snel en overzichtelijk als uw mobiele site en niet beter. Een aantal dingen gedragen zich anders in een embedded browser dan in Safari of Chrome, daar is onderstaand testplan voor.

SiteTo.App neemt deze route. U plakt uw winkel-URL, stelt de naam, het pictogram en de tabbladen in en bekijkt de app gratis op uw eigen telefoon. Een build kost $ 29 voor Android, $ 79 voor iOS of $ 99 voor beide, één keer betaald.

Route 3: Een beheerde app-service

Een beheerde service gebruikt doorgaans dezelfde WebView-aanpak voor uw pagina's en voegt een team toe: zij configureren de app, bouwen aangepaste native schermen waar u maar wilt, dienen deze in bij de winkels en onderhouden deze voor een maandelijks bedrag. Ons Vergelijking SiteTo.App versus MobiLoud bekijkt zo’n dienst in detail.

Route 4: Een app op maat

Een ontwikkelaar of bureau bouwt een app op basis van de REST API en de Store API, waarbij elk scherm voor jouw winkel wordt ontworpen. Dit is de route voor dingen die een website niet kan, zoals volledig offline werken. Het is geprijsd als een project en heeft vervolgens onderhoud nodig, inclusief herwerk wanneer u een plug-in wijzigt waarvan de app afhankelijk is.

Hoe vergelijken de routes?

Het ontwikkelaarslidmaatschap van Apple ($99 per jaar) en de registratie van Google Play ($25 eenmalig) zijn op elke route van toepassing. De kostengids voor website-apps dekt het volledige budget.

Welke route past bij welke WooCommerce winkel?

Kies een API-gebaseerde app-plug-in als uw winkel bijna WooCommerce op voorraad heeft, met eenvoudige en variabele producten en een reguliere gateway, en een native browse-gevoel belangrijker voor u is dan lage vaste kosten.

Kies een omvormer als uw mobiele winkel al goed werkt en een betekenisvol deel ervan afkomstig is van plug-ins. Dat omvat abonnementsboxen, boekingen, productconfigurators, groothandels met ingelogde prijzen en winkels met een aangepaste kassa.

Kies een beheerde service als u wilt dat een team de lancering en het onderhoud beheert, of als u aangepaste native schermen bovenop uw site nodig heeft en de maandelijkse kosten zinvol zijn ten opzichte van uw app-inkomsten.

Kies voor een maatwerkconstructie als de app iets moet doen wat een browser niet kan: offline goed werken, praten met Bluetooth-hardware, augmented reality gebruiken of op de achtergrond blijven werken.

Wanneer is SiteTo.App de verkeerde keuze?

• Uw mobiele site is het probleem. Een langzaam thema of een kassa die lastig is op een telefoon, zal in de app net zo traag en lastig zijn. Repareer eerst de site.
• Je hebt een levenscycluspush nodig. SiteTo.App stuurt een titel, tekst, afbeelding en link naar iedereen die zich heeft aangemeld, via uw eigen Firebase-project. Het verzendt geen geautomatiseerde meldingen over verlaten winkelwagentjes of bestellingen, en het heeft nog geen segmenten of planning.
• U verkoopt digitale inhoud op iOS. De app gebruikt de kassa op uw website en voegt geen in-app-aankoop van Apple toe. Zie de publicatie-opmerkingen hieronder.

Het is ook niet geschikt voor Bluetooth, AR, zwaar offline gebruik of achtergrondverwerking.

Hoe test je een WooCommerce-winkel als app?

Gebruik een echte iPhone en een echte Android-telefoon als u van plan bent beide te verzenden, en doorloop deze stappen in de juiste volgorde. Schrijf de pagina-URL op als er iets mislukt.

Stap 1: Bereid de winkel voor

Zet elke betalingsgateway in de test- of sandbox-modus, of maak een laaggeprijsd verborgen product en een coupon van 100% die u kunt terugbetalen. Maak een nieuw klantaccount aan om te testen.

Stap 2: Blader en bouw een winkelwagentje

Open een categorie, gebruik filters en zoek, en open vervolgens een variabel product. Kies de opties, vul eventuele add-onvelden in en voeg deze toe aan de winkelwagen. Bekijk het aantal minikarren of karren. Als deze op nul blijft, levert een paginacache waarschijnlijk opgeslagen inhoud op. WooCommerce's begeleiding bij het cachen zegt dat de pagina's Winkelwagen, Afrekenen en Mijn account en de bijbehorende sessie- en winkelwagencookies moeten worden uitgesloten van cachen.

Stap 3: Controleer de totalen

Pas een kortingsbon toe, voer een echt verzendadres in en vergelijk de verzendkosten en belasting met hetzelfde winkelwagentje op uw website. Ze moeten exact overeenkomen, omdat dezelfde server de berekeningen uitvoert.

Stap 4: Betaal bij elke gateway

Bij betaling zal een in-app WebView het meest waarschijnlijk verschillen van een telefoonbrowser, dus geef deze stap de meeste tijd.

• Kaartvelden op de pagina, zoals die van WooPayments of Stripe, gedragen zich normaal gesproken zoals op het mobiele internet. Gebruik een testkaart die 3-D Secure activeert en bevestig dat de uitdaging verschijnt en voltooid is.
• Gateways omleiden stuur de klant naar een bank, een portemonnee of een PayPal-venster. Volg het hele pad en bevestig dat je op de pagina met de ontvangen bestelling in de app terechtkomt, en niet in de browser van de telefoon, terwijl de app achterblijft met een verouderde betaalpagina.
• Apple Pay en Google Pay knoppen worden alleen weergegeven als het script van de gateway bepaalt dat de omgeving deze ondersteunt, en een in-app WebView is niet dezelfde omgeving als Safari of Chrome. Google documenteert specifieke vereisten voor Google Pay in Android WebView, en WooPayments publiceert zijn eigen Compatibiliteitsopmerkingen voor express afrekenen. Beschouw portemonneeknoppen als een bonus. Er moet altijd kaartbetaling naast staan.

Controleer daarna of de bestelling met de juiste status in wp-admin verschijnt en of de bevestigingsmail is aangekomen.

Stap 5: Test accounts en sessies

Registreer of log in, open Mijn Account en bekijk een bestelling. Sluit vervolgens de app volledig en open deze opnieuw. U moet nog steeds ingelogd zijn terwijl uw winkelwagen intact is. Vraag een wachtwoordreset aan en volg de e-maillink om te zien waar deze wordt geopend en of de reis terug naar de app zinvol is.

Als u een sociale login-plug-in gebruikt, probeer dan elke knop. Googlen blokkeert het inlogscherm in ingebedde WebViews, dus een knop 'Doorgaan met Google' kan daar een fout weergeven. Inloggen met e-mailadres en wachtwoord is het betrouwbare pad, dus zorg ervoor dat dit wordt aangeboden.

Stap 6: Voer het traject van elke plug-in uit

Maak een lijst van de klantgerichte plug-ins die uw winkel van u maken en voer voor elke winkel één compleet traject uit.

• Subscriptions: koop er een, schort het vervolgens op, wijzig de betaalmethode en annuleer het via Mijn account.
• Bookings: kies een datum en tijd op de kalender op telefoonformaat en voltooi de boeking.
• Groothandel of B2B: log in met een handelsaccount, bevestig dat de handelsprijzen worden weergegeven en plaats een nieuwe bestelling.

Stap 7: Ruim het frame op

Sluit de cookiebanner en eventuele nieuwsbriefpop-ups af. Controleer of de vastgezette koptekst, de onderste balk of de zwevende chatknop van uw thema niet samenvallen met de oorspronkelijke koptekst en tabbladen. SiteTo.App kan scripts uitvoeren die de koptekst en pop-ups van uw site in de app verbergen, dus noteer alles wat u wilt verwijderen. Als een firewall of CAPTCHA u uitdaagt tijdens het inloggen, zorg er dan voor dat een echte klant dit via een telefoon kan doorgeven.

Wat moeten de resultaten u vertellen?

Wat moet je instellen in de app zelf?

Gebruik de oorspronkelijke delen van de app om herhalingsaankopen sneller te laten verlopen.

• Onderste tabbladen: Thuis, Winkel of uw sterkste categorie, Winkelwagen en Mijn account werken voor de meeste winkels. Een winkel die veel bestellingen plaatst, kan er rechtstreeks naar verwijzen /my-account/orders/.
• Winkelwagenbadge: met de hulp van een ontwikkelaar, de SiteTo.App JS SDK kan een URL op uw site bekijken en het nummer ervan weergeven als een badge op een tabblad. WooCommerce's Bewaar het eindpunt van de API-kar retourneert een items_count voor de huidige winkelwagen, die een ontwikkelaar kan gebruiken als badgewaarde.
• Push: verbind de Firebase met behulp van de Firebase-gids en bepaal vooraf wat je gaat versturen.

Product-, prijs- en voorraadwijzigingen in wp-admin verschijnen zonder nieuwbouw in de app. Het wijzigen van het pictogram, de app-naam of andere native instellingen vereist een herbouw, en latere herbouwingen worden afzonderlijk vermeld.

Wat moeten WooCommerce-winkels weten voordat ze publiceren?

Je verzendt de app vanuit je eigen Apple- en Google-accounts. SiteTo.App ondertekent de iOS-build en uploadt deze naar TestFlight in je Apple-account, zodat je geen Mac of Xcode nodig hebt, en geeft je een AAB voor Google Play of een APK. De handleiding maken en publiceren loopt door elke stap. Apple en Google beslissen wat er wordt goedgekeurd, en niemand kan de uitkomst beloven. Deze punten komen vooral naar voren bij WooCommerce-winkels.

Fysieke goederen gebruiken uw eigen kassa. Van Apple Richtlijnen voor app-recensies zeggen dat goederen en diensten die buiten de app worden verbruikt, worden betaald met andere methoden dan in-app-aankopen (paragraaf 3.1.3(e)). Een winkel die producten verzendt, staat op vaste grond.

Digitale goederen zijn anders. Inhoud die in de app wordt gebruikt, zoals een betaalde cursus, een videotheek of een gedeelte dat alleen voor leden is, valt onder de in-app-aankoopregels van Apple in sectie 3.1. Google Play hanteert een eigen betalingsbeleid voor in-app digitale goederen. Lees beide voordat u gaat bouwen of digitale producten of betaalde lidmaatschappen een reëel onderdeel van uw omzet zijn.

Aanbieding accountverwijdering. Apple verwacht van elke app die het aanmaken van accounts ondersteunt, dat mensen hun account vanuit de app kunnen verwijderen. Een standaard WooCommerce Mijn account-pagina heeft een dergelijke optie niet. Voeg er een toe met een plug-in of een duidelijk gelabeld aanvraagformulier.

Geef recensenten een ingang. Als prijzen of producten achter een login zitten, zoals in veel groothandels, geef dan een werkend testaccount op in de beoordelingsnotities.

Toon meer dan een website. Apple's richtlijn 4.2 vraagt ​​apps om meer te bieden dan een vernieuwde site. Native tabbladen, een native header en pushmeldingen helpen, net als een winkel met echte functionaliteit achter een login. De Richtlijn 4.2 gids legt uit hoe u zich moet voorbereiden, en de publicatiegids omvat lijsten, screenshots en privacyantwoorden.

Veelgestelde vragen

Moet ik een WordPress-plug-in installeren?

Niet met een omvormer. SiteTo.App werkt vanuit uw openbare winkel-URL, dus u voegt geen plug-in toe aan WordPress of maakt geen REST API-sleutel. API-gebaseerde app-services hebben meestal een begeleidende plug-in en API-toegang nodig, omdat ze uw catalogus rechtstreeks lezen.

Wat gebeurt er met de app als ik WooCommerce of een plug-in update?

De app toont de bijgewerkte winkel de volgende keer dat deze wordt geopend, zonder nieuwe build. Dat betekent ook dat een plug-in-update die uw mobiele kassa verbreekt, deze op hetzelfde moment in de app verbreekt. Voer een snelle testbestelling uit op een telefoon na belangrijke updates, zoals u dat voor de website zou doen.

Kan ik eerst op Android starten?

Ja. Een Android-build kost $ 29 en Google Play-registratie kost eenmalig $ 25. Het later kopen van de iOS-build kost $ 79, dus de twee afzonderlijk gekochte bedragen $ 108, tegenover $ 99 voor beide samen.

Volgende stap

Open uw winkel op uw telefoon en plaats een testbestelling. Als dat goed gaat, bekijk een voorbeeld van uw WooCommerce-winkel als app voer gratis de zeven bovenstaande stappen uit en controleer prijzen als je eenmaal weet dat het werkt.