要約:WordPressにショッピングカートを追加する方法(ステップバイステップ)
WordPressにはデフォルトでカートが搭載されていません。ここでは、それをライブにしてコンバージョンを促進する最も簡単な方法を紹介します。
- 必要なものを理解する – WordPressショッピングカートは、製品選択、価格設定、チェックアウトを1か所で行うプラグインです。
- WooCommerceをインストールする – どのWordPressサイトにも完全なカートとチェックアウトを追加できる無料プラグインです。
- セットアップウィザードを実行する – ストアの詳細を入力し、製品タイプを選択し、支払いゲートウェイを設定します。
- 製品を追加する – CSVでインポートするか、WooCommerceダッシュボードから手動でアイテムを追加します。
- SeedProdでカートページをカスタマイズする – ドラッグアンドドロップブロックを使用して、デフォルトのカートを高コンバージョンカスタムレイアウトに置き換えます。
- 公開して接続する – WooCommerceを新しいカートURLにポイントして、公開します。
最初にWordPressにショッピングカートを追加する必要があったとき、私はフラストレーションを感じました。WordPressにはデフォルトでカートやチェックアウト機能が含まれておらず、コーディングに時間を費やしたくありませんでした。良いニュースは、適切なプラグインを使用すれば、WordPressにショッピングカートをすばやく追加できるということです。
このガイドでは、WooCommerceを使用してWordPressにショッピングカートを追加する方法をステップバイステップで説明します。また、コンバージョンを増やし、シームレスなチェックアウト体験を作成するために、SeedProdでカートページをカスタマイズする方法も紹介します。
WordPressショッピングカートとは?
WordPressショッピングカートは、顧客がサイトを離れることなく、製品を追加し、選択内容を管理し、支払いを完了できるプラグインです。 WordPressには、これらの機能は標準で含まれていません。
新規インストールされたWordPressには、カート、チェックアウト、支払い処理機能はありません。これらの機能を追加するには、専用のeコマースプラグインが必要です。
最も広く使用されているオプションはWooCommerceで、無料であり、このガイドの手順で使用します。インストールすると、カート、チェックアウト、アカウントページが自動的に作成されます。
WordPressに最適なショッピングカートプラグインは何ですか?
利用可能なWordPressショッピングカートプラグインはいくつかありますが、私が繰り返し使用しているのは、WordPressで最も人気のあるeコマースプラグインであるWooCommerceです。

WooCommerceは、WordPressサイトで物理的およびデジタル製品を販売できる無料のオープンソースプラグインです。
Stripe、PayPal、Amazon Pay、Authorize.netなどの支払いゲートウェイを使用してクレジットカード決済を受け付けることができます。また、代金引換や小切手などのオフラインオプションも利用できます。
注文が入ると、ダッシュボードからステータスを管理します。USPSやFedExなどの配送業者と連携し、何千もの拡張機能を追加してストアの機能を拡張できます。
WooCommerceはどのWordPressテーマとも連携し、このガイド全体で使用します。それでは始めましょう。
WooCommerceを使用してWordPressにショッピングカートを追加する方法
開始するには、WordPressダッシュボードにログインし、プラグイン » 新規追加に移動します。「WooCommerce」を検索し、「今すぐインストール」をクリックしてから、「有効化」をクリックします。

WooCommerceを有効化すると、セットアップウィザードが起動します。

ステップ1:ビジネスの説明
まず、Wooにストアの現在の段階を伝える必要があります。このガイドでは、「すでに販売しています」をクリックし、ドロップダウンメニューからオンライン販売オプションを選択します。
次に、使用しているプラットフォーム(この場合はWordPress)を選択できます。

ステップ2:WooCommerceストアの詳細を入力する
次の画面で、ストアの名前、業種、所在地など、ビジネスに関する詳細情報を入力します。詳細を入力して続行をクリックします。

ステップ3:オプションのWoo機能のインストール
次の画面で、推奨される機能を自動的にインストールできます。これは後で確認してから設定することもできますので、今はスキップしてもかまいません。

これでセットアップウィザードは完了です。次に、WordPressダッシュボードに戻り、商品の追加を開始できます。
ステップ4:WooCommerceストアに商品を追加する
ストアの設定が完了したら、WooCommerce » ホームに移動し、「商品のインポート」オプションをクリックします。

