Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WooCommerceのカスタマイザーページを簡単に作成する方法

WooCommerceのカスタムサンキューページを作成することで、オンラインストアに大きなインパクトを与えることができます。

その前に、デフォルトのページでも問題はありませんが、個人的なタッチが欠けていることが多いことに注意してください。このようなページでは、顧客とつながりを持ったり、リピート購入を促したり、関連商品を紹介したりする機会を逃してしまう可能性があります。

しかも、基本的なページに固執することは、潜在的な売上やエンゲージメントを犠牲にすることになりかねない。あなたのカスタマは、他の素晴らしいオファーに気づくことなく、先に進んでしまうかもしれません。

良いニュースは、カスタムのサンキューページを作成することは難しいことではないということです。最大の課題は、どのツールを使うかを決めることだ。

様々なオプションを検討した結果、FunnelKitとSeedProdはWooCoomerceのカスタムサンキューページを簡単に作成できるベストプラグインの2つです。このガイドでは、簡単なステップでできる方法をご紹介します。

How to Easily Create Custom WooCommerce Thank you Pages

なぜWordPressでWooCommerceのサンキューページをカスタマイズするのか?

注文確認ページやサンキューページは、オンラインショップの小さな部分のように見えるかもしれませんが、実際には販売プロセスの非常に価値のある部分になります。

WooCommerceの初期設定のサンキューページは、コンバージョンのために最適化されていないので、カスタムページに置き換えることをお勧めします。このページでは、クーポンコードを提供したり、人気の商品を表示したりすることで、買い物客にもっと商品を購入するよう促すことができます。

また、注文した項目、合計金額、配送情報などの重要な情報を表示することもできます。

An example of a custom thank you page

ここでは、WooCommerceのカスタムサンキューページを簡単に作成する方法をステップバイステップでご紹介します。以下のリンクから、お好きな方法をお選びください:

さっそく始めよう!

カスタムWooCommerceサンキューページを作成する最も簡単な方法は、以前はWooFunnelsとして知られていたFunnelKit Funnel Builderを使用することです。これは最高のWordPressセールスファネルと自動化プラグインで、あなたのオンラインストアに簡単に追加できる既製のサンキューテンプレートが付属しています。

これにより、個別コードを一行も記述することなく、プロフェッショナルなデザインの役立つお礼のページを作成することができます。

Creating a custom thank you page using FunnelKit

注: FunnelKit Proプラグインには、より多くの「サンキュー」テンプレートが付属しています。WooCommerce初期設定のサンキューページをカスタマイザーに置き換えるのに必要なものが全て揃っています。

最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

アクティベート後、FunnelKit ” Templatesに行き、’Checkout’ボタンをクリックしてください。

FunnelKit's 'thank you' WooCommerce templates

サンキューページのテンプレートを選ぶ

FunnelKitの既製テンプレートから選択するか、’Start from scratch’を選択してください。プロフェッショナルなデザインのサンキューページを素早く作成できるので、テンプレートの使用をお勧めします。

テンプレートを詳しく見るには、マウスオーバーして「プレビュー」ボタンをクリックしてください。

Previewing FunnelKit's WooCommerce templates

FunnelKitは初期設定で購入手続きのプレビューページを表示します。

サンキュー・デザインを見るには、左側のメニューから「サンキュー・ページ」を選択してください。

Choosing a 'thank you' template using FunnelKit

使用したいテンプレートを見つけたら、’Import This Funnel’をクリックしてください。

すべての画像にLivewireテンプレートを使用していますが、お好きなデザインをお使いください。

Importing WooCommerce templates into WordPress

この時点で、FunnelKitはWordPressブロックエディターにページ構築機能を追加するSlingBlocksなどの追加プラグインのインストールを求めるかもしれません。

このメッセージが表示されたら、「有効化」をクリックして必要なプラグインを入手してください。

Installing WordPress page builder and design plugins

その後、カスタム・サンキューページの名前を入力する。これは参考用なので、WordPressダッシュボードでページを識別できるものであれば何でも構いません。

そうしたら、「追加」ボタンをクリックする。

Naming the custom WooCommerce thank you page

WooCommerceサンキューページのカスタマイズ

テンプレートに含まれるすべてのステップが表示されます。

