チュートリアル

AIでWooCommerceストアを構築：商品、カート、Checkout

オンラインで商品を販売してみたいですか？ShipPressでストアデザインを選ぶだけで、すでにWooCommerceがインストールされた本物のWordPressショップが手に入ります。このチュートリアルでは、小さな調理器具ショップ「Tsuki Cookware」を構築し、AIとチャットするだけでカスタマイズしていきます。

執筆：Oberon Lai。私はShipPress（Codotx, LLC）を開発しているため、これは自社製品の紹介です。

動画を再生

1. ストアデザインを選ぶ

   デザインウォールで、E-commerceで絞り込みます。これらのデザインはショップ向けに作られており、サンプル商品が付属しています。動画ではKama Cookwareを選び、サイト名をTsuki Cookwareにして、Use this designをクリックします。

   ShipPressがお使いのコンピューター上にストアをセットアップし、WooCommerceもあらかじめインストールされます。初回は1分ほどかかる場合があります。準備ができたら、Siteタブをクリックしてホームページを表示し、ページ一覧からShopページを開きます。ユーロ表記のサンプル商品が表示されているのが確認できます。

2. チャットで商品を変更する

   それでは、自分好みのショップにカスタマイズしていきましょう。チャットでAIに、ショップの通貨を日本円に変更し、新しい価格を設定し、銅製フライパンをセールにして、新商品として鉄製玉子焼き器を追加するよう依頼します。

   AIがストアの商品と設定を順次処理します。完了すると、変更内容が表として表示され、各商品の新価格、セール価格、在庫数を確認できます。

3. Shopページに実際の商品を表示する

   Shopページに戻ると、カードに以前の価格がまだ表示されている場合があります。一部のデザインでは、商品カードがストアから読み込まれるのではなく、ページ内に直接書き込まれているためです。

   AIに「Shopページの製品リストに、ストアの実際の商品を現在の価格で表示してください」と伝えるだけです。AIがカードを最新の商品リストに置き換えてくれます。これで、Shopページにはストアの全商品が日本円で、Add to cartボタン、セール価格、新商品とともに直接表示されます。後で価格を変更しても、ページに自動で反映されます。

4. お客様目線でカートを試す

   商品をカートに追加し、View cartをクリックします。カートにはセール価格が表示されます。Proceed to checkoutをクリックしてください。

   開設したばかりのストアではまだ決済方法が有効になっていないため、Checkout画面には決済方法がない旨が表示されます。これは新しいWooCommerceストアでは正常な動作です。

5. 決済方法を有効にして注文する

   AIに、ひとまずCash on deliveryを有効にするよう依頼します。AIが決済方法を有効化し、お客様がCheckout時に目にする文言を設定してくれます。

   プレビュー上部のページ一覧を開き、Checkoutを選択します。支払い方法の選択肢としてCash on deliveryが表示されるようになります。購入者と同じように必要事項を入力し、注文内容を確認してPlace orderをクリックします。Cash on deliveryで支払われた「Order received」という完了メッセージが表示されます。

6. WooCommerceで商品と注文を確認する

   Dashboardタブをクリックします。これがストアのWordPress管理画面で、メニューにWooCommerceが含まれています。

   • Productsには、すべての商品が価格、セール価格、在庫数とともに一覧表示されます。ここから手動で編集することも可能です。
   • WooCommerce › Ordersには、先ほど発注した注文がステータスや合計金額とともに表示されます。

   通常のWordPressサイトで使用するWooCommerceとまったく同じです。

7. ストアをオンラインで公開する

   準備ができたら、Go liveをクリックします。ストアの場合、ShipPressはWordPressホストを案内します。Free addressタブでその理由が説明されています。カート、Checkout、顧客ログインにはサーバー上でWordPressが動作している必要があり、静的なコピー（単なるWebファイル）ではそれらが一切機能しないためです。

   そのため、WordPressホストを選択してください。選択肢についてはGo liveを、ご自身のホストへのサイト移行についてはサイトはお客様のものですをご覧ください。

8. ヒント

   • E-commerceフィルターから始める：デザインウォールで選択すると、WooCommerceが最初からインストールされます。
   • チャットで商品、価格、セール、在庫を変更する：AIが提示する変更内容の表を確認してください。
   • Shopページの価格が古いままですか？ AIにストアの実際の商品を表示するよう依頼しましょう。
   • 決済方法を有効にする：最初のテスト注文を行う前に有効化しておきましょう。
   • Dashboardタブを使う：商品と注文の確認・管理に使用します。
   • ストアのGo liveにはWordPressホストが必要：静的なコピーでは動作しません。

9. 次のステップ

   AIにさらに変更を依頼する方法については、チャットでサイトを編集するをご覧ください。wp-adminやプラグインについて詳しく知るには、本物のWordPressをご覧ください。変更を取り消したい場合は、復元ポイントでAIの変更を取り消すをご覧ください。