WooCommerce Mobile App für Kunden: Optionen und Testplan

Eine mobile WooCommerce-App für Kunden ist eine separate iOS- und Android-App unter dem Namen Ihres Shops, die Käufer zum Stöbern und Kaufen installieren. Sie haben vier Möglichkeiten: ein App-Plugin, das Ihren Katalog aus der WooCommerce-API neu erstellt, einen Website-zu-App-Konverter, der Ihren Live-Shop lädt, einen verwalteten Dienst oder einen benutzerdefinierten Build. Das richtige hängt vor allem davon ab, wie viel von Ihrem Shop in Plugins steckt.

Dieser Leitfaden hilft Ihnen, eine Route auszuwählen und anschließend in Ihrem eigenen Geschäft zu prüfen, ob sie funktioniert, bevor Sie Geld ausgeben. Die Kurzfassung finden Sie im WooCommerce zur App-Seite. Für einen umfassenderen Vergleich, der auch Websites mit WordPress-Inhalten abdeckt, lesen Sie WordPress zu App-Plugins im Vergleich zu Konvertern.

Ist die offizielle WooCommerce-App für Kunden?

Nein. Die WooCommerce-App im App Store und bei Google Play ist eine Store-Management-App für Händler. WooCommerces Dokumentation der mobilen App beschreibt es so: Sie bearbeiten Bestellungen, erstellen und verwalten Produkte und nehmen persönliche Zahlungen entgegen. Ihre Kunden können darin nicht einkaufen und Ihre Marke wird nicht getragen.

Eine Kunden-App ist etwas anderes. Es trägt den Namen und das Symbol Ihres Geschäfts, befindet sich auf dem Startbildschirm eines Käufers und öffnet Ihren Katalog, Ihren Warenkorb und Ihren Kontobereich. WooCommerce liefert keins aus, also bezieht jedes Geschäft es von einem Drittanbieter oder baut es.

Sollte ein WooCommerce-Store überhaupt eine App haben?

Eine App verdient ihren Platz, wenn dieselben Leute immer wieder bei Ihnen kaufen. Überprüfen Sie Ihr Geschäft anhand dieser Fragen, bevor Sie Routen vergleichen.

• Bestellen Kunden nach? Kaffee, Tiernahrung, Nahrungsergänzungsmittel, Hautpflege, Druckzubehör und Ersatzteile werden im Kreislauf eingekauft. Ein Homescreen-Icon und ein gespeicherter Login verkürzen jede Nachbestellung.
• Melden sich Kunden an, um etwas zu tun? Abonnements zum Pausieren oder Überspringen, Buchungen zum Verwalten, Großhandelspreislisten, Auftragsverfolgung und Downloads – all das gibt Menschen einen Grund, regelmäßig einen Kontobereich zu eröffnen.
• Haben Sie Neuigkeiten, die eine Benachrichtigung wert sind? Drops, Wiederauffüllungen, saisonale Sortimente und Verkaufsförderung. Ein Geschäft, das zweimal im Jahr wechselt, hat wenig zu verschicken.
• Ist die mobile Seite bereits gut? Wenn Telefonkäufer Ihren Checkout heute abbrechen, übernimmt eine auf diesem Checkout basierende App das Problem.

Wenn die meisten Ihrer Bestellungen von Erstbesuchern stammen, die über die Suche oder Anzeigen ankommen, sollten Sie sich lieber auf die mobile Website konzentrieren. Niemand installiert eine App, um sie einmal zu kaufen.

Was unterscheidet WooCommerce von einem gehosteten Shop?

Mit WooCommerce erhalten Sie WordPress und können den Rest zusammenbauen. Ein typisches Geschäft betreibt ein Theme, ein oder drei Zahlungsgateways, einen Versandrechner und dann die Plugins, die es zu Ihrem eigenen machen: WooCommerce-Abonnements, Buchungen, Produkt-Add-Ons, ein Großhandelspreis-Plugin, ein Treueprogramm, ein benutzerdefiniertes Checkout-Feld für Lieferscheine.

Stellen Sie also zu jeder Route unten eine Frage: Zeigt die App an, was meine Plugins hinzufügen, oder nur den Kern, den WooCommerce kennt?

Welche vier Möglichkeiten gibt es, eine WooCommerce-Kunden-App zu erhalten?

Route 1: Ein App-Plugin, das den Store über die API neu aufbaut