FunnelKitの無料版を使用しているため、テンプレートにはサンキューページとカスタムWooCommerceチェックアウトページが含まれています。詳細なステップバイステップの手順は、WooCommerce購入手続きのカスタマイズ方法をご覧ください。

サンキューページをカスタマイズするには、「編集」リンクをクリックします。

How to create custom WooCommerce thank you pages using FunnelKit

テンプレートを編集」をクリックして、WordPressブロックエディターでテンプレートを開くことができます。

注意: ページビルダープラグインを使用している場合、FunnelKitはテンプレートを別のエディターで開くことがあります。その場合は、’Edit Template’ではなく、’Switch to WordPress editor’をクリックしてください。

Editing a WooCommerce 'thank you' template using the WordPress editor

WordPressでページを作成するのと全く同じ方法でテンプレートをカスタマイズできます。任意のブロックをクリックし、右側のメニューとミニツールバーの設定を使用して微調整するだけです。

例えば、プレースホルダーのロゴをカスタムロゴに置き換えることが一般的です。これを行うには、画像ブロックをクリックして選択し、ミニツールバーで「置換」を選択します。

Replacing the placeholder logo on a custom WooCommerce page

メディアライブラリを開く」を選択してWordPressのメディアライブラリから画像を選択するか、「アップロード」をクリックしてコンピューターからファイルを選択します。

すでにカスタマイザーのロゴをお持ちでない場合は、Canvaなどのウェブデザインソフトを使って簡単に作成することができます。

画像を選んだら、右側のメニューにある設定を使って、画像のaltテキストを追加したり、幅を変更したり、角を丸くしたりすることができます。

Adding a custom logo to an online store

また、プレースホルダーテキストをあなたのオンラインマーケットに関する情報に置き換えることもできます。テキストブロックをクリックして選択し、カスタマイザーメッセージを入力してください。

また、右メニューの設定を使ってテキストのスタイルを変更することもできます。例えば、枠線やボックスシャドウを使ってテキストを目立たせたり、フォントファミリーを変更したり、WordPressのテキストカラーを変更したりすることができます。

Changing the fonts used on a custom eCommerce page

これらのタグにより、FunnelKitはカスタマイザー名などのパーソナライズされたコンテンツを表示することができます。

注文詳細ウィジェットのカスタマイズ

その後、’Order Details’セクションまでスクロールし、クリックしてみましょう。FunnelKitはこのユニークなウィジェットをプロバイダーし、カスタマーの注文に関する情報を表示します。

FunnelKit's Order Details widget

このウィジェットは箱から出してすぐに使えますが、見た目や表示される情報をカスタマイズしたいかもしれません。

まず、「見出し」フィールドに入力して、セクションの見出しを変更することができます。

Showing order information on a custom 'order confirmed' page

また、「画像を表示」スライダーを使用して、カスタマイザー注文のすべての項目に商品画像を表示するかどうかを選択できます。

会員制サイトや オンラインコースなどのサブスクリプションを販売していますか?その場合、価格や次回の支払い期限など、カスタマイザーのサブスクリプションに関する情報を表示したいと思うかもしれません。

Showing membership or subscription information on a custom WooCommerce page

このセクションを追加するには、右側のメニューで「購読」をクリックして展開します。次に、’購読プレビューを表示’トグルを有効化します。

このセクションでは、「見出し」フィールドに入力することで、初期設定の「購読」テキストを独自のメッセージに置き換えることもできます。

Adding subscription information to a custom online store design

同様に、デジタルダウンロードを販売している場合は、サンキューページに「ダウンロード」セクションを追加することができます。これには、ファイル名、残りのダウンロード数、有効期限などの便利な情報がコンテナで表示されます。

カスタマイザーページから購入した商品を直接ダウンロードできるようにボタンを追加することもでき、顧客体験を向上させることができます。

Showing digital downloads information on a custom WooCommerce 'order confirmed' page

このセクションを追加するには、右側のメニューで「ダウンロード」をクリックして展開するだけです。トグルを使って情報を追加したり削除したりできます。

また、初期設定の見出しやボタンテキストを独自のメッセージに置き換えることもできます。

How to easily create custom WooCommerce thank you pages

Order Detailsの設定に満足したら、「Style」タブをクリックして見栄えを変更することができます。