WooCommerceに商品を追加するには、いくつかの方法があります。
- テンプレートから始める
- 各商品を個別に追加する
- CSV経由で商品をインポートする
- 他のサービスから商品をインポートする
最も簡単な方法の1つは、CSVファイルから商品をインポートすることなので、このオプションを選択しましょう。

商品CSVファイルを選択し、続行をクリックします。

WooCommerceは、CSVフィールドを画像、価格、説明などの商品フィールドにマッピングするように求めます。マッピングが完了したら、インポーターを実行をクリックします。商品の数によっては、数分かかる場合があります。
ステップ7:WooCommerceの支払い方法を設定する
WordPress管理画面に移動し、支払いタブをクリックします。各支払い方法のセットアップ手順に従ってください。Stripe、PayPalなどが推奨アドオンとして利用可能です。完了したら変更を保存をクリックします。

費用について疑問に思っている読者にとって注目すべき点:WooCommerce自体は完全に無料です。WooCommerce Payments(クレジットカードを受け入れるため)も月額料金なしで無料です。トランザクションごとの手数料のみが発生します。
よりシンプルなオプションが必要な場合は、WordPress Simple Shopping Cartは、WooCommerceの完全なセットアップなしで、基本的なPayPalまたはStripeストア向けの無料プラグインです。
WooCommerceストアがセットアップされたので、ショッピングカートについて疑問に思っているかもしれません。WooCommerceは自動的に次のページを作成します。
- カートページ
- チェックアウトページ
- マイアカウントページ
他に特別な操作は必要ありません。しかし、カスタムWooCommerceカートページを使用すると、売上とコンバージョンを大幅に増やすことができます。
Baymard Instituteによると、買い物客の約70%が購入を完了する前にカートを放棄しています。デフォルトのWooCommerceカートページを最適化することで、現在のトラフィックを増やさなくても、より多くの売上を上げることができます。
訪問者がカートに商品を入れているとき、購入完了は間近です。あなたのWooCommerceカートページは、それを実現するために可能な限りのことを行うべきです。
これを念頭に置いて、SeedProdを使用してカスタムWooCommerceカートページを作成する方法を見てみましょう。
SeedProdでWooCommerceカートページをカスタマイズするにはどうすればよいですか?
WooCommerceのセットアップが完了したら、100万以上のウェブサイトで使用されているドラッグ&ドロップのウェブサイトビルダーであるSeedProdを使用して、コンバージョン率の高いカスタムショッピングカートページをデザインできます。
これにより、開発者を雇うことなく、より多くの売上を上げるためのカスタム WooCommerce カート ページを構築できます。また、WordPress で あらゆるランディングページを作成したり、ローンチ前に WooCommerce の近日公開ページ を設定したりするためにも使用できます。

ビデオチュートリアル
ステップ1: SeedProdのインストールと有効化
開始するには、SeedProd プラグインをインストールして有効化します。ここをクリックして SeedProd の使用を開始してください。
ヘルプが必要な場合は、WordPress プラグインのインストール方法 に関するこのガイドに従ってください。
注意: SeedProd の 無料バージョン もありますが、このチュートリアルでは、必要な WooCommerce ブロックが含まれているため、Pro バージョンを使用します。
プラグインを有効化した後、SeedProd » 設定 に移動し、製品ライセンス キーを入力します。これは、SeedProd ウェブサイトのアカウントダッシュボードで見つけることができます。

ステップ2:新しいカスタムWooCommerceカートページを作成する
ライセンス キーを確認したら、SeedProd » ページ に移動し、「新しいランディングページを追加」ボタンをクリックします。

すぐに既製のデザインを追加するために使用できる ランディングページテンプレート のライブラリが表示されます。

ほぼすべてのビジネス目標に対応する、専門的にデザインされた多数のテンプレートがあります。テンプレートにカーソルを合わせ、チェックマークアイコンをクリックして選択します。
このガイドでは、必須のページ要素のみを追加したいので、空白テンプレート を使用します。

