デフォルトのWooCommerceカートページは機能しますが、基本的であり、スタイルに合わないことがよくあります。
様々なページビルダーのテスト中、SeedProdを使えば、一行のコードも書かずにカスタムカートページを驚くほど簡単に作成できることがわかりました。
SeedProd の WooCommerce 機能を探ったところ、カートページのカスタマイズは予想以上にシンプルで強力であることがわかりました。かつては開発者が必要だったことが、ドラッグアンドドロップインターフェイスを使用して数回クリックするだけで実行できるようになりました。
このガイドでは、コーディングなしでカスタムWooCommerceカートページを作成する方法を詳しく説明します。
WordPressでカスタムWooCommerceカートページを作成する理由
WooCommerceには組み込みのカートページがあります。このプラグインをインストールして有効化するだけで、オンラインストアは自動的にデフォルトのカートページを使用するようになります。
訪問者がカートに商品を入れたとき、購入は非常に近いです。しかし、調査によると、10人中7人近くの顧客がカートを放棄し、二度と戻ってこないことが示されています。
それを踏まえると、カートページは販売を確保するために可能な限りのことを行う必要があります。
デフォルトのデザインをカスタムカートページに置き換えることで、オンラインストアのコンバージョン率を向上させることができます。
ページを独自のブランディングやカスタムロゴでカスタマイズするだけでも、顧客体験を向上させ、コンバージョン率を高めることができます。
これを踏まえて、コードなしでWooCommerceのカートページをカスタマイズする方法をご紹介します。以下は、次のセクションで説明するすべての内容の簡単な概要です。
- WordPressでカスタムWooCommerceカートページを作成する方法（ステップバイステップ）
- 動画チュートリアル
- ボーナスのヒント：WooCommerceカートページのコンバージョンをさらに改善する方法
さっそく始めましょう！
WordPressでカスタムWooCommerceカートページを作成する方法
WooCommerceストアのカスタムページを作成する最も簡単な方法は、SeedProdを使用することです。
これは最高のWordPressページビルダーであり、300以上のプロフェッショナルにデザインされたテンプレートが付属しています。これらには、セールスページやリード獲得ページを作成するためのeコマーステンプレートが含まれています。
さらに良いことに、SeedProdはWooCommerceに完全対応しており、ベストセラー商品、人気商品、最新セールなどを表示できる特別なWooCommerceブロックも付属しています。
当社のパートナーブランドのいくつかは、このプラグインを使用してウェブサイト全体を構築しており、新しいデザインについてユーザーから高い評価を得ています。詳細については、SeedProdのレビューをご覧ください。
さて、最初に行う必要があるのは、プラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注: SeedProd の無料版もありますが、このガイドでは、必要な組み込み WooCommerce ブロックが含まれているため、Pro 版を使用します。また、より多くの販売とコンバージョンを獲得するために、すでに使用している可能性のあるすべての メールマーケティングサービス と統合されています。
有効化したら、SeedProd » 設定に移動してライセンスキーを入力しましょう。
この情報は、SeedProdウェブサイトの[アカウント]の下にあります。ライセンスを入力したら、[キーの検証]ボタンをクリックしてください。
これが完了したら、SeedProd »ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックします。
その後、カートページのテンプレートを選択する必要があります。
SeedProdのテンプレートは、近日公開や404ページなどのさまざまなキャンペーンタイプに整理されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルタリングできます。
使用したいテンプレートが見つかったら、カーソルを合わせて「チェックマーク」アイコンをクリックします。
このチュートリアルでは、必要なセクションのみを追加できるため、「空白テンプレート」を使用します。
次の画面で、カートページに名前を付けます。
SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、このURLは好きなものに変更できます。
入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックしましょう。
これでSeedProdのページビルダーが読み込まれます。これは、カスタムカートページのライブプレビューを右側に、設定を左側に表示するシンプルなドラッグアンドドロップエディターです。
💡 専門家のアドバイス: カートページの設計が大変だと感じる場合は、SeedProdのAIビルダーを使用して簡単に作成できます。必要なのは、どのようなカートページが必要かを数語で説明するだけで、AIがカスタムカートページを生成します。
さらに、プラグインのAI機能を使用してコンテンツや画像を自動生成できるため、さらに時間を節約できます。
開始するには、AIを使用してWordPressウェブサイトを作成する方法に関するチュートリアルをご覧ください。
まず、ページの上部にある画像を追加します。ストアの通常のヘッダーのように見える画像を使用することをお勧めします。これにより、ブランディングが維持され、一貫性が保たれます。
ヘッダー画像をカートページの全幅に表示させたいので、「レイアウトを選択」ボックス内の最初のレイアウトをクリックしましょう。
これにより、フル幅のレイアウトが作成されます。
次に、左側のメニューで「画像」ブロックを選択し、レイアウトにドラッグします。
画像をアップロードするには、「画像」ブロックを選択してクリックします。
左側のメニューで、「独自の画像を使用」をクリックし、メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードします。
左側の設定で、画像をさらにカスタマイズできます。たとえば、画像のaltテキストを追加したり、画像のサイズを変更したりできます。
ヘッダーの外観に満足したら、「ここに新しいブロックをドラッグ」セクションの[列の追加]アイコンをクリックできます。
メインのカートページエリアに使用したいレイアウトを選択できるようになりました。
コンテンツとサイドバーのレイアウトをクリックしてください。
これにより、カート用のセクションと、コンバージョンを促進するために顧客の声を表示できるエリアを作成できます。
左側のメニューで、「WooCommerce」セクションまでスクロールします。ここで、「カート」ブロックを見つけて、レイアウトにドラッグします。
その後、左側のメニューを使用して、カートのすべての部分をカスタマイズできます。
これには、フォント、色、ボタンなどの変更が含まれます。
カートエリアの外観に満足したら、証言ブロックを追加する時期です。これはソーシャルプルーフの一種であり、訪問者が購入を完了するように促します。
「お客様の声」ブロックを見つけて、レイアウトにドラッグします。
オンラインストアでのレビューの見え方を変更できるようになりました。
例えば、左側のメニューには、コメントバブルの色を変更したり、配置を変更したり、さらに多くのお客様の声を追加したりするための設定が表示されます。
もう1つの良いアイデアは、お客様の声の下にスター評価を表示することです。
これを行うには、単に「スターレーティング」ブロックを見つけて、証言ブロックの下にドラッグします。
希少性は、顧客が機会を逃すリスクを冒して待つのではなく、今すぐ購入するように促すことができます。それを念頭に置いて、訪問者のカートが期限切れになるまでの数分をカウントダウンするカウントダウンタイマーを追加することを検討してください。
この緊急感を出すために、「カウントダウン」ブロックを見つけて、カートの一番上にドラッグしてください。
各訪問者に新しいタイマーを表示したいので、「カウントダウンタイプ」ドロップダウンを開き、「訪問者タイマー（エバーグリーン）」を選択します。
デフォルトではタイマーは30分から始まりますが、[タイマーの設定]セクションに新しい数値を入力することで変更できます。
ショッパーに、タイマーが0に達するとカートが期限切れになることを知らせたいので、その上に「見出し」ブロックを追加しましょう。
次に、買い物客に表示したいテキストを入力できます。
人気商品セクションを作成することで、顧客がショッピングカートにより多くの商品を追加するように促すことができます。
ストアの最大の売れ筋商品を宣伝するには、単に「ベストセリング商品」ブロックをレイアウトにドラッグアンドドロップします。
デフォルトでは、このブロックは最も人気のある製品を表示しますが、設定を使用してセール中の製品、最新の製品などを表示できます。
これを行うには、[タイプ]ドロップダウンを開き、新しいオプションを選択するだけです。
詳細については、WooCommerceで人気の商品を表示する方法に関するガイドをご覧ください。
カートページの外観に満足したら、公開する準備が整いました。「保存」の横にあるドロップダウン矢印をクリックし、「公開」オプションを選択してください。
次に、WooCommerceの設定でカートのURLを変更する必要があります。
単純にWooCommerce » 設定に移動し、「詳細設定」タブに切り替えます。
このタブでは、「カートページ」ドロップダウンを開き、カスタムページの URL の入力を開始します。
目的のページが表示されたら、それをクリックして選択します。
動画チュートリアル
視覚的な学習者の方は、カスタムWooCommerceカートページを作成する方法に関するビデオチュートリアルもご覧ください。
ボーナスのヒント：WooCommerceカートページのコンバージョンをさらに改善する方法
カスタム WooCommerce カートページを作成したら、カート放棄を減らし、より多くの売上を得るための多くの方法があります。これにより、既存のトラフィックからより多くのお金を稼ぐことができます。
いくつかの簡単な方法を以下に示します。
1. コンバージョンを追跡する
カート放棄は、すべてのオンラインストアにとって大きな問題です。実際、カートに商品を追加した人の60〜80％は購入しません。（出典：カート放棄統計）
コンバージョン追跡は、カートページで何が機能していて何が機能していないかを理解するのに役立ちます。その後、SeedProdを使用してカスタムカートページを微調整し、より多くの顧客が購入を完了できるようにすることができます。
WooCommerceコンバージョンを追跡する最も簡単な方法は、Googleアナリティクスを使用することです。ただし、アナリティクスを設定し、Googleアナリティクスの目標を作成するには、多くのカスタムコードを手動で記述する必要があります。
これを踏まえ、MonsterInsightsの使用をお勧めします。これはWooCommerce向けの最高の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がこれを実行できるのは良いことです。ガイドをありがとう。