ここでは、注文セクション全体の見出しや背景色を変更したり、「ダウンロード」や「購読」セクション内の個々の要素を目立たせたりすることができます。

Customizing the colors and fonts on a custom eCommerce page

カスタマイザー詳細ウィジェットの編集

その後、FunnelKitが提供するもう一つのユニークなウィジェットである’Customer Details’を見てみましょう。

クリックして「カスタマーの詳細」セクションを選択し、右側のメニューで変更を加えるだけです。例えば、「見出し」フィールドに入力することで、デフォルトの見出しを独自のメッセージに置き換えることができます。

Showing customer details on a custom 'order confirmed' design

また、「レイアウト」ドロップダウンメニューを使用して、複数カラムまたは個別カラムのレイアウトを切り替えることができます。

その後、「スタイル」タブをクリックし、フォント、文字サイズ、色などを変更することができる。

カスタムサンキューページにブロックを追加する

テンプレートに加えた変更に満足したら、独自のコンテンツを追加したくなるかもしれません。これにより、カスタマイザー体験の向上、売上の増加、ブランドの宣伝などに役立ちます。

ブロックを追加するには、右隅の’+’アイコンをクリックし、任意のブロックをデザインにドラッグするだけです。FunnelKit、WooCommerce、WordPressには様々なブロックがあります。

  1. 他のWooCommerce商品を宣伝する

お礼のページはバイヤージャーニーの終わりのように思えるかもしれませんが、そうである必要はありません。このページを使って、買い物客が買いたいと思うかもしれない他の商品を勧めることができる。これにより、売上を伸ばすと同時に、あなたが販売している他の素晴らしい商品についての認知度を高めることができる。

利用可能なブロックを確認するには、左側メニューの「WooCommerce」セクションまでスクロールしてください。ここには、「売れ筋商品」、「新着商品」、「セール商品」などのブロックがあります。

Adding WooCommerce product blocks to a custom online store design

使いたいブロックを見つけて、デザインにドラッグするだけです。

これで、クリックしてブロックを選択し、右側メニューの設定を使ってカスタマイズできる。

Adding best-selling products to an 'order confirmed' page
  1. ソーシャルメディアのフォロワーを増やす

X(ツイッター)やフェイスブックなどのソーシャルメディアサイトは、商品を宣伝するのに最適な場所なので、できるだけ多くのフォロワーを獲得したいものです。そう考えると、カスタムのサンキューページにソーシャルメディアへのリンクを追加するのは良いアイデアだ。

これらの買い物客はすでにあなたのビジネスから購入したことがあるため、Instagram、Snapchat、YouTube、その他のソーシャルプラットフォームであなたをフォローする可能性が高い。

ソーシャルアイコン」ブロックをページにドラッグするだけです。その後、「+」アイコンをクリックし、追加したいソーシャルアイコンを選択します。

Adding a Social Icons block to a custom WooCommerce page

選択後、「ソーシャルアイコン」ブロックの新規アイコンをクリックします。

ミニツールバーが表示されますので、リンクしたいプロフィールのURLを入力してください。

Adding social media links to a WooCommerce page

この手順を繰り返すだけで、すべてのソーシャルメディアアカウントをブロックに追加できます。

  1. カスタマイザーに限定クーポンコードを提供する

クーポンコードは、買い物客にもう一度あなたから購入することを促します。そのため、サンキューページにクーポンコードを追加するとよいでしょう。例えば、次回購入時に送料を無料にするといった具合です。

Adding coupon codes to a custom 'thank you' page

WooCommerceのビルトインクーポン機能、またはクーポンコードプラグインを使用してクーポンコードを作成することができます。

クーポンを作成したら、サンキューページにテキストブロックを追加するだけです。このブロックタイプにクーポンを入力し、その他のメッセージも入力します。

Adding blocks to an online store design using the WordPress block editor

これは素晴らしいスタートだが、顧客によって異なるクーポンコードを表示したい場合もあるだろう。例えば、初めて来店されたお客様には、次回の購入時に大きな割引を提供することで、ロイヤルティを高めることができます。

これを行う最善の方法は、FunnelKit Builder Proにアップグレードすることです。このプレミアムプラグインには強力なルールベースのエンジンがあり、注文合計、項目数、使用したWooCommerce支払いゲートウェイなどに基づいて買い物客に異なるクーポンを表示することができます。

