プラットフォーム

顧客向け WooCommerce モバイル アプリ: オプションとテスト プラン

WooCommerce の顧客に独自の iOS および Android アプリを提供する方法: 4 つのルートの比較、それぞれが適合する場合、チェックアウト、ログイン、プラグインのテスト計画。

携帯電話と荷物の山の横に鉢植えの植物を包む植物店のオーナーを描いたガッシュのイラスト

顧客向けの WooCommerce モバイル アプリは、ストア名の下にある別個の iOS および Android アプリであり、買い物客は閲覧や購入のためにインストールします。 WooCommerce API からカタログを再描画するアプリ プラグイン、ライブ ストアをロードする Web サイトからアプリへのコンバーター、マネージド サービス、またはカスタム ビルドの 4 つの方法で入手できます。適切なものは主に、ストアのどの程度のプラグインが存在するかによって決まります。

このガイドは、ルートを選択し、お金を使う前にそれが自分のストアで機能することを証明するのに役立ちます。短いバージョンについては、を参照してください。 WooCommerce アプリページへ。 WordPress コンテンツ サイトも含めたより広範な比較については、以下をお読みください。 WordPress からアプリのプラグインとコンバーター.

WooCommerceの公式アプリは顧客向けですか?

いいえ。App Store および Google Play の WooCommerce アプリは、販売者向けの店舗管理アプリです。 WooCommerceの モバイルアプリのドキュメント では、注文を処理し、製品を作成および管理し、対面で支払いを受けるという言葉で説明されています。顧客はそこで買い物をすることはできず、あなたのブランドも掲載されていません。

顧客向けアプリは別物です。ストア名とアイコンがあり、買い物客のホーム画面に表示され、カタログ、カート、アカウント領域が開きます。 WooCommerce は出荷されていないため、各ストアはサードパーティから入手するか、構築しています。

そもそも WooCommerce ストアにはアプリが必要なのでしょうか?

同じ人が何度も購入することで、アプリがその地位を獲得します。ルートを比較する前に、次の質問に照らして店舗を確認してください。

  • 顧客は再注文しますか? コーヒー、ペットフード、サプリメント、スキンケア、印刷用品、貿易部品などが定期的に購入されます。ホーム画面のアイコンと保存されたログインにより、すべてのリピート注文が短縮されます。
  • 顧客は何かをするためにログインしますか? 一時停止またはスキップするサブスクリプション、管理する予約、卸売価格リスト、注文追跡とダウンロードはすべて、定期的にアカウント エリアを開く理由となります。
  • お知らせする価値のあるニュースはありますか? ドロップ、再入荷、季節限定商品、セールスーツのプッシュ。年に2回変わる店は発信するものが少ない。
  • モバイルサイトはすでに充実していますか? 電話での買い物客が今日のチェックアウトを放棄した場合、そのチェックアウト上に構築されたアプリが問題を引き継ぎます。

注文のほとんどが検索や広告からアクセスした初めての訪問者によるものである場合は、代わりにモバイル サイトに力を入れてください。一度購入するためにアプリをインストールする人はいません。

WooCommerce とホスト型ストアの違いは何ですか?

WooCommerce を使用すると WordPress が提供され、残りを組み立てることができます。一般的なストアでは、テーマ、1 つまたは 3 つの支払いゲートウェイ、送料計算ツール、そしてそれを自分のものにするためのプラグイン (WooCommerce サブスクリプション、予約、製品アドオン、卸売価格設定プラグイン、ロイヤリティ スキーム、納品書のカスタム チェックアウト フィールド) を実行しています。

そこで、以下の各ルートについて 1 つの質問をしてください。 アプリはプラグインが追加したものを表示しますか、それともコア WooCommerce が知っているものだけを表示しますか?

WooCommerce カスタマー アプリを入手する 4 つの方法は何ですか?

ルート 1: API からストアを再構築するアプリ プラグイン

