カスタムWooCommerceカートページを作成する方法（コーディング不要）

デフォルトのWooCommerceカートページは機能しますが、基本的であり、スタイルに合わないことがよくあります。

様々なページビルダーのテスト中、SeedProdを使えば、一行のコードも書かずにカスタムカートページを驚くほど簡単に作成できることがわかりました。

SeedProd の WooCommerce 機能を探ったところ、カートページのカスタマイズは予想以上にシンプルで強力であることがわかりました。かつては開発者が必要だったことが、ドラッグアンドドロップインターフェイスを使用して数回クリックするだけで実行できるようになりました。

このガイドでは、コーディングなしでカスタムWooCommerceカートページを作成する方法を詳しく説明します。

WordPressでカスタムWooCommerceカートページを作成する理由

WooCommerce には、組み込みのカートページが付属しています。このプラグインをインストールして有効化するだけで、オンラインストアは自動的にデフォルトのカートページを使用するようになります。

訪問者がカートに商品を入れているとき、購入に非常に近いです。しかし、調査によると、10人中7人近くの顧客がカートを放棄し、二度と戻ってこないことが示されています。

それを踏まえると、カートページは販売を確保するために可能な限りのことを行う必要があります。

デフォルトのデザインをカスタムカートページに置き換えることで、オンラインストアのコンバージョン率を向上させることができます。

ページを独自のブランディングとカスタムロゴでカスタマイズするだけでも、顧客体験を向上させ、コンバージョン率を高めることができます。

これを踏まえて、コードなしでWooCommerceのカートページをカスタマイズする方法をご紹介します。以下は、次のセクションで説明するすべての内容の簡単な概要です。

さっそく始めましょう！

WordPressでカスタムWooCommerceカートページを作成する方法

WooCommerce ストアのカスタムページを作成する最も簡単な方法は、SeedProd を使用することです。

これは最高のWordPressページビルダーであり、300以上のプロがデザインしたテンプレートが付属しています。これらには、セールスページの作成やメールサインアップを収集するページ用のeコマーステンプレートが含まれています。

さらに、SeedProd は完全な WooCommerce サポートを提供し、ベストセラー商品、人気商品、最新のセールなどを表示できる特別な WooCommerce ブロックが含まれています。

当社のパートナーブランドのいくつかは、このプラグインを使用してウェブサイト全体を構築しており、新しいデザインについてユーザーから高い評価を得ています。詳細については、SeedProd レビューをご覧ください。

ステップ 1：SeedProd Pro のインストールと有効化

まず、プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、SeedProd » 設定に移動してライセンスキーを入力しましょう。

この情報は、SeedProd ウェブサイトのアカウントで見つけることができます。ライセンスを入力したら、「キーの検証」ボタンをクリックしてください。

ステップ 2：新しいランディングページの作成

これが完了したら、SeedProd »ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックします。

その後、カートページのテンプレートを選択する必要があります。

SeedProd のテンプレートは、近日公開や404 ページなどのさまざまなキャンペーンタイプに編成されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルタリングできます。

使用したいテンプレートが見つかったら、カーソルを合わせて「チェックマーク」アイコンをクリックします。

このチュートリアルでは、必要なセクションのみを追加できるため、「空白テンプレート」を使用します。

次の画面で、カートページに名前を付けます。

SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、このURLは好きなものに変更できます。

入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックしましょう。

ステップ 3：カートページのレイアウトデザイン

これでSeedProdのページビルダーが読み込まれます。これは、カスタムカートページのライブプレビューを右側に、設定を左側に表示するシンプルなドラッグアンドドロップエディターです。

まず、ページの上部にある画像を追加します。ストアの通常のヘッダーのように見える画像を使用することをお勧めします。これにより、ブランディングが維持され、一貫性が保たれます。

ヘッダー画像をカートページの全幅に表示させたいので、「レイアウトを選択」ボックス内の最初のレイアウトをクリックしましょう。

これにより、フル幅のレイアウトが作成されます。