カスタムWooCommerceサンキューページを公開する

サンキューページの設定に満足したら、「更新」をクリックして変更を保存します。その後、「サンキューページに戻る」をクリックします。

Closing the FunnelKit page editor

サンキューページ」の隣にある「下書き」ボタンをクリックし、「公開する」を選択します。

これで、サンキュー・ページがあなたのワードプレス・ウェブサイトに掲載されます。

Publishing a custom WooCommerce thank you page

方法2:ページビルダーを使用してカスタマイザーWooCommerceサンキューページを作成する

また、SeedProdを使ってカスタムWooCommerceサンキューページを作成することもできます。これは、ドラッグアンドドロップエディターを使用してページをデザインすることができ、WordPressのブロックエディターが制限されすぎていたり、使いにくかったりする場合に最適です。

SeedProdには、販売ページやリードスクイーズページを作成するために使用できるeコマーステンプレートを含む、350以上のプロフェッショナルにデザインされたテンプレートが付属しています。

さらに、SeedProdはWooCommerceをフルサポートしており、あなたのレイアウトにドラッグするだけで使える既製のWooCommerceブロックまで付属しています。

最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、SeedProd ” Settingsに進み、ライセンスキーを入力してください。

Entering the SeedProd license key

この情報は、SeedProdサイトのアカウントで確認できます。ライセンスを入力した後、「Verify Key」ボタンをクリックしてください。

注: SeedProdには無料版もありますが、このガイドでは必要なWooCommerceブロックがビルトインされているPro版を使用します。また、あなたのオンラインストアを宣伝するためにすでに使用しているメールマーケティングサービスとも統合できます。

サンキューページのテンプレートを選ぶ

その後、SeedProd ” Landing Pagesに行き、’Add New Landing Page’をクリックします。

Creating a new page in WordPress

次に、サンキューページのテンプレートを選ぶ必要があります。

SeedProdのテンプレートは、近日公開404ページなど、さまざまなキャンペーンタイプに整理されています。WooCommerceのカスタムサンキューページを作成するので、先に進み、「サンキュー」タブをクリックします。

SeedProd's thank you templates

このガイドでは、「注文完了のサンキューページ」のテンプレートを使用します。

このテンプレートにマウスオーバーし、チェックマークアイコンをクリックしてください。

SeedProd's WooCommerce 'thank you' templates

次に、カスタマイザーページの名前を入力します。SeedProdは自動的にこの名前をURLに使用しますが、必要であればURLを編集することができます。

入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。

Naming a custom WooCommerce template in SeedProd

これでSeedProdエディターがロードされ、右側にページのライブプレビューが表示され、左側にいくつかの設定が表示されます。

ブロックをカスタマイズするには、ページビルダーでクリックして選択し、左側のメニューの設定を使用するだけです。

Customizing a custom thank you page using SeedProd

左側のメニューには、注文確認テンプレートにドラッグできるブロックもあります。

アップセルセクションを追加して、より多くの売上を獲得する

サンキューページで商品をアップセルすることは、マーケティング担当者が売上を増やすために使用する実績のあるテクニックです。一つのオプションは、SeedProdのセクションを使用してアップセルブロックを作成することです。

セクションとは、よく一緒に使われるブロックを集めた既成のもので、美しいデザインのページを素早く作成するのに役立ちます。

セクション』タブをクリックし、左側のメニューから『ヒーロー』を選択するだけです。その後、「Hero 2」にマウスオーバーし、「+」アイコンが表示されたらクリックする。

SeedProd's ready-made hero sections

これでページにヒーロー・セクションが追加される。

セクションの「Image」ブロックをクリックして選択します。次に、左側のメニューで「Use Your Own Image」をクリックし、メディアライブラリを開きます。

Adding a logo to a custom WooCommerce thank you page

アップセルしたい商品の画像を追加することができます。

それができたら、「ヘッドライン」ブロックをクリックし、商品タイトルを入力します。

Adding a headline block using the drag and drop SeedProd page builder

次に、「テキスト」ブロックをクリックして選択し、商品説明を入力します。