Mehrere Dienste stellen über das eine Verbindung zu Ihrem Shop her WooCommerce REST-API, normalerweise mit einem begleitenden WordPress-Plugin, und zeichnen Sie Produkte, Kategorien, den Warenkorb und Bestellungen als eigene native Bildschirme. Sie entwerfen die App im Dashboard des Anbieters und zahlen ein Abonnement.

Gut in: Native Produktlisten und Produktseiten, die wie jede Shopping-App scrollen und animiert sind, sowie einen Startbildschirm, den Sie anders gestalten können als Ihre Website.

Überprüfen Sie sorgfältig: Die API beschreibt Produkte, Variationen, Kunden und Bestellungen. Es wird nicht beschrieben, was ein Drittanbieter-Plugin auf der Seite rendert. Für ein Add-on-Formular, einen Buchungskalender, rollenbasierte Preise oder einen benutzerdefinierten Checkout-Schritt muss der Anbieter jeweils über integrierte Unterstützung für das jeweilige Plugin verfügen. Aus diesem Grund zeigen einige dieser Dienste Ihren Website-Checkout in einem WebView an. Bitten Sie den Anbieter um eine Liste der unterstützten Erweiterungen und Gateways und vergleichen Sie diese dann Zeile für Zeile mit Ihrer eigenen Plugin-Liste.

Route 2: Ein Website-zu-App-Konverter

Ein Konverter erstellt eine native Hülle um Ihre Live-Website. Die Shell stellt das App-Symbol, den Startbildschirm, eine native Kopfzeile, Menüs und untere Registerkarten sowie optionale Push-Benachrichtigungen bereit. Ihre Storefront wird darin in einem WebView geladen, der gleichen Browser-Engine, die Safari und Chrome verwenden.

Gut in: Treue. Was auch immer Ihr Theme und Ihre Plugins auf einem Telefon rendern, wird von der App angezeigt, da es sich um dieselbe Seite vom selben Server handelt. Es muss nichts synchronisiert werden und Sie pflegen keinen zweiten Katalog oder Design.

Überprüfen Sie sorgfältig: Sie erhalten keine nativ neu gezeichneten Produktbildschirme. Die App ist genauso schnell und aufgeräumt wie Ihre mobile Website und nicht besser. In einem eingebetteten Browser verhalten sich einige Dinge anders als in Safari oder Chrome, wofür der folgende Testplan dient.

SiteTo.App geht diesen Weg. Sie fügen Ihre Shop-URL ein, legen den Namen, das Symbol und die Registerkarten fest und zeigen die App kostenlos auf Ihrem eigenen Telefon an. Ein Build kostet 29 $ für Android, 79 $ für iOS oder 99 $ für beide, einmal bezahlt.

Route 3: Ein verwalteter App-Dienst

Ein verwalteter Dienst verwendet in der Regel den gleichen WebView-Ansatz für Ihre Seiten und fügt ein Team hinzu: Sie konfigurieren die App, erstellen benutzerdefinierte native Bildschirme an der gewünschten Stelle, übermitteln sie an die Stores und warten sie gegen eine monatliche Gebühr. Unser Vergleich zwischen SiteTo.App und MobiLoud befasst sich ausführlich mit einem solchen Dienst.

Route 4: Eine benutzerdefinierte App

Ein Entwickler oder eine Agentur erstellt eine App anhand der REST-API und der Store-API, wobei jeder Bildschirm für Ihren Shop konzipiert ist. Dies ist der Weg für Dinge, die eine Website nicht kann, beispielsweise vollständig offline zu arbeiten. Der Preis wird als Projekt berechnet und erfordert dann Wartung, einschließlich Überarbeitung, wenn Sie ein Plugin ändern, von dem die App abhängt.

Wie vergleichen sich die Routen?

Die Entwicklermitgliedschaft von Apple (99 US-Dollar pro Jahr) und die Registrierung bei Google Play (einmalig 25 US-Dollar) gelten für jede Route. Der Kostenführer für Website-Apps deckt das gesamte Budget ab.

Welche Route passt zu welchem ​​WooCommerce-Store?

Wählen Sie ein API-basiertes App-Plugin Wenn Ihr Geschäft in der Nähe von WooCommerce auf Lager ist, mit einfachen und variablen Produkten und einem Mainstream-Gateway, und ein natives Browsing-Gefühl für Sie wichtiger ist als niedrige Fixkosten.

Wählen Sie einen Konverter wenn Ihr mobiler Shop bereits gut funktioniert und ein sinnvoller Teil davon aus Plugins stammt. Dazu gehören Abo-Boxen, Buchungen, Produktkonfiguratoren, Großhandelsgeschäfte mit eingeloggter Preisgestaltung und Geschäfte mit individuellem Checkout.