次に表示されるポップアップで、ショッピングカートページの名前を入力します。次に、保存してページの編集を開始 をクリックします。
ステップ3:カートページのレイアウトとデザインをカスタマイズする
ページに名前を付けた後、SeedProd はドラッグ アンド ドロップ ビルダーを開きます。ここで、カートページの主要な部分を組み立てます。
ロゴを追加する
まず画像ブロックを追加して、ロゴをアップロードできるようにします。このブロックは、開発者を雇うことなく、ウェブサイトのヘッダー のように見えるように調整できます。
ブランドの一貫性を保ち、ユーザーがページを離れる場所を少なくすることで、ショッピングカートの放棄を減らす のに役立ちます。
画像ブロック を選択し、右側のページプレビューにドラッグします。コンピューターまたは WordPress メディアライブラリからロゴをアップロードします。

ブロックをクリックすると左側のパネルが開き、ロゴのサイズ、配置、リンクの動作を完全にカスタマイズできます。

ショッピングカートを追加する
次に、カートページのレイアウトに新しい列を追加します。「レイアウトを選択」セクションで、コンテンツとサイドバーのオプションを選択しました。

このレイアウトでは、ショッピングカートのセクションと、レビューやお客様の声を表示する領域が提供されます。まずカートを追加しましょう。
下にスクロールして WooCommerce ブロックセクションに移動します。カート ブロックをコンテンツ列にドラッグします。WooCommerce カートがプレビューに自動的に表示されます。

ブロックをクリックすると、ボタンのラベル、色、フィールドの背景など、カートのすべての部分をカスタマイズできます。

お客様の声を含める
SeedProd の お客様の声 ブロックを追加して、ソーシャルプルーフを表示し、ユーザーにサイドバー列からのチェックアウトを促します。高度な ブロックの下にあり、所定の位置にドラッグします。

このブロックを使用すると、お客様の声の外観を完全に制御できます。複数のレビューを追加 したり、カスタム写真を選択したり、スライド式カルーセルを設定したりできます。
ソーシャルプルーフをさらに強化するために、レビューの下に星評価ブロックを追加します。

そこから、評価アイコン、色、位置などをカスタマイズできます。
カートページのコンバージョン獲得戦略
購入者の行動を促したい場合は、カートに希少性タイマーを追加できます。SeedProdのカウントダウンタイマーブロックは、リアルタイムでカウントダウンするカスタムカウントダウンクロックを追加します。
カウントダウンタイマーブロックをショッピングカートの上にドラッグします。設定パネルで、ビジタータイマーオプションを選択します。これにより、共有のグローバルカウントダウンを使用するのではなく、個々のビジターごとにタイマーがリセットされます。
この区別は重要です。ビジター固有のタイマーは、すでに過ぎた日付ではなく、その購入者のセッションに関連付けられているため、真の緊急性を生み出します。標準のWooCommerceにはこの機能は含まれていません。

詳細設定パネルでは、タイマーの色を他のカートデザインに合わせることができます。

タイマーの上に、カートがどれだけ予約されているかを買い物客に通知する見出しを追加します。見出しブロックを配置し、テキストを入力します。

覚えておいてください:買い物客の約70%がチェックアウト前に離脱します。サイドバーのソーシャルプルーフと組み合わせた表示されるカウントダウンは、そのギャップを埋める最も効果的な方法の1つです。
人気商品をカートに追加する
追加できるもう1つの優れた機能は、人気商品セクションです。これは、顧客が気に入る可能性のある他の商品を推奨することで売上を向上させるのに役立ちます。
WooCommerceセクションからベストセラー商品ブロックをページにドラッグします。

このエリアには、以下を含む他の商品ブロックを追加することもできます。
- 最近の製品
- セール中の製品
- 注目の製品
- トップ評価の製品
これらのブロックの設定の詳細については、WooCommerceで新着商品を表示する方法に関するガイドを参照してください。
ステップ4:WooCommerceでカスタムカートページを公開して接続する
カスタムカートデザインが完了したら、緑色の保存ボタンの横にあるドロップダウン矢印をクリックし、公開をクリックします。

カートを顧客に表示する前に、WooCommerceの設定でカートURLを変更してください。
WooCommerce » 設定に移動し、詳細設定タブをクリックします。

SeedProdで作成した新しいカートページURLを選択し、変更を保存をクリックします。
商品ページでカートに追加ボタンをクリックした後、購入者は「カートを見る」をクリックして、新しいカスタムカートデザインを表示できます。

