カスタムWooCommerceカートページを作成しますか？
初期設定のWooCommerceカートページはコンバージョンに最適化されていません。お買い物カゴページをカスタマイズすることで、より多くの売上を獲得し、オンラインストアからより多くのお金を稼ぐことができます。
この投稿では、コードを書かずにWooCommerceのカートページをカスタマイズする方法を紹介します。
なぜWordPressでカスタムWooCommerceカートページを作成するのか？
WooCommerceにはお買い物カゴページがビルトインされています。
このWordPressプラグインを有効化するだけで、あなたのオンラインストアは自動的に初期設定のお買い物カゴページを使い始めます。
訪問者がお買い物カゴに項目を入れているとき、彼らは購入に非常に近づいています。しかし、調査によると、10人中7人近くのカスタマイザーがお買い物カゴを放棄し、二度と戻ってこないことが分かっています。
このことを念頭に置いて、お買い物カゴのページは販売を確保するために可能な限りのことをしなければなりません。
初期設定をカスタムカートページに置き換えることで、オンラインストアのコンバージョン率を向上させることができます。
独自のブランディングやカスタマイザーロゴでページをカスタマイズするだけでも、顧客体験を向上させ、コンバージョン率を高めることができます。
ということで、WooCommerceのカートページをコードなしでカスタマイズする方法を見てみましょう。
動画チュートリアル
文章での説明がお望みなら、このまま読み進めてほしい。
WordPressでカスタムWooCommerceカートページを作成する方法
WooCommerceストアのカスタムページを作成する最も簡単な方法は、SeedProdを使用することです。
SeedProdは最高のドラッグ＆ドロップページビルダーであり、180以上のプロがデザインしたテンプレートが付属しています。これには、販売ページやリードスクイーズページの作成に使用できるeコマーステンプレートが含まれています。
さらに、SeedProdはWooCommerceをフルサポートしており、売れ筋商品、人気項目、最新セールなどを表示できる特別なWooCommerceブロックまで付属しています。
最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
注： SeedProdには無料版もありますが、このガイドでは必要なWooCommerceブロックがビルトインされているPro版を使用します。また、すでに使用しているメールマーケティングサービスすべてと統合し、より多くの売上とコンバージョンを得ることができます。
有効化した後、SeedProd ” Settingsにアクセスし、ライセンスキーを入力する必要があります。
この情報は、SeedProdサイトの自分のアカウントの下にあります。ライセンスを入力した後、「Verify Key」ボタンをクリックしてください。
それができたら、SeedProd ” ランディングページに行き、’新規ランディングページを追加’ボタンをクリックします。
その後、お買い物カゴページのテンプレートを選択する必要があります。
SeedProdのテンプレートは、近日公開や404ページなどのキャンペーンタイプ別に整理されています。画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルターすることができます。
使いたいテンプレートが見つかったら、マウスオーバーして「チェックマーク」アイコンをクリックします。
必要なセクションだけを追加できるので、「ブランク・テンプレート」を使うことにする。
次に、お買い物カゴページの名前を入力します。SeedProdはページのタイトルに基づいて自動的にURLを作成しますが、このURLは好きなものに変更することができます。
入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。
これはSeedProdページビルダーを読み込みます。これはシンプルなドラッグ＆ドロップエディターで、右側にお買い物カゴページのライブプレビュー、左側にいくつかの設定が表示されます。
まず始めに、ページの上部に画像を追加します。お店の通常のヘッダーと同じような画像を使用するのが良いでしょう。そうすることでブランディングを維持し、一貫性を保つことができます。
ヘッダー画像がお買い物カゴページの全幅を占めるようにしたいので、「レイアウトを選択」ボックスで最初のレイアウトをクリックします。
これで全幅レイアウトが出来上がる。
次に、左側のメニューから「Image」ブロックを選択し、レイアウト上にドラッグします。
画像をアップロードするには、画像ブロックをクリックして選択します。
左側のメニューで「Use Your Own Image」をクリックし、メディアライブラリから画像を選択するか、コンピューターから新規ファイルをアップロードします。
左側の設定を使って、画像をさらにカスタマイズすることができます。例えば、画像のaltテキストを追加したり、画像のサイズを変更することができます。
ヘッダーの見た目に満足したら、’Drag a new block here’セクションの’Add Columns’アイコンをクリックします。
メインカートページエリアに使用するレイアウトを選択することができます。
コンテンツとサイドバーレイアウトをクリックしてください。
これにより、お買い物カゴ用のセクションや、より多くのコンバージョンを獲得するためにカスタマイザーを表示できるエリアを作成することができます。
左側のメニューで’WooCommerce’セクションまでスクロールします。ここで’お買い物カゴ’ブロックを見つけ、レイアウトにドラッグします。
左側のメニューからお買い物カゴの各パーツをカスタマイズできます。
これには、フォント、色、ボタンなどの変更が含まれます。
お買い物カゴエリアの見た目に満足したら、次はお客様の声ブロックを追加しましょう。これは社会的証明の一種であり、訪問者に購入を完了するよう促すものです。
Testimonials」ブロックを見つけてレイアウトにドラッグするだけです。
オンラインストアのお客様の声の表示を変更することができます。
例えば、左側のメニューには、コメントする吹き出しの色を変えたり、配置を変えたり、カスタマイザーを追加したりする設定があります。
もう一つの素晴らしいアイデアは、あなたの声の下に星の評価を表示することです。
これを行うには、「星評価」ブロックを見つけて、証言ブロックの下にドラッグするだけです。
希少性は、カスタマイザーが商品を買い逃すリスクや待つよりも、今すぐ購入することを促します。それを念頭に置いて、訪問者のお買い物カゴの有効期限が切れるまでの時間をカウントダウンするカウントダウンタイマーを追加するとよいでしょう。
この切迫感を演出するには、「カウントダウン」ブロックを見つけ、お買い物カゴの一番上にドラッグします。
各訪問者に新しいタイマーを表示したいので、「カウントダウンタイプ」のドロップダウンを開き、「訪問者タイマー（エバーグリーン）」を選択します。
初期設定では、タイマーは30分から始まりますが、「Set Timer For」セクションに新しい数字を入力して変更することができます。
タイマーが0になったらお買い物カゴの有効期限が切れることを買い物客に知らせたいので、タイマーの上に「ヘッドライン」ブロックを追加します。
次に、買い物客に見せたいテキストを入力します。
人気商品コーナーを設けることで、お買い物カゴに多くの項目を追加してもらうことができます。
売れ筋商品をアピールするには、「ベストセラー商品」ブロックをレイアウトにドラッグ＆ドロップするだけです。
初期設定では、このブロックには一番人気の商品が表示されますが、設定を使ってセール中の商品や最新の商品などを表示させることができます。
これを行うには、’Type’ドロップダウンを開き、新規設定を選択するだけです。
詳しくは、WooCommerceで人気商品を表示する方法をご覧ください。
お買い物カゴのページが完成したら、「保存」の隣にある矢印をクリックして「公開する」オプションを選択します。
その後、WooCommerceの設定でお買い物カゴのURLを変更する必要があります。
WooCommerce ” 設定に行き、’高度な’タブをクリックするだけです。
その後、「お買い物カゴページ」のドロップダウンを開き、カスタムページのURLを入力します。
適切なページが表示されたら、それを選択する。
ボーナス：WooCommerceカートページのコンバージョンをさらに向上させる方法
WooCommerceのカスタムカートページを作成したら、カート放棄を減らし、より多くの売上を得るための方法がたくさんあります。これにより、既存のトラフィックからより多くの収益を上げることができます。
そのための簡単な方法をいくつか紹介しよう。
1.コンバージョンをトラッキングする
お買い物カゴの放棄は、すべてのオンラインショップにとって大きな問題です。実際、お買い物カゴに項目を入れた人の60～80％は購入しない。(出典:カート放棄の統計)
コンバージョントラッキングは、お買い物カゴページで何が有効で、何が有効でないかを理解するのに役立ちます。そして、SeedProdを使用してお買い物カゴページを微調整することで、より多くのお客様にお買い物を完了していただくことができます。
WooCommerceのコンバージョンをトラッキングする最も簡単な方法は、Googleアナリティクスを使用することです。しかし、手動でアナリティクスを設定し、Googleアナリティクスの目標を作成するには、多くのカスタムコードを記述する必要があります。
この点を考慮し、MonsterInsightsの使用をお勧めします。WooCommerceに最適なGoogleアナリティクスプラグインで、数クリックでコンバージョントラッキングを有効化するeコマースアドオンが付属しています。
WooCommerce カートコンバージョンをトラッキングするには、WooCommerce コンバージョントラッキングの設定方法に関するステップバイステップガイドをご覧ください。
2.WooCommerceの時間指定ポップアップでお買い物カゴの放棄を減らす
時間指定のポップアップでお買い物カゴの放棄を減らすこともできます。
OptinMonsterは 最高のWordPressポップアッププラグインであり、独自のExit-Intent®テクノロジーにより、買い物客がお買い物カゴのページから離れようとするタイミングでポップアップを表示することができます。
OptinMonsterを使用して、今購入を完了すると特別割引コードを買い物客に提供することもできます。
OptinMonsterは、強力なターゲティングとパーソナライゼーション機能を備えています。
例えば、買い物客にすでにクーポンを提供している場合、代わりに教育的なポップアップを表示することができます。例えば、商品に関する質問をするよう促すことができます。
OptinMonsterでは、ポップアップ、フルスクリーンウェルカムマット、フローティングバー、スクロールボックス、スライドインなどの様々なキャンペーンを作成することができます。
例えば、カスタマイザーがお買い物カゴに商品を入れても購入が完了しなかった場合、スライドインを使ってその商品のクーポンを提供することができます。
詳しくは、WooCommerceポップアップの作り方ガイドをご覧ください。
3.WooCommerceのソーシャル活動通知で売上を伸ばす
ソーシャル活動通知は、買い物客が購入しているすべての商品をリアルタイムで表示します。これにより、買い物客に人気のある信頼できるサイトであることを安心させ、またFOMOを利用して購買意欲を高めることができる。
お買い物カゴページにソーシャルプルーフ通知を追加する最も簡単な方法は、TrustPulseを使うことです。
WordPressとWooCommerce用のソーシャルプルーフのプラグインとしては市場で最も優れており、コンバージョンを15%増加させることが証明されています。
あなたのサイトにTrustPulseをほんの数分で追加することができ、誰かが商品を購入したり、無料トライアルを開始したりするたびに通知バブルを表示し始めることができます。
詳しくは、WordPressサイトでのFOMOの使い方ガイドをご覧ください。
この投稿が、コードを書かずにカスタムのWooCommerceカートページを作成するのにお役に立てば幸いです。また、ブログのトラフィックを増やす方法のステップバイステップガイドや、専門家が選んだあなたのストアに最適なWooCommerceプラグインもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!