Wählen Sie einen verwalteten Dienst Wenn Sie möchten, dass ein Team für den Start und die Wartung verantwortlich ist, oder wenn Sie benutzerdefinierte native Bildschirme über Ihrer Website benötigen und die monatliche Gebühr im Vergleich zu Ihren App-Einnahmen sinnvoll ist.

Wählen Sie einen benutzerdefinierten Build Wenn die App etwas tun muss, was ein Browser nicht kann: Offline ordnungsgemäß arbeiten, mit Bluetooth-Hardware kommunizieren, Augmented Reality nutzen oder im Hintergrund weiterarbeiten.

Wann ist SiteTo.App die falsche Wahl?

• Ihre mobile Website ist das Problem. Ein langsames Theme oder ein Checkout, der auf einem Telefon umständlich ist, wird in der App genauso langsam und umständlich sein. Reparieren Sie zuerst die Site.
• Sie benötigen einen Lifecycle-Push. SiteTo.App sendet über Ihr eigenes Firebase-Projekt einen Titel, Text, ein Bild und einen Link an alle, die sich angemeldet haben. Es werden keine automatischen Benachrichtigungen über abgebrochene Warenkörbe oder Bestellstatus gesendet und es gibt noch keine Segmente oder Planungen.
• Sie verkaufen digitale Inhalte auf iOS. Die App nutzt Ihren Website-Checkout und fügt den In-App-Kauf von Apple nicht hinzu. Siehe die Veröffentlichungshinweise unten.

Es eignet sich auch nicht für Bluetooth, AR, starke Offline-Nutzung oder Hintergrundverarbeitung.

Wie testet man einen WooCommerce-Store als App?

Verwenden Sie ein echtes iPhone und ein echtes Android-Telefon, wenn Sie beide versenden möchten, und führen Sie diese Schritte der Reihe nach durch. Notieren Sie sich die Seiten-URL, wenn etwas fehlschlägt.

Schritt 1: Bereiten Sie den Laden vor

Versetzen Sie jedes Zahlungsgateway in den Test- oder Sandbox-Modus oder erstellen Sie ein preisgünstiges verstecktes Produkt und einen 100 %-Gutschein, den Sie zurückerstatten können. Erstellen Sie zum Testen ein neues Kundenkonto.

Schritt 2: Durchsuchen und erstellen Sie einen Warenkorb

Öffnen Sie eine Kategorie, verwenden Sie Filter und Suche und öffnen Sie dann ein variables Produkt. Wählen Sie die Optionen aus, füllen Sie alle Zusatzfelder aus und legen Sie es in den Warenkorb. Beobachten Sie, wie der Mini-Wagen oder der Wagen zählt. Wenn der Wert auf Null bleibt, stellt wahrscheinlich ein Seitencache gespeicherte Inhalte bereit. WooCommerces Caching-Anleitung sagt, dass die Seiten „Warenkorb“, „Kasse“ und „Mein Konto“ sowie deren Sitzungs- und Warenkorb-Cookies vom Caching ausgeschlossen werden sollen.

Schritt 3: Gesamtsummen prüfen

Lösen Sie einen Gutschein ein, geben Sie eine echte Lieferadresse ein und vergleichen Sie die Versandkosten und Steuern mit demselben Warenkorb auf Ihrer Website. Sie sollten genau übereinstimmen, da derselbe Server die Berechnung durchführt.

Schritt 4: Bezahlen Sie mit jedem Gateway

Beim Bezahlen unterscheidet sich ein In-App-WebView am ehesten von einem Telefonbrowser. Nehmen Sie sich daher möglichst viel Zeit für diesen Schritt.

• Kartenfelder auf der Seite, wie die von WooPayments oder Stripe, verhalten sich normalerweise wie im mobilen Web. Verwenden Sie eine Testkarte, die 3-D Secure auslöst, und bestätigen Sie, dass die Herausforderung angezeigt und abgeschlossen wird.
• Gateways umleiten Senden Sie den Kunden an eine Bank, ein Wallet oder ein PayPal-Fenster. Folgen Sie dem gesamten Pfad und vergewissern Sie sich, dass Sie auf der Seite „Bestellung erhalten“ innerhalb der App landen, nicht im Browser des Telefons, während in der zurückgelassenen App ein veralteter Bezahlvorgang angezeigt wird.
• Apple Pay und Google Pay Schaltflächen werden nur angezeigt, wenn das Skript des Gateways entscheidet, dass die Umgebung sie unterstützt, und ein In-App-WebView ist nicht dieselbe Umgebung wie Safari oder Chrome. Google dokumentiert spezifische Anforderungen für Google Pay in Android WebView, und WooPayments veröffentlicht sein eigenes Kompatibilitätshinweise zum Express-Checkout. Behandeln Sie Brieftaschenknöpfe als Bonus. Daneben muss immer Kartenzahlung möglich sein.