いくつかのサービスが、 WooCommerce REST API、通常はコンパニオン WordPress プラグインを使用し、製品、カテゴリ、カート、注文を独自のネイティブ画面として描画します。ベンダーのダッシュボードでアプリを設計し、サブスクリプションを支払います。

得意なこと: 他のショッピング アプリと同様にスクロールおよびアニメーションするネイティブの製品リストと製品ページ、Web サイトとは異なるレイアウトが可能なホーム画面。

注意深く確認してください: API は製品、バリエーション、顧客、注文を記述します。サードパーティのプラグインがページ上で何をレンダリングするかについては説明しません。アドオン フォーム、予約カレンダー、役割ベースの価格、またはカスタム チェックアウト ステップでは、ベンダーがその特定のプラグインのサポートを構築する必要があります。これらのサービスの中には、この理由から Web サイトのチェックアウトを WebView で表示するものがあります。サポートされている拡張機能とゲートウェイのリストをベンダーに問い合わせて、それを独自のプラグイン リストと 1 行ずつ比較してください。

ルート 2: Web サイトからアプリへのコンバーター

コンバーターは、ライブ Web サイトの周囲にネイティブ シェルを構築します。シェルは、アプリのアイコン、起動画面、ネイティブ ヘッダー、メニューと下部のタブ、およびオプションのプッシュ通知を提供します。ストアフロントは、Safari や Chrome が使用するのと同じブラウザ エンジンである WebView で内部に読み込まれます。

得意なこと: 忠実さ。同じサーバーの同じページであるため、テーマやプラグインが携帯電話でレンダリングしたものはすべて、アプリで表示されるものになります。何も同期する必要はなく、2 番目のカタログやデザインを管理する必要もありません。

注意深く確認してください: 製品画面がネイティブに再描画されることはありません。このアプリはモバイル サイトと同じくらい高速かつ整然としており、それ以上のものはありません。埋め込みブラウザでは、Safari や Chrome とは異なる動作をするものがいくつかあります。これが、以下のテスト計画の目的です。

SiteTo.App このルートをとります。ストアの URL を貼り付け、名前、アイコン、タブを設定し、自分の携帯電話でアプリを無料でプレビューします。ビルドの費用は、Android の場合は 29 ドル、iOS の場合は 79 ドル、または両方の場合は 99 ドルで、一度に支払われます。

ルート 3: マネージド アプリ サービス

マネージド サービスは通常、ページに対して同じ WebView アプローチを使用し、チームを追加します。チームはアプリを構成し、必要な場所にカスタム ネイティブ画面を構築し、ストアに送信し、月額料金で維持します。私たちの SiteTo.App と MobiLoud の比較 では、そのようなサービスの 1 つを詳しく見ていきます。

ルート 4: カスタム アプリ

開発者または代理店は、REST API と Store API に基づいてアプリを構築し、すべての画面がストア用に設計されます。これは、完全にオフラインでの作業など、Web サイトでは実行できないことを行うためのルートです。価格はプロジェクトとして設定されており、アプリが依存するプラグインを変更する場合の手戻りを含むメンテナンスが必要になります。

ルートを比較するとどうなるでしょうか?

APIベースのアプリプラグインウェブサイトからアプリへのコンバーターマネージドサービスカスタムアプリ
商品画面とカート画面ベンダーによって描画されたネイティブあなたのモバイルサイトモバイル サイトとカスタム ネイティブ画面ネイティブ、あなたのために作られた
サードパーティのプラグインベンダーがサポートしているもののみモバイルサイトで機能するものなら何でもモバイルサイトで機能するものなら何でもひとつひとつ手作業で一体化
チェックアウトWebView でのベンダーのフローまたはサイトウェブサイトのチェックアウトウェブサイトのチェックアウト構築または埋め込み
価格モデルサブスクリプション1回限りの構築料金月額料金プロジェクトとメンテナンス
ストアに提出する人ベンダーによって異なりますあなたサービスあなたまたはあなたの代理店
店舗変更時の作業プラグインのサポートを再確認する通常は何もありません通常は何もありません開発者の時間

