WooCommerceストアのカスタムチェックアウトページを作成したいですか？
顧客がチェックアウトで立ち往生したために、10件中7件の売上を失うことを想像してみてください。これは多くのオンラインショップで起こっていることで、チェックアウトページがわかりにくかったり、使いにくかったりすることが原因であることが多いのです。
でもご心配なく - 簡単な解決策があります。WooCommerceのチェックアウトページをより良いものにすることで、もう少しで売れそうだった商品をより多く実際のお金に変えることができます。それは、より多くのお客様が簡単にゴールラインを通過できるように、道のデコボコを滑らかにするようなものです。
このガイドでは、チェックアウトページを改善する具体的な方法を順を追って説明します。そして一番の魅力は？複雑なコンピューターコードを知らなくてもできるのです。お客様の邪魔になるのではなく、お客様の役に立つチェックアウトページを簡単に作ることができます。
WooCommerceのチェックアウトページをカスタマイズすべき理由
チェックアウトページは、顧客が購入を完了する前に目にする最後のページです。このページが、コンバージョンに至るか、あるいは完全にショップを放棄するかの分かれ目となります。
そのため、WooCommerceのチェックアウトページをしっかりとデザインし、コンバージョンを促進するように機能させることが不可欠なのです。
デフォルトのWooCommerceチェックアウトページは、小規模店舗が始めるのに最適です。オンラインストアを始めるのに必要なものが全て揃っています。
しかし、ビジネスが成長すればするほど、より良い体験を提供できることに気づくだろう：
- カスタムブランディングを含む
- チェックアウトフォームにカスタムフィールドを追加する
- ページデザインとレイアウトの変更
- 商品をチェックアウトページに直接リンク
- 入力フィールドのラベルとボタンのテキストを変更する
- 他の製品やサービスのアップセル
WooCommerceのチェックアウトページ全体をデザインし直したい場合でも、ちょっとした編集を加えたい場合でも、心に留めておくべきことが1つあります。それは簡単であることです！
幸いなことに、以下の解決策はWooCommerceのチェックアウトページを簡単にカスタマイズすることができます。
WooCommerceのチェックアウトページをカスタマイズする方法
コードの書き方を学ぶ時間や開発者を雇う予算がない場合、チェックアウトページをカスタマイズすることは不可能に近いと思われるかもしれません。
しかし実際は、適切なツールが手元にあればそうなるわけではない。
以下のチュートリアルでは、SeedProdを使ってWooCommerceのチェックアウトページをカスタマイズする方法をご紹介します。
SeedProdは、ドラッグ＆ドロップ機能を備えた最高のWordPressランディングページビルダーです。WordPressのあらゆるページを視覚的に構築し、カスタマイズすることができます。
つまり、ドラッグ＆ドロップのページエディターを使ってカスタムページを作成し、その結果をリアルタイムで見ることができる。手動でページをコーディングする必要がなくなるので、デザインや技術的なスキルが限られている人には朗報です。
SeedProdには、プロがデザインした数百ものランディングページテンプレートが付属しており、すぐに使い始めることができます。そして、ビジュアルエディターで以下のような柔軟なページブロックを使って各テンプレートをカスタマイズすることができます：
- オプトインフォームとログインフォーム
- 画像とビデオ
- テキストと見出し
- ソーシャルメディアのプロフィールと共有ボタン
- WPFormsのようなサードパーティプラグインを使ったカスタムコンタクトフォーム
- ラッフルプレスの景品
- お客様の声と星評価
- カウントダウン・タイマーとプログレス・バー
- ナビゲーション・メニューとアコーディオン
- そしてもっと。
SeedProdはまた、カートに追加ボタン、チェックアウト、ショッピングカート、および柔軟な製品グリッドを含むWooCommerceストア専用のランディングページブロックを備えています。つまり、開発者を雇うことなく、eコマースストアのための多目的な商品ページ、カートページ、チェックアウトページを簡単に作成することができます。
それを念頭に置いて、SeedProdでWooCommerceのチェックアウトページをカスタマイズする方法を見てみましょう。
1.SeedProdのインストールとアクティベーション
最初のステップは、SeedProdを使い始め、プラグインをコンピュータにダウンロードすることです。SeedProdのWooCommerce統合機能を利用するには、少なくともSeedProd Proプランが必要です。
SeedProdをダウンロードしたら、WordPressウェブサイトにプラグインをインストールして有効化する必要があります。WordPressプラグインをインストールするには、以下の手順に従ってください。
プラグインを有効にすると、ようこそ画面が表示されます。
SeedProdライセンスキーの入力を求める画面が表示されます。ライセンスキーは、SeedProdアカウントにログインし、[ライセンスキー、詳細、およびダウンロードを表示]リンクをクリックすることで確認できます。
そこから、キーをコピーしてクリップボードに保存します。その後、キーをライセンスキーフィールドに貼り付け、Verify Keyボタンをクリックします。
ページを少し下にスクロールし、「最初のページを作成」ボタンをクリックします。
SeedProdのランディングページダッシュボードに移動します。ページの上部には4つの異なるページモードがあります：
- 近日公開
- メンテナンス・モード
- 404
- ログイン
各ページモードでは、ワンクリックで特定のランディングページを有効にすることができます。
例えば、Coming Soonモードを有効にして、新しいお店を紹介するcoming soonページを追加することができます。また、404ページモードを有効にして、サイトにカスタム404エラーページを追加することもできます。
そのセクションの下には、SeedProdで作成した他のページのリストが表示されます。まだ作成していないので、新規ランディングページを作成ボタンをクリックして開始します。
2.新しいランディングページを作成する
新しいランディングページを作成するボタンをクリックすると、SeedProdのランディングページテンプレートライブラリが表示されます。
上部のタブをクリックすると、目標や業種ごとにテンプレートを絞り込むことができます。
各テンプレートは多機能です。そのため、どのようなデザインでも使用することができ、ドラッグ＆ドロップエディターで好きなようにカスタマイズすることができます。
このガイドでは、Blank Templateを使用してWooCommerceのチェックアウトページをゼロから作成し、カスタマイズする方法を紹介します。これにより、SeedProdを使用することがいかに簡単であるかの素晴らしい概要がわかるでしょう。
空白テンプレートのサムネイルにマウスを合わせ、チェックマークをクリックしてください。
次に、ページの名前とURLを入力するポップアップが表示されます。この設定は後で変更できるので、好きな名前を付けてください。
Save and Start Editing the Page（ページを保存して編集を開始する）」ボタンをクリックして、ページを起動します。
次の画面では、SeedProdのランディングページエディタが表示されます。
シンプルな2パネルレイアウト：
- 左のパネル：ページを構築しカスタマイズするためのページブロックとセクション
- 右のパネル：ランディングページのリアルタイムプレビュー
ページにコンテンツを追加するには、左側のブロックをドラッグして右側の所定の位置にドロップするだけです。次のステップでその方法を説明します。
3.チェックアウトブロックをページに追加する
WooCommerceのチェックアウトページのカスタマイズを始める前に、基本的なチェックアウトページの構造を設定しましょう。
右側のパネルで、いずれかの列オプションをクリックしてページレイアウトを選択します。
下にあるように、ページに簡単なフレームワークを追加します。ここに、あなたが追加するページ要素が配置されます。
次に、WooCommerceチェックアウトをページに追加する必要があります。左側のパネルで、WooCommerceセクションまでスクロールダウンします。次にチェックアウトブロックをクリックし、以前作成したカラムの1つにドラッグします。
これでランディングページのデザイン内にWooCommerceチェックアウトフォームが表示されるはずです。チェックアウトフォームをクリックすると、左側のパネルにフォームスタイルの設定が表示されます。
このエリアでは、WooCommerceのチェックアウトフォームをカスタマイズすることができます：
- レイアウトを1列または2列にする
- ヘッダーのフォントと色の変更
- チェックアウトフィールドのフォント、色、間隔、ボーダーの編集
- チェックアウトボタンのスタイル、フォント、色の変更
- カスタムアラートカラーの追加
- カートのテキスト、色、ボーダー、フォントの変更
- 支払詳細セクションにカスタムフォントとカスタムカラーを追加する。
次にテンプレートタブをクリックすると、チェックアウトフィールド用の様々なカスタムスタイルが表示されます。どのスタイルをクリックしても、すぐにチェックアウトフォームに追加できます。
次に進む前に、画面右上の緑色の「保存」ボタンをクリックし、進行状況を保存してください。
4.チェックアウトページのデザインをカスタマイズする
ランディングページがより見やすくなったところで、WooCommerceのチェックアウトページをカスタマイズする他の方法を見てみましょう。
WooCommerceのチェックアウトページにヘッダーを追加する
顧客は、自分の道を見つけるために、チェックアウトページにヘッダーを追加することは良い習慣です。SeedProdは、Sectionsを使用してこれを簡単に行う方法を提供します。
ブロックパネルの隣にあるセクションタブをクリックします。ワンクリックでページに追加できるレイアウトが表示されます。
例えば、ヘッダーセクションをクリックすると、3つの異なるヘッダースタイルが表示されます。気に入ったデザインを選び、プラスアイコンをクリックしてあなたのデザインにインポートしてください。
デフォルトでは、新しいセクションはページの一番下に追加されます。このセクションをヘッダーエリアに移動させるには、その上にマウスカーソルを置き、セクション移動アイコンをクリックします。そして、セクション全体をページの上部にドラッグします。
その後、ヘッダーセクション内の任意の要素をクリックすると、左側のパネルにカスタマイズオプションが表示されます。例えば、ヘッダーセクション内の画像ブロックをクリックすると、ロゴとして使用する新しい画像をアップロードすることができます。
ヘッダーのボタンブロックを削除して、ソーシャルプロフィールのアイコンに置き換えることもできる。
WooCommerceのチェックアウトページにおすすめ商品を追加する
SeedProdの強力なWooCommerceとの統合により、どのランディングページからでも簡単にクロスセルやプロモーションを行うことができます。様々な商品グリッドブロックを使用すると、表示することができます：
- 最近の製品
- セール商品
- ベストセラー商品
- 注目商品
- トップクラスの製品
商品グリッドブロックを選択し、ページ上の所定の位置にドラッグするだけです。ブロックをクリックすると、左側のパネルに設定が表示されます。
このパネルでは、表示する商品の列数を選択し、商品グリッドにページネーションを追加することができます。また、ドロップダウンメニューからクエリータイプを選択することで、訪問者が見る商品をフィルタリングすることができます。
その後、商品の並び順を設定することができます：
- 日付
- 身分証明書
- メニューオーダー
- 人気
- ランダム
- 評価
- タイトル
また、昇順または降順で表示することもできます。
チェックアウトページにお客様の声を追加する
お客様の声や星の評価は、チェックアウトページに信頼と信用を加えるもう一つの素晴らしい方法です。潜在的な顧客は、人々があなたの製品を肯定的にレビューしていることを見れば、ショッピングカートを放棄する代わりに、チェックアウトプロセスを完了する可能性が高くなります。
WooCommerceのチェックアウトページにお客様の声を追加するには、左側のパネルからTestimonialブロックをドラッグし、ページの所定の位置にドロップします。その後、ブロックをクリックして設定を表示し、お客様の声を追加することができます。
また、スライド式の証言カルーセルとして表示することもできます。
グローバル・カスタマイズ設定
SeedProdのグローバルカスタマイズ設定では、WooCommerceチェックアウトページの全体的な外観を変更することができます。
画面左下の歯車アイコンをクリックします。フォント、色、背景、カスタムCSSのグローバル設定のパネルが表示されます。
フォント
フォントの見出しを展開すると、ヘッダーと本文のフォントとウェイトを変更できます。ドロップダウンメニューからGoogleフォントを選ぶだけです。
また、「フォントテーマ」ボタンをクリックすると、さまざまなフォントの組み合わせ例を見ることができます。そこから、あなたのページに適用するにはクリックするだけです。
カラー
カラー・セクションも同様です。任意の色をクリックすると、カラードロッパーツールが表示され、見出し、テキスト、ボタンなどの色を個別に選択できます。
また、「カラーパレット」ボタンをクリックすれば、20種類以上のデザイン済みの配色から選ぶこともできます。
背景
背景 セクションでは、背景色、グラデーション、画像を変更できます。ビデオ背景や全幅スライドショーを追加することもできます。
カスタムCSS
そして最後に、カスタムCSSセクションでは、WooCommerceチェックアウトページをさらにカスタマイズするためのカスタムコードを追加することができます。
すべての見た目に満足したら、「保存」ボタンをクリックします。
5.チェックアウトページの設定
カスタマイズが完了したら、チェックアウトページで変更できる他の設定をいくつか見てみましょう。
Eメールリストをつなぐ
まずはメールマーケティングの設定です。SeedProdでは、ランディングページとEメールリストを簡単に結びつけることができます。
画面上部のConnectをクリックすると、一般的なメールマーケティングサービスが幅広く表示されます。チェックアウトページでニュースレターの購読をユーザーにお願いしたい場合は、このパネルを使ってメールマーケティングサービスをリンクさせます。
お好きなプロバイダーを選択し、Eメール統合ドキュメントの手順に従ってセットアップしてください。
同じ画面で、Zapierを使ってチェックアウトページを何千ものアプリとリンクさせたり、Google Analyticsでサイトのパフォーマンスをモニターしたり、Recaptchaでスパムから保護したりすることができる。
ページ設定の設定
メールリストを接続した後、ページ設定タブをクリックし、SeedProdで設定できるその他の設定をご覧ください。設定ページには通常5つのセクションがありますが、これは構築するページのタイプやSeedProdのプランによって異なります。
一般設定
一般設定では、WooCommerceチェックアウトページの名前とURLを変更できます。また、公開と下書きを切り替えることもできます。
プラグインの競合を避け、ページを高速化したい場合は、アイソレーションモードを有効にすることができます。これは、特定のヘッダーとフッターのスクリプトの実行を停止し、パフォーマンスを妨げません。
SEOとアナリティクス
SEOタブでは、WordPressのSEOプラグインを使って、ランディングページのタイトルタグやメタディスクリプションなどを設定することができる。これに最適なプラグインのひとつがAll In One SEOだ。
Analyticsタブも同様です。ここでは、お気に入りのGoogle Analyticsプラグインを接続し、ランディングページのパフォーマンスを監視することができます。MonsterInsights for Google Analyticsを試してみませんか？
詳細がお知りになりたい場合は、MonsterInsightsのレビューをご覧ください。
スクリプト
スクリプトエリアでは、ページのヘッダー、本文、フッターにコードを追加することができます。これは、トラッキングクッキー、Facebookトラッキングピクセル、あるいはアナリティクススクリプトのようなものです。
カスタムドメイン
SeedProdのプロプランのユーザーであれば、既存のウェブサイトに接続されていないカスタムドメインをランディングページに与えることができます。
例えば、新しいウェブサイトを立ち上げたいが、まだ立ち上げていない場合、既存のウェブサイトにSeedProdでcoming soonページを作成し、それを新しいサイトに向けることができます。
この戦術を使えば、WordPressを新たにインストールすることなく、将来のウェブサイトのリストに新しい購読者を誘導することができる。
設定後、変更を保存し、デザインタブに戻ります。
6.カスタムチェックアウトページを公開する
チェックアウトページを公開する前に、モバイルデバイスでテストすることをお勧めします。チェックアウトページがモバイル対応でない場合、タブレットやスマートフォンのような小さなタッチスクリーンでは見栄えもパフォーマンスも悪くなります。
ユーザーがフラストレーションからショッピングカートを放棄してしまう可能性さえある。
良いニュースは、SeedProdは、あなたのページがモバイルフレンドリーであることをチェックできるように、組み込みのモバイルプレビューオプションを持っているということです。画面下のモバイルアイコンをクリックしてください。
これで、チェックアウトページがモバイルでどのように表示されるかを確認し、正しく表示されないものや動作しないものを変更することができます。
すべてがうまくいったら、いよいよ公開です。緑色の保存ボタンの隣にある下向き矢印をクリックし、公開をクリックします。
今なら、そのページで実際の動きを見ることができる。
素晴らしい仕事です！これで素晴らしいカスタマイズされたWooCommerceチェックアウトページが完成しました！
7.WooCommerceでチェックアウトページを割り当てる
新しいチェックアウトページが注文を受け付ける準備ができるまで、あと1ステップあります。WooCommerceのデフォルトチェックアウトページとして設定する必要があります。
これを行うには、WooCommerce " Settingsに移動し、Advancedタブをクリックします。次に、チェックアウトページの 見出しに移動し、ドロップダウンメニューから今ページを選択します。
変更を保存]ボタンをクリックして、設定を保存することを忘れないでください。
それで終わりだ！
SeedProdのランディングページビルダーでWooCommerceのチェックアウトページをカスタマイズする方法がわかりました。SeedProdのWooCommerceの統合により、オンラインストアのデザインを超簡単にコントロールすることができます。
プラグインは高速で肥大化していないだけでなく、初心者でも開発者を雇うことなくカスタマイズされたストアを作成できるほど使いやすい。
だから、自分で試してみてはどうだろう？
また、以下のWooCommerceガイドも参考になるでしょう：
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品を表示する方法
- WooCommerceで商品カテゴリーとタグを表示する方法
- WooCommerceで商品説明を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceのカートが表示されない場合の対処法
- WooCommerceのカート追加ボタンをカスタマイズする方法
- メニューにWooCommerceショッピングカートのアイコンを追加する方法
- WooCommerceで商品カテゴリーページをカスタマイズする方法
- WordPressにWooCommerceの新商品セクションを追加する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