Überprüfen Sie anschließend, ob die Bestellung im wp-admin mit dem richtigen Status erscheint und die Bestätigungs-E-Mail angekommen ist.

Schritt 5: Testen Sie Konten und Sitzungen

Registrieren Sie sich oder melden Sie sich an, öffnen Sie „Mein Konto“ und sehen Sie sich eine Bestellung an. Schließen Sie anschließend die App vollständig und öffnen Sie sie erneut. Sie sollten weiterhin mit intaktem Warenkorb angemeldet sein. Fordern Sie eine Passwortzurücksetzung an und folgen Sie dem E-Mail-Link, um zu sehen, wo er geöffnet wird und ob der Weg zurück zur App sinnvoll ist.

Wenn Sie ein Social-Login-Plugin verwenden, probieren Sie jede Schaltfläche aus. Google blockiert seinen Anmeldebildschirm in eingebetteten WebViews, sodass bei der Schaltfläche „Weiter mit Google“ dort möglicherweise ein Fehler angezeigt wird. Die Anmeldung per E-Mail und Passwort ist der zuverlässige Weg. Stellen Sie daher sicher, dass er angeboten wird.

Schritt 6: Führen Sie die Reise jedes Plugins durch

Listen Sie die kundenorientierten Plugins auf, die Ihren Shop zu Ihrem eigenen machen, und führen Sie für jedes eine vollständige Journey durch.

• Subscriptions: Kaufen Sie eines, sperren Sie es dann, ändern Sie die Zahlungsmethode und kündigen Sie es in „Mein Konto“.
• Bookings: Wählen Sie im Kalender in Telefongröße ein Datum und eine Uhrzeit aus und schließen Sie die Buchung ab.
• Großhandel oder B2B: Melden Sie sich mit einem Handelskonto an, bestätigen Sie die angezeigten Handelspreise und geben Sie eine Nachbestellung auf.

Schritt 7: Räumen Sie den Rahmen auf

Schließen Sie das Cookie-Banner und alle Newsletter-Popups. Stellen Sie sicher, dass der Sticky-Header, die untere Leiste oder die schwebende Chat-Schaltfläche Ihres Themes nicht mit dem nativen Header und den Tabs verdoppelt werden. SiteTo.App kann Skripte ausführen, die den eigenen Header und Pop-ups Ihrer Website in der App verbergen. Notieren Sie sich daher alles, was Sie entfernen möchten. Wenn Sie bei der Anmeldung durch eine Firewall oder ein CAPTCHA herausgefordert werden, stellen Sie sicher, dass ein echter Kunde es auf einem Telefon weitergeben kann.

Was sollen Ihnen die Ergebnisse sagen?

Was sollten Sie in der App selbst einrichten?

Nutzen Sie die nativen Teile der App, um Wiederholungskäufe zu beschleunigen.

• Untere Registerkarten: „Startseite“, „Shop“ oder Ihre stärkste Kategorie, „Warenkorb“ und „Mein Konto“ funktionieren für die meisten Geschäfte. Ein Geschäft mit vielen Nachbestellungen kann mit einem Tab direkt darauf zeigen /my-account/orders/.
• Warenkorb-Abzeichen: mit der Hilfe eines Entwicklers die SiteTo.App JS SDK Sie können eine URL auf Ihrer Website ansehen und die zurückgegebene Nummer als Abzeichen auf einer Registerkarte anzeigen. WooCommerces Store-API-Warenkorb-Endpunkt gibt eine zurück items_count für den aktuellen Warenkorb, den ein Entwickler als Badge-Wert verwenden kann.
• Push: Verbinden Sie Firebase mit dem Firebase-Anleitung und entscheiden Sie im Voraus, was Sie senden möchten.

Produkt-, Preis- und Lagerbestandsänderungen in wp-admin werden in der App angezeigt, ohne dass ein neuer Build erforderlich ist. Das Ändern des Symbols, des App-Namens oder anderer nativer Einstellungen erfordert einen Neuaufbau. Spätere Neuaufbauten werden separat angegeben.