次に、左側のメニューで「画像」ブロックを選択し、レイアウトにドラッグします。

画像をアップロードするには、「画像」ブロックを選択してクリックします。

左側のメニューで、「独自の画像を使用」をクリックし、メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードします。

左側の設定で、画像をさらにカスタマイズできます。たとえば、画像の代替テキストを追加したり、画像のサイズを変更したりできます。

ヘッダーの外観に満足したら、「ここに新しいブロックをドラッグ」セクションの[列の追加]アイコンをクリックできます。

メインのカートページエリアに使用したいレイアウトを選択できるようになりました。

コンテンツとサイドバーのレイアウトをクリックしてください。

これにより、カート用のセクションと、コンバージョンを促進するために顧客の声を表示できる領域を作成できます。

ステップ 4：WooCommerce カートブロックの追加

左側のメニューで、「WooCommerce」セクションまでスクロールします。ここで、「カート」ブロックを見つけて、レイアウトにドラッグします。

その後、左側のメニューを使用して、カートのすべての部分をカスタマイズできます。

これには、フォント、色、ボタンなどの変更が含まれます。

カートエリアの外観に満足したら、お客様の声ブロックを追加する時期です。

これは社会的証明の一形態であり、他の人々があなたの製品で肯定的な経験をしたことを示すことで、買い物客が自分の決定に自信を持つのに役立ちます。

「お客様の声」ブロックを見つけて、レイアウトにドラッグします。

オンラインストアでのレビューの見え方を変更できるようになりました。

たとえば、左側のメニューには、コメントバブルの色を変更したり、配置を変更したり、さらに多くの顧客の声を追加したりするための設定が表示されます。

もう1つの優れたアイデアは、証言の下に星評価を表示することです。

これを行うには、単に「スターレーティング」ブロックを見つけて、証言ブロックの下にドラッグします。

ステップ 5：コンバージョンを促進する要素の追加

希少性は、顧客が機会を逃すリスクを冒して待つのではなく、今すぐ購入することを奨励できます。それを念頭に置いて、訪問者のカートが期限切れになるまでの時間をカウントダウンするカウントダウンタイマーを追加することを検討してください。

この緊急感を出すために、「カウントダウン」ブロックを見つけて、カートの一番上にドラッグしてください。

各訪問者に新しいタイマーを表示したいので、「カウントダウンタイプ」ドロップダウンを開き、「訪問者タイマー（エバーグリーン）」を選択します。

これにより、カウントダウンは各ユーザーごとに新しく開始され、真の個人的な緊急感が生まれます。

デフォルトではタイマーは30分から始まりますが、[タイマーの設定]セクションに新しい数値を入力することで変更できます。

ショッパーに、タイマーが0に達するとカートが期限切れになることを知らせたいので、その上に「見出し」ブロックを追加しましょう。

次に、買い物客に表示したいテキストを入力できます。

人気商品セクションを作成することで、顧客がショッピングカートにさらに多くの商品を追加することを奨励できます。

ストアの最大の売れ筋商品を宣伝するには、単に「ベストセリング商品」ブロックをレイアウトにドラッグアンドドロップします。

デフォルトでは、このブロックは最も人気のある製品を表示しますが、設定を使用してセール中の製品、最新の製品などを表示できます。

これを行うには、[タイプ]ドロップダウンを開き、新しいオプションを選択するだけです。

詳細については、WooCommerceで人気の商品を表示する方法に関するガイドを参照してください。

ステップ 6：カスタムカートページの公開

カートページの外観に満足したら、公開する準備が整いました。「保存」の横にあるドロップダウン矢印をクリックし、「公開」オプションを選択してください。

次に、WooCommerceの設定でカートのURLを変更する必要があります。

単純にWooCommerce » 設定に移動し、「詳細設定」タブに切り替えます。

このタブでは、「カートページ」ドロップダウンを開き、カスタムページの URL の入力を開始します。

目的のページが表示されたら、それをクリックして選択します。

動画チュートリアル

