WooCommerceカートページをカスタマイズする必要がありますか？
デフォルトのWooCommerceカートレイアウトは、しばしば扱いにくく、顧客の購入完了を促すには不十分です。適切に設計されたカートページは、ユーザーエクスペリエンスを向上させ、カート放棄を減らし、売上を増加させることができます。
このチュートリアルでは、コーディングを一行も書かずにWooCommerceカートページをカスタマイズする方法をステップバイステップでご紹介します。ここでは、私が数分でコンバージョン率の高いWooCommerceページを作成するために頼っているドラッグ＆ドロップページビルダーであるSeedProdを使用します。
WooCommerceカートページをカスタマイズするための簡単な手順：
カスタムWooCommerceカートページを作成する理由
顧客の約70％がチェックアウトを完了する前にショッピングカートを放棄することをご存知ですか？ショッピングカート放棄は、オンラインストアに毎年数十億ドルの売上損失をもたらしています。
WooCommerceカートページのレイアウトをカスタマイズする時間をかけることで、顧客が離れる多くの理由を修正できます。より良いデザインは、信頼を築き、重要なオファーを強調し、買い物客を戻るボタンではなくチェックアウトボタンに誘導することができます。
ユーザーエクスペリエンスを向上させるためにWooCommerceカートを編集すると、すでに持っているトラフィックを最大限に活用することになります。わずかな改善でも、広告にさらに費用をかけることなく、放棄率を劇的に減らし、収益を増やすことができます。
コンバージョンを最適化するためのWooCommerceカートのいくつかの方法を次に示します：
- 送料無料を提供する、または顧客が無料の対象にどれだけ近いかを表示する
- 自動割引を適用する、またはクーポンコードフィールドを明確に表示する
- カート合計を読みやすく、理解しやすくする
- お客様の声、レビュー、セキュリティバッジなどの信頼シグナルを追加する
- 更新カートボタンを使用し、モバイルで簡単に見つけられるようにする
全体として、カスタムWooCommerceカートページのデザインは、顧客が自信を持ってチェックアウトできるようにし、最終的にストアの売上を増加させます。
では、どのようにWooCommerceカートページをカスタマイズするのでしょうか？飛び込んで調べてみましょう。
WooCommerceカートページをカスタマイズする方法
多くの人がショッピングカートプラグインを使用してWooCommerceのカートページを最適化しています。しかし、カートをカスタマイズする最も簡単な方法は、SeedProdのようなドラッグ＆ドロップページビルダーを使用することだと考えています。
SeedProdは、WooCommerceウェブサイトをサポートする最高のWordPressページビルダーです。このプラグインを使用して、コードを書かずにカスタムWooCommerceカートページを作成できます。
SeedProdは、150以上の完全にレスポンシブなランディングページテンプレートを提供しており、すぐに開始できます。また、ビジュアルエディターを使用すると、ページをカスタマイズしてリアルタイムで変更を確認できます。
さらに、多数のブロックとセクションを使用して、開発者を雇うことなく、カートページを希望通りの外観にすることができます。
更新： SeedProdでカスタムWooCommerceテーマを作成できるようになり、コードなしで任意のWooCommerceページを簡単に構築できます。
これを念頭に置いて、SeedProd を使用してカスタム WooCommerce カートページを作成する手順に従ってください。
ステップ1. SeedProdのインストールと有効化
最初のステップは、SeedProd WordPress ランディングページプラグインのコピーをダウンロードすることです。
次に、プラグインを WordPress ウェブサイトにインストールして有効化します。この手順については、WordPress プラグインのインストールに関する詳細ガイドを参照してください。
注意: SeedProd には無料バージョンがありますが、無料バージョンの SeedProd を使用できます。ただし、このチュートリアルでは、必要な WooCommerce サポートが組み込まれている Elite バージョンを使用します。
SeedProd を WordPress サイトで有効化した後、SeedProd » 設定に移動し、製品ライセンスキーを入力します。
SeedProdのライセンスキーは、SeedProdのウェブサイトのアカウントダッシュボードで見つけることができます。
ステップ2. 新しいWooCommerceカートページテンプレートを作成する
ライセンスキーを有効化した後、SeedProd » ページに移動し、「新しいランディングページを追加」ボタンをクリックしてカートページを作成します。
そこから、デザインのフレームワークとして使用するカートページのテンプレートを選択できます。
SeedProd は、さまざまな業界向けのモバイルフレンドリーなテンプレートを何百も提供しており、その多くを WooCommerce テンプレートとして使用できます。気に入ったテンプレートを見つけたら、カーソルを合わせて「チェックマーク」アイコンをクリックして起動します。
このガイドでは、「空白テンプレート」を使用します。このテンプレートを使用すると、最初から始めて、必要なセクションとブロックのみを追加できます。
テンプレートを選択すると、ページの名前と URL を追加するためのポップアップが表示されます。次に、「保存してページ編集を開始」ボタンをクリックして、SeedProd のビジュアルエディターでテンプレートを開きます。
ステップ 3. カートページのレイアウトとデザインをカスタマイズする
SeedProd のドラッグアンドドロップページビルダーは、使いやすい 2 列のレイアウトを備えています。
- 左側には、デザインをカスタマイズするためのブロックとセクションがあります
- 右側には、ページのライブプレビューがあります
カートページにコンテンツを追加するのは、左側のブロックを右側のプレビューにドラッグするのと同じくらい簡単です。
WooCommerce カートページに含めることができる重要な要素をいくつか見てみましょう。
ロゴの追加
カートページにロゴを追加するには、ページの要素を配置するセクションレイアウト（標準セクションなど）を選択します。
次に、「画像」ブロックを選択し、それを右側の新しいセクションにドラッグします。
画像ブロックをクリックするとコンテンツ設定パネルが開きます。ここで、コンピューターまたは WordPress メディアライブラリからロゴをアップロードできます。
そこから、ホームページへのリンクを追加したり、ロゴのサイズを変更したり、配置を変更したりできます。
WooCommerce カートの追加
次に、WooCommerce のショッピングカートをデザインに追加しましょう。これを行うには、デザインに新しいセクションを追加し、コンテンツサイドバーレイアウトを選択します。
このレイアウトにより、カートを大きい方の列に追加でき、小さい方の列にはレビュー、お客様の声、その他の重要な情報を追加するスペースが残ります。
WooCommerce カートをページに追加するには、下にスクロールして WooCommerce ブロックセクションに移動し、「カート」ブロックを新しいセクションにドラッグします。
カート設定アイコンをクリックすると、次の色、フォント、サイズのカスタマイズ設定を含むパネルが表示されます。
- ヘッダー
- ボタン
- フィールド
- アラート
- カート
例えば、ストアのブランディングやロゴに合わせてボタンの色を変更しました。
レビューとお客様の声を追加する
2列目を覚えていますか？このガイドでは、その列を使用して、お客様の声と星評価を表示します。
このようなソーシャルプルーフは、購入を検討している買い物客に、購入を完了するように促すことができます。結局のところ、実際のお客様からの肯定的なレビューは、ブランドの言葉をそのまま受け取るよりもはるかに説得力があります。
WooCommerceカートページにお客様の声を追加するには、「高度なブロック」の見出しの下にある「お客様の声」ブロックを見つけて、右側の狭い列にドラッグします。
そして、SeedProdのすべてのブロックと同様に、それをクリックすると、お客様の声のコンテンツをカスタマイズするための設定が表示されます。たとえば、カスタムの顔写真や顧客名を追加したり、配置を変更したり、お客様の声カルーセルに複数のレビューを追加したりできます。
レビューをさらに説得力のあるものにするために、星評価ブロックをドラッグしてお客様の声カルーセルの下に配置できます。
希少性と緊急性を追加する
潜在的な顧客をWooCommerceチェックアウトに誘導する最善の方法の1つは、緊急性を生み出すことです。したがって、買い物客が今すぐ行動しないと、エキサイティングな取引を逃す可能性があります。
WooCommerceカートページに希少性を追加する最も簡単な方法は、希少性タイマーまたはカウントダウンクロックを使用することです。そして、SeedProdにはそのオプションが組み込まれています。
「高度な」ブロックセクションから「カウントダウンタイマー」ブロックを選択し、カートの上部にドラッグするだけです。次に、「訪問者タイマー」オプションを選択して、訪問者ごとにタイマーが更新されるようにします。
次に、高度な設定タブで、カートの残りの部分に合わせて色をカスタマイズできます。
次に、カートが期限切れになるまでの時間が設定されていることを人々に伝える見出しを追加しましょう。これを行うには、「見出し」ブロックをドラッグしてテキストを入力します。
クロスセルWooCommerce製品
WooCommerceカートページは、他の製品やサービスを宣伝および推奨するのに最適な場所です。そうすれば、チェックアウトする前に、買い物客が好きな可能性のある関連製品を見つけることができます。
そして良いニュースは、SeedProdがいくつかの異なる製品グリッドを提供しており、任意のページに製品を表示できることです。「WooCommerce」ブロックセクションに移動して、以下から選択できます。
たとえば、「セール中の商品」ブロックをドラッグして、WooCommerceカートのすぐ下に配置できます。そうすれば、買い物客はチェックアウトする前にカートに追加する機会を得られます。
ステップ4.新しいカートページを公開してリンクする
カートページを変更したら、公開してWooCommerceストアでライブにする時間です。これを行うには、緑色の保存ボタンの横にあるドロップダウン矢印をクリックし、「公開」を選択します。
次に、最後のタスクは、WooCommerceプラグイン設定でカートURLを調整することです。「WooCommerce」>「設定」に移動し、「高度」タブをクリックします。
次に、「カートページ」の見出しの隣で、SeedProdで作成した新しいカートページを選択します。画面下部にある「変更を保存」ボタンをクリックすることを忘れないでください。
これで、買い物客があなたのウェブサイトの「カートを見る」リンクをクリックすると、新しくカスタムされたWooCommerceカートページが表示されるようになります。
WooCommerceカートページのカスタマイズに関するよくある質問
WooCommerceカートページのカスタマイズは、カート放棄を減らし、売上を伸ばすための最も速い方法の1つです。レイアウトを改善し、信頼のシグナルを追加し、摩擦を取り除くことで、より多くの買い物客を支払いを行う顧客に変えることができます。
SeedProdを使用すると、コードを一行も触ることなく、WooCommerceカートページのデザインを編集できます。ドラッグアンドドロップビルダーにより、コンバージョンに最適化された、完全にブランド化されたカートページを簡単に作成できます。
WooCommerceカートコンバージョンの追跡方法については、WooCommerceコンバージョン追跡の設定に関する投稿と、WooCommerceのカート表示が機能しない場合の対処法に関するガイドをご覧ください。
お読みいただきありがとうございます。この記事が気に入ったら、ビジネスを成長させるための役立つコンテンツをさらにご覧になるために、YouTube、Twitter、Facebookでフォローしてください。
