デフォルトのWooCommerceカートページは機能しますが、基本的であり、スタイルに合わないことがよくあります。
様々なページビルダーのテスト中、SeedProdを使えば、一行のコードも書かずにカスタムカートページを驚くほど簡単に作成できることがわかりました。
SeedProd の WooCommerce 機能を探ったところ、カートページのカスタマイズは予想以上にシンプルで強力であることがわかりました。かつては開発者が必要だったことが、ドラッグアンドドロップインターフェイスを使用して数回クリックするだけで実行できるようになりました。
このガイドでは、コーディングなしでカスタムWooCommerceカートページを作成する方法を詳しく説明します。
💡クイックアンサー：6つのステップでカスタムカートページを作成する
詳細に入る前に、これから行う主なステップの概要を以下に示します。
- SeedProd Pro プラグインをインストールして有効化します。
- 新しいランディングページを作成し、開始テンプレートを選択します。
- ヘッダーと列で基本的なページレイアウトをデザインします。
- メインの WooCommerce 「カート」ブロックをページにドラッグアンドドロップします。
- お客様の声やカウントダウンタイマーなどのコンバージョン要素を追加します。
- ページを公開し、WooCommerce 設定でカートページとして割り当てます。
WordPressでカスタムWooCommerceカートページを作成する理由
WooCommerceには組み込みのカートページがあります。このプラグインをインストールして有効化するだけで、オンラインストアは自動的にデフォルトのカートページを使用するようになります。
訪問者がカートに商品を入れたとき、購入は非常に近いです。しかし、調査によると、10人中7人近くの顧客がカートを放棄し、二度と戻ってこないことが示されています。
それを踏まえると、カートページは販売を確保するために可能な限りのことを行う必要があります。
デフォルトのデザインをカスタムカートページに置き換えることで、オンラインストアのコンバージョン率を向上させることができます。
ページを独自のブランディングやカスタムロゴでカスタマイズするだけでも、顧客体験を向上させ、コンバージョン率を高めることができます。
これを踏まえて、コードなしでWooCommerceのカートページをカスタマイズする方法をご紹介します。以下は、次のセクションで説明するすべての内容の簡単な概要です。
- How to Create a Custom WooCommerce Cart Page in WordPress (Step-by-Step)
- 動画チュートリアル
- Bonus Tip: How to Further Improve WooCommerce Cart Page Conversions
さっそく始めましょう！
WordPressでカスタムWooCommerceカートページを作成する方法
WooCommerceストアのカスタムページを作成する最も簡単な方法は、SeedProdを使用することです。
これは最高のWordPressページビルダーであり、300以上のプロフェッショナルにデザインされたテンプレートが付属しています。これらには、セールスページの作成やメールサインアップ収集用のページが含まれます。
さらに、SeedProd は完全な WooCommerce サポートを提供し、ベストセラー商品、人気商品、最新のセールなどを表示できる特別な WooCommerce ブロックが含まれています。
当社のパートナーブランドのいくつかは、このプラグインを使用してウェブサイト全体を構築しており、新しいデザインについてユーザーから高い評価を得ています。詳細については、SeedProdのレビューをご覧ください。
ステップ 1：SeedProd Pro のインストールと有効化
さて、最初に行う必要があるのは、プラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注: SeedProd の無料版もありますが、このガイドでは、必要な組み込み WooCommerce ブロックが含まれているため、Pro 版を使用します。また、より多くの販売とコンバージョンを獲得するために、すでに使用している可能性のあるすべての メールマーケティングサービス と統合されています。
有効化したら、SeedProd » 設定に移動してライセンスキーを入力しましょう。
この情報は、SeedProdウェブサイトの[アカウント]の下にあります。ライセンスを入力したら、[キーの検証]ボタンをクリックしてください。
ステップ 2：新しいランディングページの作成
これが完了したら、SeedProd »ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックします。
その後、カートページのテンプレートを選択する必要があります。
SeedProdのテンプレートは、近日公開や404ページなどのさまざまなキャンペーンタイプに整理されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルタリングできます。
使用したいテンプレートが見つかったら、カーソルを合わせて「チェックマーク」アイコンをクリックします。
このチュートリアルでは、必要なセクションのみを追加できるため、「空白テンプレート」を使用します。
次の画面で、カートページに名前を付けます。
SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、このURLは好きなものに変更できます。
入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックしましょう。
ステップ 3：カートページのレイアウトデザイン
これでSeedProdのページビルダーが読み込まれます。これは、カスタムカートページのライブプレビューを右側に、設定を左側に表示するシンプルなドラッグアンドドロップエディターです。
💡 専門家のアドバイス: カートページの設計が大変だと感じる場合は、SeedProdのAIビルダーを使用して簡単に作成できます。必要なのは、どのようなカートページが必要かを数語で説明するだけで、AIがカスタムカートページを生成します。
さらに、プラグインのAI機能を使用してコンテンツや画像を自動生成できるため、さらに時間を節約できます。
開始するには、AIを使用してWordPressウェブサイトを作成する方法に関するチュートリアルをご覧ください。
まず、ページの上部にある画像を追加します。ストアの通常のヘッダーのように見える画像を使用することをお勧めします。これにより、ブランディングが維持され、一貫性が保たれます。
ヘッダー画像をカートページの全幅に表示させたいので、「レイアウトを選択」ボックス内の最初のレイアウトをクリックしましょう。
これにより、フル幅のレイアウトが作成されます。
次に、左側のメニューで「画像」ブロックを選択し、レイアウトにドラッグします。
画像をアップロードするには、「画像」ブロックを選択してクリックします。
左側のメニューで、「独自の画像を使用」をクリックし、メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードします。
左側の設定で、画像をさらにカスタマイズできます。たとえば、画像のaltテキストを追加したり、画像のサイズを変更したりできます。
ヘッダーの外観に満足したら、「ここに新しいブロックをドラッグ」セクションの[列の追加]アイコンをクリックできます。
メインのカートページエリアに使用したいレイアウトを選択できるようになりました。
コンテンツとサイドバーのレイアウトをクリックしてください。
これにより、カート用のセクションと、コンバージョンを促進するために顧客の声を表示できるエリアを作成できます。
ステップ 4：WooCommerce カートブロックの追加
左側のメニューで、「WooCommerce」セクションまでスクロールします。ここで、「カート」ブロックを見つけて、レイアウトにドラッグします。
その後、左側のメニューを使用して、カートのすべての部分をカスタマイズできます。
これには、フォント、色、ボタンなどの変更が含まれます。
カートエリアの外観に満足したら、お客様の声ブロックを追加する時期です。
これはソーシャルプルーフの一種であり、他の人があなたの製品で肯定的な経験をしたことを示すことで、買い物客が決定に自信を持つのに役立ちます。
「お客様の声」ブロックを見つけて、レイアウトにドラッグします。
オンラインストアでのレビューの見え方を変更できるようになりました。
例えば、左側のメニューには、コメントバブルの色を変更したり、配置を変更したり、さらに多くのお客様の声を追加したりするための設定が表示されます。
もう1つの良いアイデアは、お客様の声の下にスター評価を表示することです。
これを行うには、単に「スターレーティング」ブロックを見つけて、証言ブロックの下にドラッグします。
ステップ 5：コンバージョンを促進する要素の追加
希少性は、顧客が機会を逃すリスクを冒して待つのではなく、今すぐ購入するように促すことができます。それを念頭に置いて、訪問者のカートが期限切れになるまでの数分をカウントダウンするカウントダウンタイマーを追加することを検討してください。
この緊急感を出すために、「カウントダウン」ブロックを見つけて、カートの一番上にドラッグしてください。
各訪問者に新しいタイマーを表示したいので、「カウントダウンタイプ」ドロップダウンを開き、「訪問者タイマー（エバーグリーン）」を選択します。
これにより、カウントダウンは各ユーザーごとに新しく開始され、真の個人的な緊急感が生まれます。
デフォルトではタイマーは30分から始まりますが、[タイマーの設定]セクションに新しい数値を入力することで変更できます。
ショッパーに、タイマーが0に達するとカートが期限切れになることを知らせたいので、その上に「見出し」ブロックを追加しましょう。
次に、買い物客に表示したいテキストを入力できます。
人気商品セクションを作成することで、顧客がショッピングカートにより多くの商品を追加するように促すことができます。
ストアの最大の売れ筋商品を宣伝するには、単に「ベストセリング商品」ブロックをレイアウトにドラッグアンドドロップします。
デフォルトでは、このブロックは最も人気のある製品を表示しますが、設定を使用してセール中の製品、最新の製品などを表示できます。
これを行うには、[タイプ]ドロップダウンを開き、新しいオプションを選択するだけです。
詳細については、WooCommerceで人気の商品を表示する方法に関するガイドをご覧ください。
ステップ 6：カスタムカートページの公開
カートページの外観に満足したら、公開する準備が整いました。「保存」の横にあるドロップダウン矢印をクリックし、「公開」オプションを選択してください。
次に、WooCommerceの設定でカートのURLを変更する必要があります。
単純にWooCommerce » 設定に移動し、「詳細設定」タブに切り替えます。
このタブでは、「カートページ」ドロップダウンを開き、カスタムページの URL の入力を開始します。
目的のページが表示されたら、それをクリックして選択します。
動画チュートリアル
視覚的な学習者の方は、カスタムWooCommerceカートページを作成する方法に関するビデオチュートリアルもご覧ください。
ボーナスのヒント：WooCommerceカートページのコンバージョンをさらに改善する方法
カスタム WooCommerce カートページを作成したら、カート放棄を減らし、より多くの売上を得るための多くの方法があります。これにより、既存のトラフィックからより多くのお金を稼ぐことができます。
いくつかの簡単な方法を以下に示します。
1. コンバージョンを追跡する
カート放棄は、すべてのオンラインストアにとって大きな問題です。実際、調査によると、カートに商品を追加した人の約 70% が購入に至らないことが示されています。（出典：カート放棄統計）
コンバージョン追跡は、カートページで何が機能していて何が機能していないかを理解するのに役立ちます。その後、SeedProdを使用してカスタムカートページを微調整し、より多くの顧客が購入を完了できるようにすることができます。
WooCommerceコンバージョンを追跡する最も簡単な方法は、WordPress向けのMonsterInsights、つまり最高のGoogleアナリティクスプラグインを使用することです。
これにはeコマースアドオンが付属しており、数回のクリックでコンバージョン追跡が可能になるため、コードを書いたりダッシュボードを離れたりすることなくデータを表示できます。
WooCommerceのカートコンバージョンを追跡するには、WooCommerceコンバージョン追跡の設定方法に関するステップバイステップガイドをご覧ください。
2. WooCommerceで期限付きポップアップを使用してカート放棄を減らす
タイマー付きポップアップを使用して、カート放棄を減らすこともできます。これを行う最も簡単で効果的な方法は、リード生成とコンバージョン最適化のためのOptinMonster、つまり最高のWordPressポップアッププラグインを使用することです。
そのユニークな Exit-Intent® テクノロジーは、買い物客がカートページを離れようとしたときに正確にポップアップを表示します。このソフトウェアを使用して、今すぐ購入を完了した場合に買い物客に特別な割引コードを提供することもできます。
OptinMonsterには、強力なターゲティングおよびパーソナライゼーション機能があります。
例えば、すでに購入者にクーポンを提供している場合は、代わりに教育的なポップアップを表示できます。例えば、製品について質問があれば気軽に尋ねるように促すことができます。
OptinMonsterを使用すると、ポップアップ、フルスクリーンウェルカムマット、フローティングバー、スクロールボックス、スライドインなど、さまざまなキャンペーンを作成できます。
たとえば、顧客が商品をカートに追加しても購入を完了しなかった場合、スライドインを使用してその特定の商品にクーポンを提供できます。
詳細については、WooCommerce ポップアップを作成して売上を伸ばす方法に関するガイドをご覧ください。
3. WooCommerceでのソーシャルアクティビティ通知で売上を伸ばす
ソーシャルアクティビティ通知は、買い物客がリアルタイムで購入しているすべての商品を表示します。これにより、買い物客はあなたが人気があり信頼できるウェブサイトであると確信でき、FOMO（取り残されることへの恐れ）を利用して購入を促すこともできます。
カートページにソーシャルプルーフ通知を追加する最も簡単な方法は、TrustPulseを使用することです。これはWordPressおよびWooCommerce向けの最高のソーシャルプルーフプラグインであり、コンバージョンを最大15%増加させることが証明されています。
当社のパートナーブランドは、ストアでライブ購入を表示するためにこれを使用しており、コンバージョン率が向上しています。機能の詳細については、TrustPulseのレビューをご覧ください。
このプラグインは数分でサイトに追加でき、誰かが商品を購入したり、無料トライアルを開始したりするたびに通知バブルを表示させることができます。
詳細については、WordPressサイトでFOMOを使用する方法に関するガイドをご覧ください。
この記事が、コードを書かずにカスタム WooCommerce カートページを作成するのに役立ったことを願っています。また、WooCommerce ログインページをカスタマイズする方法のステップバイステップガイドや、ストア向けのおすすめの WooCommerce プラグインもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
This guide couldn’t have come at a better time! I’ve implemented custom cart pages across several online stores, and combining SeedProd’s customization with social proof elements has been a game-changer.
One client’s cart abandonment rate dropped by 23% after we added a clean, branded design with testimonials and the TrustPulse notifications. The countdown timer feature mentioned in the article is particularly effective – it creates just enough urgency without being pushy.
Definitely SHARING this comprehensive guide to my colleagues
Pismai Peeters
投稿で「簡単に」という言葉を使わないでください。何かをする方法がわからず、解決策を探している場合、それは決して「簡単」ではありません…。それは私を不安にさせ、私が愚かだと感じさせます。私はそうではありません。
WPBeginnerサポート
Thank you for your feedback, we will look to improve our phrasing. Everyone has their own knowledge so what can be simple to one person can be complex to another. Our goal is to try to make the steps involved as simple as possible for our users
管理者
Mrteesurez
ほとんどのテーマでは、デフォルトのWooCommerceカートページのデザ��インと外観は魅力的ではありません。そのため、テーマのデザインに合わせてスタイルを設定したり、カスタムページを作成したりする方法を学ぶことが不可欠です。
これにより、ページから不要な要素を削除する機会が得られます。Seedprodがこれを実行できるのは良いことです。ガイドをありがとう。