Apple の開発者メンバーシップ (年間 99 ドル) と Google Play の登録 (1 回 25 ドル) はすべてのルートに適用されます。の ウェブサイトアプリの費用ガイド 予算全額をカバーします。

どのルートがどの WooCommerce 店舗に適合しますか?

API ベースのアプリ プラグインを選択する あなたのストアが WooCommerce の在庫品に近く、シンプルで多様な製品と主流のゲートウェイを備え、ネイティブの閲覧感覚が低い固定費よりも重要である場合。

コンバーターを選択してください モバイルストアがすでにうまく機能しており、その重要な部分がプラグインから得られている場合。これには、サブスクリプション ボックス、予約、製品コンフィギュレーター、ログインした価格設定を備えた卸売ストア、カスタマイズされたチェックアウトを備えたストアが含まれます。

マネージド サービスを選択する チームが立ち上げと維持を所有したい場合、またはサイト上にカスタムのネイティブ画面が必要で、月額料金がアプリの収益に見合ったものである場合。

カスタム ビルドを選択する アプリがブラウザでは実行できないことを実行する必要がある場合、オフラインで適切に動作するか、Bluetooth ハードウェアと通信するか、拡張現実を使用するか、バックグラウンドで動作し続けるかです。

SiteTo.App の選択が間違っているのはどのような場合ですか?

  • モバイルサイトが問題です。 携帯電話では遅いテーマやチェックアウトは、アプリでも同様に遅くて扱いにくいものになります。まずサイトを修正してください。
  • ライフサイクルプッシュが必要です。 SiteTo.App は、独自の Firebase プロジェクトを通じて、オプトインした全員にタイトル、テキスト、画像、リンクを送信します。カート放棄や注文ステータスの自動通知は送信されず、セグメントやスケジュール設定もまだありません。
  • iOS でデジタル コンテンツを販売します。 このアプリは Web サイトのチェックアウトを使用し、Apple のアプリ内購入は追加しません。以下の出版メモを参照してください。

また、Bluetooth、AR、頻繁なオフライン使用、またはバックグラウンド処理にも適していません。

WooCommerce ストアをアプリとしてテストするにはどうすればよいですか?

両方を出荷する予定がある場合は、本物の iPhone と本物の Android 携帯電話を使用し、これらの手順を順番に実行してください。何か問題が発生した場合は、そのページの URL を書き留めてください。

ステップ 1: ストアを準備する

各支払いゲートウェイをテスト モードまたはサンドボックス モードにするか、低価格の非表示商品と返金可能な 100% クーポンを作成します。テスト用に新しい顧客アカウントを作成します。

ステップ 2: カートを参照して作成する

カテゴリを開き、フィルターと検索を使用して、可変商品を開きます。オプションを選択し、アドオンフィールドに記入して、カートに追加します。ミニカートまたはカートの数に注目してください。ゼロのままの場合は、ページ キャッシュが保存されたコンテンツを提供している可能性があります。 WooCommerceの キャッシングのガイダンス カート、チェックアウト、マイアカウントのページとそのセッションとカートの Cookie をキャッシュから除外するよう指示されています。

ステップ 3: 合計を確認する

クーポンを適用し、実際の配送先住所を入力し、Web サイト上の同じカートで配送料と税金を比較します。同じサーバーが演算を行っているため、これらは正確に一致する必要があります。

ステップ 4: すべてのゲートウェイで支払う

