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のカスタマイザーページを簡単に作成する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WooCommerceのカスタマイザーページを簡単に作成したいですか?

カスタマイザーを表示することで、顧客とつながり、関連商品を宣伝したり、限定クーポンコードを提供することで、より多くの売上を得ることができます。

この投稿では、WooCommerceのカスタムサンキューページを作成する方法を紹介します。

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が提供するもう一つのユニークなウィジェット、カスタマイザー詳細を見てみましょう。

クリックして「カスタマイザー」セクションを選択し、右側のメニューで変更します。例えば、「見出し」フィールドに入力することで、初期設定の見出しを独自のメッセージに置き換えることができます。

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. ソーシャルメディアのフォロワーを増やす

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

これらの買い物客はすでにあなたのビジネスから購入したことがあるため、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

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

これでWordPressサイトにサンキューページが表示されます。

Publishing a custom WooCommerce thank you page

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

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

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

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

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

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

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

Entering the SeedProd license key

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

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

その後、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ページエディターに戻り、クリックして「お買い物カゴに入れる」ブロックを選択し、「商品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プラグインのリストやメールマガジンの作成方法についてのガイドもご覧ください。

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$編集プロセスをご覧ください。

Avatar

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件のコメント返信を残す

  1. 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!

返信を残す

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