Was müssen WooCommerce-Shops vor der Veröffentlichung wissen?

Sie übermitteln die App über Ihre eigenen Apple- und Google-Konten. SiteTo.App signiert den iOS-Build und lädt ihn in Ihrem Apple-Konto auf TestFlight hoch, sodass Sie keinen Mac oder Xcode benötigen, und gibt Ihnen ein AAB für Google Play oder ein APK. Der Leitfaden erstellen und veröffentlichen geht jeden Schritt durch. Apple und Google entscheiden, was genehmigt wird, und niemand kann das Ergebnis versprechen. Diese Punkte fallen insbesondere bei WooCommerce-Stores auf.

Physische Waren nutzen Ihren eigenen Checkout. Apples Richtlinien zur App-Überprüfung sagen, dass außerhalb der App konsumierte Waren und Dienstleistungen mit anderen Methoden als dem In-App-Kauf bezahlt werden (Abschnitt 3.1.3(e)). Ein Geschäft, das Produkte versendet, steht auf festem Boden.

Digitale Güter sind anders. Inhalte, die innerhalb der App verwendet werden, wie etwa ein kostenpflichtiger Kurs, eine Videobibliothek oder ein nur für Mitglieder zugänglicher Bereich, fallen unter die Regeln für In-App-Käufe von Apple in Abschnitt 3.1. Google Play verfügt über eigene Zahlungsrichtlinien für digitale In-App-Güter. Lesen Sie beides, bevor Sie aufbauen, ob digitale Produkte oder kostenpflichtige Mitgliedschaften einen echten Teil Ihres Umsatzes ausmachen.

Kontolöschung anbieten. Apple erwartet von jeder App, die die Kontoerstellung unterstützt, dass Benutzer mit der Löschung ihres Kontos aus der App heraus beginnen können. Auf der Standardseite „Mein Konto“ von WooCommerce gibt es keine solche Option. Fügen Sie eines mit einem Plugin oder einem klar gekennzeichneten Anfrageformular hinzu.

Geben Sie den Rezensenten einen Weg hinein. Wenn Preise oder Produkte hinter einem Login stehen, wie in vielen Großhandelsgeschäften, geben Sie in den Bewertungsnotizen ein funktionierendes Testkonto an.

Zeigen Sie mehr als eine Website. Apples Richtlinie 4.2 verlangt von Apps, mehr als eine neu gepackte Website anzubieten. Native Tabs, ein nativer Header und Push-Benachrichtigungen helfen ebenso wie ein Shop mit echter Funktionalität hinter einem Login. Der Leitlinie 4.2 Leitfaden erklärt, wie man sich vorbereitet und wie Verlagsführer umfasst Auflistungen, Screenshots und Antworten zum Datenschutz.

Häufige Fragen

Muss ich ein WordPress-Plugin installieren?

Nicht mit einem Konverter. SiteTo.App funktioniert über Ihre öffentliche Store-URL, Sie müssen also kein Plugin zu WordPress hinzufügen oder einen REST-API-Schlüssel erstellen. API-basierte App-Dienste benötigen normalerweise ein Begleit-Plugin und API-Zugriff, da sie Ihren Katalog direkt lesen.

Was passiert mit der App, wenn ich WooCommerce oder ein Plugin aktualisiere?

Die App zeigt beim nächsten Öffnen den aktualisierten Store an, ohne dass ein neuer Build erforderlich ist. Das bedeutet auch, dass ein Plugin-Update, das Ihren mobilen Checkout unterbricht, ihn gleichzeitig auch in der App unterbricht. Führen Sie nach wichtigen Aktualisierungen eine schnelle Testbestellung auf einem Telefon durch, wie Sie es auch für die Website tun würden.

Kann ich zuerst auf Android starten?

Ja. Ein Android-Build kostet 29 US-Dollar und die Google Play-Registrierung kostet einmalig 25 US-Dollar. Der spätere Kauf des iOS-Builds kostet allein 79 US-Dollar, sodass die beiden separat gekauften Versionen 108 US-Dollar gegenüber 99 US-Dollar für beide zusammen kosten.

Nächster Schritt

Öffnen Sie Ihren Shop auf Ihrem Telefon und geben Sie eine Testbestellung auf. Wenn das gut geht, Sehen Sie sich Ihren WooCommerce-Shop als App in der Vorschau an kostenlos herunterladen, führen Sie die sieben oben genannten Schritte aus und überprüfen Sie Preisgestaltung sobald man weiß, dass es funktioniert.