プレースホルダーの行動喚起ボタンを「カートに入れる」ボタンに置き換えることで、カスタマにこの項目をカゴに入れるよう促すことができます。

これを行うには、「Call To Action」ブロックをクリックして選択し、「Delete Block」アイコンをクリックします。

Removing blocks from an online store template using SeedProd

次に、メニューから「カートに入れる」ブロックを探します。

このブロックを「ヒーロー2」セクションの空いたスペースにドロップするだけ。

SeedProd's 'add to cart' block

さて、このボタンをWooCommerceの適切な商品に接続しましょう。

そのためには、商品のIDを知る必要があります。この情報がわからない場合は、WordPressダッシュボードのProducts ” All Productsにアクセスしてください。ここで商品の上にマウスオーバーするだけで、その商品のIDが表示されます。

Getting a product ID in WooCommerce

SeedProdページエディターに戻り、’Add To Cart’ブロックをクリックして選択し、’Product ID’ボックスにIDを追加します。

また、”Direct to Checkout “スライダーを有効化することで、買い物客はそのまま購入手続きへ進むことができます。

Adding a checkout button to a WooCommerce thank you page

この時点で、左側のメニューにある設定を使用して、ボタンの外観を変更することができます。例えば、配色、ボタンテキスト、配置などを変更することができます。

その後、アップセル商品を宣伝する見出しを追加するのがよいでしょう。例えば、『こんな商品にもご興味があるかもしれません』とか、『ご注文の追加商品として最適です』とか。

見出し」ブロックをレイアウトにドラッグするだけです。

How to easily create custom WooCommerce 'thank you' pages

そして、使いたいメッセージを入力する。

WooCommerceの売れ筋商品を宣伝する

もう一つのオプションは、サンキューページに売れ筋商品のセクションを追加することです。これらの商品はすでに人気があるため、買い物客も買いたいと思う可能性が高い。

左側のメニューから「ベストセラー商品」ブロックを探し、レイアウト上にドラッグします。

Showing best selling products on a custom eCommerce page using SeedProd

他にも、セール商品、人気商品、最近の商品など、追加できる商品グリッドの種類はたくさんあります。

詳しくは、WooCommerceで人気商品を表示する方法をご覧ください。

カスタムWooCommerceサンキューページを公開する

WooCommerceサンキューページの見た目に満足したら、「保存」の隣にあるドロップダウンの矢印をクリックし、「公開する」を選択して公開します。

Saving a custom WooCommerce thank you page

ページを公開した後、カスタマイザーが新しいページにリダイレクトされるようにWooCommerceの設定を変更する必要があります。

これを行う最も簡単な方法は、WooCommerce用サンキューページプラグインを使用することです。このプラグインを使えば、購入後にカスタマイザーを任意のURLにリダイレクトさせることができます。

最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、カスタムサンキューページのURLを入力する必要があります。

この情報を得るには、SeedProd ランディングページに 行き、作成したばかりのサンキューページを見つけてください。URL’欄にリンクがあります。

Getting the SeedProd page URL

この情報を入手したら、WooCommerce ” サンキューページにアクセスしてください。

ここで、「グローバルサンキューページを有効化」にチェックを入れます。

Showing a custom thank you page to WooCommerce customers

サンキューページのURL」ボックスにリンクを入力します。

設定が完了したら、「変更を保存」をクリックして設定を保存します。

Redirecting to a custom thank you page in WooCommerce

これで、WooCommerceは顧客が注文を完了すると、カスタマイザーページに送信します。

ボーナスのヒントWooCommerceストアのホリデーセールを計画する

WooCommerceストアのホリデーセールを企画することは、特にクリスマスや新年を目前に控え、新規顧客を獲得し、収益を増加させる素晴らしい方法です。

ホリデーシーズンには、買い物客は積極的にセールを探します。クーポンや送料割引を提供することで、サイトへのトラフィックを増やすことができます。

Christmas sale popup

よくできたセールは目先の売上を押し上げるだけでなく、ブランドの認知度を高め、既存顧客からのリピート注文を促すこともできる。

詳しくは、WooCommerceストアでホリデーセールを計画する方法をご覧ください。

この記事がWooCommerceのカスタムサンキューページ作成のお役に立てれば幸いです。次は、あなたのストアに最適な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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。