アプリ内 WebView が携帯電話のブラウザーと最も異なる可能性が最も高いのは支払いです。そのため、このステップに最も多くの時間を費やしてください。

  • ページ上のカードフィールドWooPayments や Stripe などのサービスは、通常、モバイル Web 上で動作するのと同じように動作します。 3-D セキュアをトリガーするテスト カードを使用し、チャレンジが表示されて完了することを確認します。
  • リダイレクトゲートウェイ 顧客を銀行、ウォレット、または PayPal 窓口に送ります。パス全体をたどって、古いチェックアウトが表示されたままになったアプリが携帯電話のブラウザーに表示されるのではなく、アプリ内の注文を受信したページに到達することを確認します。
  • Apple PayとGoogle Pay ボタンは、環境がボタンをサポートしているとゲートウェイのスクリプトが判断した場合にのみ表示され、アプリ内の WebView は Safari や Chrome と同じ環境ではありません。 Google は、次の特定の要件を文書化しています。 Android WebView での Google Pay、WooPayments は独自のを公開しています エクスプレス チェックアウトの互換性に関する注意事項。ウォレットボタンはおまけとして扱いましょう。カード支払いが常に横にある必要があります。

その後、注文が正しいステータスで wp-admin に表示され、確認メールが到着したことを確認します。

ステップ 5: アカウントとセッションをテストする

登録またはサインインし、マイ アカウントを開いて注文を表示します。次に、アプリを完全に閉じて、再度開きます。カートはそのままの状態でサインインしているはずです。パスワードのリセットをリクエストし、電子メールのリンクをクリックして、リンクが開く場所と、アプリに戻る手順が理にかなっているかどうかを確認します。

ソーシャル ログイン プラグインを使用している場合は、各ボタンを試してください。グーグル 埋め込み WebView でサインイン画面をブロックする, そのため、[Google で続行] ボタンを押すとエラーが表示される場合があります。電子メールとパスワードによるログインは信頼できるパスなので、それが提供されていることを確認してください。

ステップ 6: 各プラグインの実行を実行する

あなたのストアをあなたのものにする顧客向けプラグインをリストし、それぞれに対して 1 つの完全なジャーニーを実行します。

  • Subscriptions: 購入してから一時停止し、支払い方法を変更してマイアカウントからキャンセルしてください。
  • Bookings: 携帯電話サイズのカレンダーで日付と時間を選択し、予約を完了します。
  • 卸売またはB2B: 取引アカウントでサインインし、表示される取引価格を確認して、再注文します。

ステップ 7: フレームを整理する

Cookie バナーとニュースレターのポップアップを閉じます。テーマの固定ヘッダー、下部バー、またはフローティング チャット ボタンがネイティブのヘッダーやタブと重複していないことを確認してください。 SiteTo.App は、アプリ内でサイト独自のヘッダーとポップアップを非表示にするスクリプトを実行できるため、削除したいものはすべてメモしてください。ログイン中にファイアウォールまたは CAPTCHA が要求した場合は、実際の顧客が電話でそれを通過できることを確認してください。

結果から何がわかるでしょうか?

結果何をするか
すべては過ぎ去るタブを選択してビルドし、公開に進みます
ウォレットボタンがありませんが、カードは使用できますカードで起動し、ウォレットを後の改良として扱う
リダイレクトゲートウェイがアプリに戻らないページ上のオプションについてゲートウェイに相談するか、別のゲートウェイを提案してください
プラグインのページが携帯電話の幅で改ページされるウェブサイトで修正してください。この修正はモバイル Web ショッピングを行うユーザーにも役立ちます
チェックアウトが遅い、または混乱するアプリを構築する前にモバイル チェックアウトを改善する

アプリ自体では何を設定すればよいでしょうか?

アプリのネイティブ部分を使用すると、繰り返し購入が迅速になります。

  • 下部のタブ: ホーム、ショップ、または最も強力なカテゴリ、カート、およびマイ アカウントは、ほとんどのストアで機能します。再注文の多いストアでは、タブを直接指定することができます。 /my-account/orders/.
  • カートバッジ: 開発者の助けを借りて、 SiteTo.App JS SDK サイト上の URL を監視し、返された番号をタブにバッジとして表示できます。 WooCommerceの ストア API カート エンドポイント を返します items_count 現在のカート用。開発者はバッジ値として使用できます。
  • Push: を使用して Firebase を接続します。 Firebase ガイド そして何を送信するかを事前に決めてください。