視覚的な学習者の方は、カスタムWooCommerceカートページを作成する方法に関するビデオチュートリアルもご覧ください。

WPBeginnerを購読する

ボーナスのヒント：WooCommerceカートページのコンバージョンをさらに改善する方法

カスタム WooCommerce カートページを作成したら、カート放棄を減らし、より多くの売上を得るための多くの方法があります。これにより、既存のトラフィックからより多くのお金を稼ぐことができます。

いくつかの簡単な方法を以下に示します。

1. コンバージョンを追跡する

カート放棄は、すべてのオンラインストアにとって大きな問題です。実際、カートに商品を追加した人の約70%が購入しないという調査結果があります。（出典：カート放棄統計）

コンバージョン追跡は、カートページで何が機能していて何が機能していないかを理解するのに役立ちます。その後、SeedProdを使用してカスタムカートページを微調整し、より多くの顧客が購入を完了できるようにすることができます。

WooCommerceコンバージョンを追跡する最も簡単な方法は、WordPress向けのMonsterInsights、最高のGoogle Analyticsプラグインを使用することです。

これにはeコマースアドオンが付属しており、数回のクリックでコンバージョン追跡が可能になるため、コードを書いたりダッシュボードを離れたりすることなくデータを表示できます。

WooCommerceカートコンバージョンを追跡するには、WooCommerceコンバージョン追跡の設定方法に関するステップバイステップガイドを参照してください。

2. WooCommerceで期限付きポップアップを使用してカート放棄を減らす

タイミングポップアップを使用して、カート放棄を減らすこともできます。これを行う最も簡単で効果的な方法は、リード生成とコンバージョン最適化のためのWordPress向けOptinMonster、最高のWordPressポップアッププラグインを使用することです。

そのユニークな Exit-Intent® テクノロジーは、買い物客がカートページを離れようとしたときにポップアップを表示します。このソフトウェアを使用して、購入を完了した場合に買い物客に特別な割引コードを提供することもできます。

OptinMonsterには、強力なターゲティングおよびパーソナライゼーション機能があります。

例えば、すでに購入者にクーポンを提供している場合は、代わりに教育的なポップアップを表示できます。例えば、製品について質問があれば気軽に尋ねるように促すことができます。

OptinMonsterを使用すると、ポップアップ、フルスクリーンウェルカムマット、フローティングバー、スクロールボックス、スライドインなど、さまざまなキャンペーンを作成できます。

たとえば、顧客が商品をカートに追加しても購入を完了しなかった場合、スライドインを使用してその特定の商品にクーポンを提供できます。

詳細については、WooCommerceのポップアップを作成して売上を伸ばす方法に関するガイドをご覧ください。

3. WooCommerceでのソーシャルアクティビティ通知で売上を伸ばす

ソーシャルアクティビティ通知は、買い物客がリアルタイムで購入しているすべての商品を表示します。これにより、買い物客はあなたが人気があり信頼できるウェブサイトであると確信でき、FOMO（取り残されることへの恐れ）を利用して購入を促すこともできます。

カートページにソーシャルプルーフ通知を追加する最も簡単な方法は、TrustPulseを使用することです。これは、WordPressおよびWooCommerce向けの最高のソーシャルプルーフプラグインであり、コンバージョンを最大15%増加させることが証明されています。

当社のパートナーブランドは、ストアでライブ購入を表示するためにこれを使用しており、コンバージョン率が向上しています。機能の詳細については、TrustPulseレビューを参照してください。

このプラグインは数分でサイトに追加でき、誰かが商品を購入したり、無料トライアルを開始したりするたびに通知バブルを表示させることができます。

詳細については、WordPressサイトでFOMOを使用する方法に関するガイドを参照してください。

この記事が、コードを書かずにカスタムWooCommerceカートページを作成するのに役立ったことを願っています。また、WooCommerceログインページをカスタマイズする方法に関するステップバイステップガイドや、ストア向けの最高のWooCommerceプラグインの専門家による選択も参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。