WooCommerceカートのコンバージョンを追跡するには、WooCommerceコンバージョン追跡の設定方法に関するガイドを参照してください。
カートを公開するのは第一歩です。コンバージョンを獲得する方法は次のとおりです。
WordPressショッピングカートを最適化して売上を伸ばす方法
ライブカートページは単なる出発点です。これらの5つの戦略は、実際に購入を完了する買い物客の数を大幅に増やすことができます。
- ヘッダーにカートアイコンを表示します。カートの内容を一目で確認できる買い物客は、見失って離脱する可能性が低くなります。SeedProdはWooCommerceカートブロックでこれをネイティブにサポートしているため、アイテム数は常にサイトヘッダーに表示されます。
- ゲストチェックアウトを有効にします。チェックアウト前にアカウント作成を強制することは、eコマースにおける最大の摩擦ポイントの1つです。WooCommerceでは、設定 » アカウントとプライバシーに移動し、「アカウントなしで注文できるようにする」を有効にします。
- 透明な価格を表示する。 Baymard Instituteによると、チェックアウト時の予期せぬ手数料は、買い物客が離脱する最大の理由です。顧客がチェックアウトに到達する前に、カートページで配送料の見積もりと手数料を表示してください。
- カートの近くにソーシャルプルーフを追加する。 カートの横に配置されたお客様の声や星評価は、コンバージョンを妨げる直前のためらいを減らします。ステップ3のSeedProdサイドバーレイアウトは、まさにこの目的のために構築されています。
- モバイル向けに最適化する。 ほとんどのWooCommerceストアでは、トラフィックの60%以上がモバイルからです。公開前にスマートフォンでカートをテストしてください。SeedProdのビルダーを使用すると、エディタを離れることなくモバイルレイアウトをプレビューおよび調整できます。
WordPressショッピングカートに関するFAQ
WordPressには組み込みのショッピングカートがありますか?
いいえ。WordPressにはデフォルトでショッピングカートは含まれていません。サイトにカートとチェックアウト機能を追加するには、プラグインが必要です。
WooCommerceは最も広く使用されているオプションです。無料で、インストールすると自動的にカート、チェックアウト、アカウントページが作成されます。
WordPressにショッピングカートを追加するにはWooCommerceが必要ですか?
ほとんどの場合、はい。WooCommerceはWordPressのeコマースの標準であり、このガイドの手順を強化します。
非常にシンプルなストアの場合、WordPress Simple Shopping Cartは、完全なWooCommerceセットアップなしで基本的なPayPalおよびStripeトランザクションを処理する無料の代替手段です。
WordPressにショッピングカートを無料で追加できますか?
はい。WooCommerceは無料であり、WooCommerce Payments(クレジットカードを受け入れるため)には月額料金がかかりません。トランザクションごとの料金のみをお支払いいただきます。コアショッピングカートとチェックアウトの設定には費用はかかりません。
SeedProdには無料版もありますが、このガイドでカバーされているWooCommerceカートカスタマイズブロックにはProプランが必要です。
ショートコードを使用してWooCommerceカートをページに追加するにはどうすればよいですか?
WooCommerceは、カートを任意のページに埋め込むための[woocommerce_cart]ショートコードを提供します。WordPressエディタにショートコードブロックを追加して貼り付けます。
これはデフォルトのWooCommerceカートレイアウトをレンダリングすることに注意してください。カスタムデザインの場合は、代わりにSeedProdのWooCommerceカートブロックを使用してください。
WordPressストアでのカート放棄を減らすにはどうすればよいですか?
最も効果的な戦術は、ゲストチェックアウトを有効にし、チェックアウト前に透明な価格を表示し、カートの近くにソーシャルプルーフを追加することです。訪問者固有のカウントダウンタイマー(SeedProdで利用可能)も、偽の締め切りなしで実際の緊急性を生み出します。
コンバージョン戦術の詳細については、上記の「WordPressショッピングカートを最適化して売上を伸ばす方法」セクションを参照してください。
WooCommerceストアが公開され、カートページがコンバージョン向けに最適化されました。カートのコンバージョン方法をさらに制御したい場合は、SeedProdを使用すると、コードなしでカスタムレイアウトを簡単に構築およびテストできます。今すぐSeedProdを入手して開始してください。
また、WooCommerceショップページでメンテナンスモードを有効にする方法に関するこのステップバイステップチュートリアルも役立つかもしれません。
お読みいただきありがとうございます!皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。