wp-admin での製品、価格、在庫の変更は、新しいビルドをしなくてもアプリに表示されます。アイコン、アプリ名、その他のネイティブ設定を変更するには再構築が必要です。その後の再構築は別途お見積りとなります。

WooCommerce ストアが公開する前に知っておくべきことは何ですか?

アプリは自分の Apple アカウントと Google アカウントから送信します。 SiteTo.App は iOS ビルドに署名し、Apple アカウントの TestFlight にアップロードするため、Mac や Xcode は必要なく、Google Play 用の AAB または APK を提供します。の ガイドを作成して公開する 各ステップを順を追って説明します。何を承認するかを決めるのは Apple と Google であり、その結果を約束する人は誰もいません。これらの点は特に WooCommerce ストアに現れます。

物理的な商品の場合は、独自のチェックアウトを使用します。 アップルの アプリレビューガイドライン アプリ外で消費される商品やサービスの支払いはアプリ内購入以外の方法で行われると述べています(セクション 3.1.3(e))。商品を出荷する店舗はしっかりとした地盤にあります。

デジタルグッズは違います。 有料コース、ビデオライブラリ、会員限定エリアなど、アプリ内で使用されるコンテンツは、セクション 3.1 の Apple のアプリ内購入ルールに該当します。 Google Play には、アプリ内デジタル商品に対​​して独自の支払いポリシーがあります。デジタル製品または有料メンバーシップが実際の売上の一部である場合は、構築する前に両方をお読みください。

アカウントの削除を提案します。 Apple は、アカウント作成をサポートするアプリであれば、ユーザーがアプリ内からアカウントの削除を開始できるようにすることを期待しています。デフォルトの WooCommerce マイ アカウント ページにはそのようなオプションはありません。プラグインまたは明確にラベル付けされたリクエスト フォームを使用して追加します。

査読者に道を与えてください。 多くの卸売店舗のように、価格や商品がログインの背後にある場合は、レビューメモに動作するテストアカウントを指定してください。

ウェブサイト以上のものを表示します。 Apple のガイドライン 4.2 では、アプリに再パッケージ化されたサイト以上のものを提供するよう求めています。ネイティブ タブ、ネイティブ ヘッダー、プッシュ通知が役立ちます。ログインの背後にある実際の機能を備えたストアも同様です。の ガイドライン 4.2 ガイド 準備方法と、 出版ガイド リスト、スクリーンショット、プライバシーに関する回答について説明します。

よくある質問

WordPressプラグインをインストールする必要がありますか?

コンバーターなしではありません。 SiteTo.App はパブリック ストア URL から動作するため、WordPress にプラグインを追加したり、REST API キーを作成したりする必要はありません。 API ベースのアプリ サービスはカタログを直接読み取るため、通常はコンパニオン プラグインと API アクセスが必要です。

WooCommerce またはプラグインを更新するとアプリはどうなりますか?

次回アプリを開くと、新しいビルドはなく、更新されたストアが表示されます。これは、プラグインのアップデートによりモバイル チェックアウトが中断されると、同時にアプリ内でもチェックアウトが中断されることを意味します。 Web サイトの場合と同様に、大幅な更新後に電話で簡単なテスト注文を実行します。

最初に Android で起動できますか?

はい。 Android のビルドは 29 ドル、Google Play の登録は 1 回あたり 25 ドルです。 iOS ビルドを後から購入すると 79 ドルかかるため、2 つを別々に購入すると 108 ドルになり、両方を合わせると 99 ドルになります。

次のステップ

スマートフォンでストアを開き、テスト注文を行ってください。それがうまくいけば、 WooCommerce ストアをアプリとしてプレビューする 無料で、上記の 7 つのステップを実行して確認してください 価格設定 それが機能することがわかったら。

Web サイトをアプリとして見る

プラットフォームを選択する前に、エクスペリエンスをカスタマイズしてプレビューします。

プレビューを構築する

読み続けてください

すべてのガイド