コーディング不要でWooCommerceページを編集する方法

多くのWooCommerceストアオーナーは、ページを洗練されたブランドイメージにしたいと考えています。しかし、デフォルトのテンプレートで変更を加えるのは制限が多いと感じることがあります。

小さな調整ごとに開発者を雇うのは、特に迅速に作業を進め、コストを抑えたい場合には、常に実用的とは限りません。

幸いなことに、WooCommerceと完全に連携する強力なページビルダーやカスタマイズプラグインがあります。これらのツールを使用すると、コードに触れることなく、美しい商品ページ、ショップレイアウト、チェックアウトフローを作成できます。

さらに良いことに、開発者を待つことなく、いつでも自分で更新できます。

時間をかけて、実際のWooCommerceストアで本当に効果のあるツールを数多くテストしてきました。このガイドでは、コーディングや技術的なスキルを必要とせずに、SeedProdを使用してページをカスタマイズする最も簡単な方法をご紹介します。

WooCommerceページを編集する方法

オンラインストアのWooCommerceページを編集する理由

WooCommerceは、オンラインストアの製品、ショップ、アカウント、チェックアウト、カート機能を表示するために多くのページを作成します。

デフォルトでは、これらのページの表示方法はWordPressテーマによって制御されます。選択できる素晴らしいWooCommerceテーマがたくさんあります。

ただし、これらのページの編集は、見た目ほど簡単ではない場合があります。

たとえば、追加の製品を表示したり、アップセル機能を追加したり、レイアウトを変更したりすることができない場合があります。

そこがSeedProdの出番です。これは究極のWooCommerceページビルダープラグインです。直感的なドラッグ&ドロップツールを使用してWooCommerceページをデザインできます。

長年にわたり、多くのパートナーブランドがランディングページやカスタムテーマ全体を作成するためにこれに依存してきました。

デモ環境でも徹底的にテストしました。私たちの経験について詳しく知りたい場合は、SeedProdのレビューをご覧ください。

SeedProd

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

この記事のさまざまな方法では、WooCommerceページを編集するために必要な機能が備わっているSeedProd Proバージョンを使用します。

有効化後、プラグインのライセンスキーを入力するために、SeedProd » 設定ページにアクセスする必要があります。この情報は、SeedProdウェブサイトのアカウントで見つけることができます。

WordPressにSeedProdライセンスキーを追加する

ライセンスキーを入力すると、準備完了です。これで、オンラインストア向けの最適化されたWooCommerceページを編集および作成できます。

それでは、WooCommerceのページをステップバイステップで編集する方法を見ていきましょう。

下のいずれかのリンクをクリックすると、目的の方法にジャンプできます。

完全カスタムのWooCommerceテーマを作成する

SeedProdには、完全なWooCommerceテーマビルダーが組み込まれています。これにより、WooCommerceテーマを独自のカスタムテーマに置き換えることができます。

このアプローチの利点は、WooCommerceテーマの編集時に、より柔軟に対応できることです。シンプルなドラッグ&ドロップツールを使用して、どのページでも編集できます。

開始するには、単にSeedProd » セットアップページに移動し、「WooCommerceストアを構築する」オプションの横にある「ストアのテーマを選択」ボタンをクリックしてください。

カスタムWooCommerceテーマを作成する

次に、プラグインは、開始点として使用できる、すぐに使える多くのWooCommerceテーマを表示します。

テンプレートを選択するには、テンプレートをクリックするだけです。

WooCommerceテンプレートの選択

各WooCommerceまたはWordPressテーマは、ウェブサイトやオンラインストアのさまざまな領域を表示するテンプレートのコレクションです。

SeedProdは、テーマ用にこれらのテンプレートを生成し、リストを表示します。

テーマテンプレート

これで、テンプレートにマウスカーソルを合わせ、「デザインを編集」リンクをクリックして編集を開始できます。

これにより、SeedProdページビルダーインターフェースが起動します。

WooCommerceテーマのショップページを編集する

左側の列から一般的なウェブサイト構築ブロックをすべて追加できます。右側には、編集中のページのライブプレビューが表示されます。

編集したい項目をポイントしてクリックするだけで編集することもできます。

商品グリッドを編集

SeedProdには、販売志向のWooCommerceテーマを構築するために必要なすべてのWooCommerceブロックが付属しています。

テンプレートの変更が完了したら、「保存」ボタンをクリックして変更を保存してください。

WooCommerceテーマテンプレートを保存する

カスタムWooCommerceテーマの他のテンプレートを編集するには、このプロセスを繰り返してください。

すべてのページの編集が完了したら、SeedProd » テーマビルダーページに移動し、「SeedProdテーマを有効化」スイッチを切り替えます。

SeedProdテーマを有効化

カスタムWooCommerceテーマが既存のWooCommerceテーマに置き換わります。

これで、WordPressウェブサイトにアクセスして、それが機能していることを確認できます。

テーマプレビュー

詳細については、コーディングなしでカスタムWordPressテーマを作成する方法に関する完全なチュートリアルをご覧ください。

一方で、既存のWooCommerceテーマを引き続き使用し、ウェブサイトの特定の С частиのみを編集したい場合は、読み進めてください。

WooCommerceのチェックアウトページをカスタマイズする

どのeコマースストアのチェックアウトページも、カスタマージャーニーにおいて最も重要なステップの1つです。

デフォルトでは、WooCommerceは販売とコンバージョンに最適化されていない、シンプルなチェックアウトエクスペリエンスを備えています。

シンプルなチェックアウト体験

チェックアウトページに小さな編集を加えることで、ストアでの売上を増やし、カート放棄を減らすことができます。

例えば、チェックアウトページに「カートに追加」ボタン付きの関連商品を表示することで、ユーザーが他に購入したいものを見つけられるようにすることができます。

カスタムチェックアウトページを作成するには、単にSeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

新しいランディングページを追加

次に、ページ用のテンプレートを選択するように求められます。

画面上のテンプレートのいずれかを選択して編集し、チェックアウトページを作成することも、空白のテンプレートから始めることもできます。

空のテンプレートを選択

このチュートリアルでは空白のテンプレートを使用しますが、どれでも選択できます。

次に、ページのタイトルとURLを提供する必要があります。このページを簡単に識別できるものであれば何でも使用できます。

ページ名とURL

続行するには、「保存してページ編集を開始」ボタンをクリックしてください。

これにより、SeedProdのページビルダーインターフェイスが起動し、ブロックをドラッグアンドドロップするだけでページレイアウトを作成できます。

ページビルダーを起動しました

まず、ヘッダーを追加し、独自のブランディングでカスタマイズします。

SeedProdにはセクションがあり、これらは一緒に使用されることが多いブロックのコレクションです。ヘッダーセクションを追加するには、「セクション」タブをクリックし、「ヘッダー」カテゴリを選択します。

ヘッダーセクションを追加

次に、マウスをヘッダーに移動し、「追加(+)」ボタンをクリックしてページに挿入します。

各ブロックをクリックして、独自のロゴ、メニュー、およびコールトゥアクションに置き換えるだけで、ヘッダーセクションを編集できるようになりました。

ヘッダーページを編集する

ヘッダーに満足したら、2 列レイアウトを追加します。

この2列レイアウトを使用して、チェックアウトフォームとアップセル商品、お客様の声、その他の要素を表示できます。

レイアウトを選択

その後、左側のメニューからチェックアウトブロックを追加する必要があります。

左側の列に追加します。この列は幅が広く、モバイルデバイスでは最初に表示されます。

チェックアウトブロックを追加

次に、右側の列にブロックを追加する必要があります。ここは、ユーザーに購入を完了させるために使用できる領域です。

ここにお客様の声ブロックを追加するか、最も人気のある商品を表示できます。

アップセル商品

コンバージョン率を高めるためにチェックアウトページを改善するために追加できるその他の機能がいくつかあります。

チェックアウトページの編集が完了したら、画面右上にある「保存」の横にある矢印をクリックし、「公開」をクリックするのを忘れないでください。

保存して公開

次に、すべての顧客に対してカスタムチェックアウトページの使用を開始するようにWooCommerceに指示する必要があります。

WooCommerce » 設定ページに移動し、「高度な設定」タブに切り替えます。

カスタムチェックアウトページを使用する

「ページ設定」タブの下で、「チェックアウトページ」オプションにカスタムチェックアウトページを選択します。設定を保存するために、「変更を保存」ボタンをクリックすることを忘れないでください。

新しいブラウザタブでストアにアクセスし、商品をカートに追加して新しいチェックアウト体験を試すことができます。

カスタムチェックアウトページをプレビューする

詳細については、WooCommerceのチェックアウトページのカスタマイズ方法に関するチュートリアルをご覧ください。

ボーナスのヒント: 新しいカートページのパフォーマンスを確認したいですか?初心者のためのWordPressコンバージョン追跡に関するチュートリアルで、すべてのコンバージョンを追跡してください。

WooCommerceチェックアウトフォームをカスタマイズする

チェックアウトページは、多くのユーザーがカートを放棄する領域の1つです。

ユーザーが購入を完了するように促す最も簡単な方法は、より良いチェックアウト体験を提供することです。

ここでFunnelKitがお役に立ちます。これは、WooCommerce向けの最高のセールスファネルビルダーの1つであり、ファネル、チェックアウトページ、カート体験などを最適化できます。

FunnelKit Automations

私たちはこのツールをさまざまな目的で何度もテストしており、強くお勧めします。

何十ものテンプレート、ファネルビルダーウィザード、カートおよびチェックアウトページのドラッグアンドドロップ編集機能を備えています。当社のインサイトの詳細については、FunnelKitのレビューをご覧ください。

まず、ウェブサイトにアクセスしてFunnelKitプランにサインアップする必要があります。

注意: セールファネル、アップセル、注文時の追加購入、その他の機能を解除するには、少なくともPlusプランが必要です。

その後、FunnelKit BuilderおよびFunnelKit Builder Proプラグインをインストールして有効化する必要があります。これらはFunnelKitウェブサイトのアカウントで見つけることができます。

FunnelKitプラグイン

ヘルプが必要ですか? WordPress プラグインのインストール方法に関するチュートリアルをご覧ください。WordPress プラグインのインストール方法

有効化すると、プラグインライセンスキーの提供を求められます。FunnelKitウェブサイトのアカウントの下にあるダウンロードページで確認できます。

完了したら、WooCommerceのチェックアウトフォームをカスタマイズする準備が整いました。

WordPress管理ダッシュボードのFunnelKit » ストアチェックアウトページに移動し、「ストアチェックアウトを作成」ボタンをクリックするだけです。

ストアチェックアウトを作成する

次の画面で、まずエディタインターフェースを選択する必要があります。

FunnelKitテンプレートは、ショートコードを使用して、デフォルトのGutenbergエディター、ElementorDivi、Oxygen、またはその他のページビルダーで編集できます。

その後、テンプレートを選択する必要があります。数十種類の美しいテンプレートから選択できます。テンプレートのライブプレビューを表示するには、「プレビュー」ボタンをクリックするだけです。

プレビューでは、シングルステップまたはマルチステップのチェックアウトページを選択できます。その後、上部にある「このファネルをインポート」ボタンをクリックするだけです。

ファネルインポーター

次に、ファネルの名前を入力するように求められます。

後で識別するのに役立つ任意の名前を付けることができます。次に、「OK」ボタンをクリックして続行します。

カスタムカートに名前を付ける

FunnelKitがカスタムチェックアウトページを作成します。

その後、ページダッシュボードが表示されます。ここから、チェックアウトページを編集したり、ステップを追加したり、注文時の追加購入(オーダーバンプ)を追加したりできます。

カスタムチェックアウトページの編集

ページを編集すると、以前に選択したエディタで開かれます。

このチュートリアルでは、Gutenbergを選択しました。チェックアウトページの各項目は、クリックして選択するだけで編集できるブロックです。

チェックアウトページエディター

「ブロックを追加」ボタンをクリックして、新しいブロックを追加することもできます。

変更が完了したら、「更新」ボタンをクリックすることを忘れないでください。

これでチェックアウトページダッシュボードに戻ります。ここから「フィールド」タブに切り替える必要があります。

フィールドエディター

ここでチェックアウトフォームのフィールドを編集できます。この例では、2段階のチェックアウトフォームを使用しています。これにより、支払い前に連絡先情報を取得できます。

右側の列から新しいフォームフィールドを追加することもできます。デフォルトでは、プラグインは一般的に使用されるチェックアウトフィールドを表示します。

ただし、「カスタムフィールドを追加」ボタンをクリックしてカスタムフォームフィールドを追加することもできます。

新しいカスタムフィールドを追加

これにより、フィールドタイプを選択し、メタキーを指定し、ラベルを入力できるポップアップが表示されます。

フィールドを「必須」に設定し、チェックアウトページまたはサンキューページに割り当てることもできます。

カスタムチェックアウトフィールドを作成する

フォーム設定を保存するために、「変更を保存」ボタンをクリックすることを忘れないでください。

FunnelKitには、よりスムーズな体験のためにチェックアウトページに追加できる多くの最適化機能が付属しています。

「最適化」ページに切り替えるだけで、チェックアウトページに適用できる最適化のリストが表示されます。

チェックアウトページの最適化

最適化をクリックして設定し、「変更を保存」ボタンをクリックして変更を保存します。

次に、「設定」タブに切り替えて、チェックアウトファネルでアナリティクス、Facebookピクセル、カスタムスクリプト、またはCSSを有効にします。

ファネル設定

変更を適用するには、「変更を保存」ボタンをクリックすることを忘れないでください。

最後に、「チェックアウト」ページのタイトルの横にある「下書き」ボタンをクリックして、「公開」に変更する必要があります。これにより、既存のチェックアウトページが、作成したばかりのカスタムファネルに置き換わります。

チェックアウトページを公開

作成したカスタムチェックアウト体験をテストするために、新しいブラウザタブでストアにアクセスできるようになりました。

これは、デモウェブサイトでの表示方法です。

カスタムチェックアウトページのプレビュー

WooCommerceに1ページチェックアウトを追加する

FunnelKitでは、1ページチェックアウトエクスペリエンスを作成することもできます。

FunnelKit » Store Checkout ページにアクセスし、「Store Checkout を作成」をクリックする必要があります。

ストアチェックアウトを作成する

テンプレート選択で、上部にある「ワンステップ」オプションをクリックするだけです。

その後、「このファネルをインポート」ボタンをクリックして続行します。

ワンステップチェックアウト

その後、お好みのエディターでテンプレートの編集を続けることができます。詳細な手順については、このチュートリアルの前のセクションを参照してください。

WooCommerceにスライドインカートを追加する

ほとんどのWooCommerceテーマには、個別のカートページが付属しています。このカート体験は、ショッピングとチェックアウトの体験に摩擦を加えます。

ユーザーが商品の品質を調整したり、カートから商品を削除したりする必要がある場合、現在表示しているページを離れてカートを更新する必要があります。

これは、WooCommerceにスライドインカートを追加することで修正できます。

スライドインカートは、画面上にカートボタンを表示します。ボタンをクリックすると、ユーザーがカートに追加した商品が表示されるスライドインメニューが表示されます。

スライドインカート

ユーザーはページを離れることなく、カートを編集および更新できるようになりました。

FunnelKitには、オンラインストアとシームレスに統合される美しいスライドインカート機能があります。商品をアップセルしたり、チェックアウトを促進したり、割引を提供したり、その他多くのことに使用できます。

まず、FunnelKitのウェブサイトにアクセスし、アカウントにサインアップする必要があります。

注意: スライドインカート機能にアクセスするには、少なくともPlusプランが必要です。

サインアップ後、FunnelKitウェブサイトのアカウントにアクセスして、FunnelKit Cartプラグインをダウンロードしてください。

FunnelKitカート

次に、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

プラグインを有効化したら、スライドインカートの設定を行うために FunnelKit » Cart ページに移動する必要があります。

カート設定

ここから、左側に多くのオプションが表示され、スライドインカートの外観のライブプレビューが表示されます。

FunnelKitは多くのカスタマイズオプションを提供します。たとえば、さまざまなスタイルから選択したり、カートアイコンを選択したり、ボタンのテキストを変更したりできます。

アップセル商品やクロスセル商品を加えたり、割引を提供したりして、カート体験をより魅力的にすることができます。

追加のカート設定

変更を公開するには、「保存」ボタンをクリックすることを忘れないでください。

ライブストアでスライドインカートをテストするために、ウェブサイトにアクセスできるようになりました。

WooCommerce のカートページをカスタマイズする

WooCommerceには、ユーザーがチェックアウトページに進むことができるデフォルトのカートページがあります。

デフォルトでは、顧客がカートに追加した商品が表示されます。しかし、調査によると、70%以上の顧客がオンラインストアを離れる際に購入を完了していません。

WooCommerceのテーマは、コンバージョンに最適化されていない、退屈なカートページであることがよくあります。

WooCommerceのデフォルトのカートエクスペリエンス

WooCommerceのカートページをカスタマイズすることで、カート放棄を簡単に減らし、売上を向上させることができます。

カスタムチェックアウトページを作成するには、単にSeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

新しいランディングページを追加

次に、ページ用のテンプレートを選択するように求められます。

画面上のテンプレートのいずれかを選択して編集し、カートページを作成することも、空白のテンプレートから開始することもできます。

空のテンプレートを選択

このチュートリアルでは、空白のテンプレートを使用します。

次に、ページのタイトルとURLを提供する必要があります。このページを簡単に識別できるものであれば何でも使用できます。

カートページのタイトルとURL

これにより、SeedProd ビルダーインターフェイスが起動します。

「セクション」タブに切り替えて、空白のテンプレートにヘッダーを追加することから始めることができます。

ヘッダーセクションを追加

その後、お好みに合わせてヘッダーエリアをポイント&クリックで編集してください。

その下に、他のカートページブロックを追加するために使用する 2 列レイアウトを追加する必要があります。

レイアウト列を追加

次に、「カート」ブロックを右側の列に追加します。

現在カートが空なので、商品は表示されません。ストアにアクセスして、いくつか商品をカートに追加してから、SeedProdページビルダーを再読み込みしてください。

カートブロックを追加

その後、カートページを改善するために他の要素を追加できます。

例えば、まずお客様の声を追加したり、FOMO(恐怖離脱)効果を促すためにカウントダウンタイマーを追加したりすることから始めることができます。

アップセルとFOMO(機会損失の恐怖)の創出

さまざまなブロックを追加したり、色や幅を調整したりして、自由に試してみてください。

編集が完了したら、画面右上にある「保存して公開」をクリックすることを忘れないでください。

保存して公開

次に、すべての顧客に対してカスタムカートページの使用を開始するように WooCommerce に指示する必要があります。

WooCommerce » 設定ページに移動し、「高度な設定」タブに切り替えます。

カスタムカートページを使用する

新しいブラウザタブでオンラインストアにアクセスできるようになりました。

いくつかの商品を追加し、カートページに移動して、新しいカートページが機能していることを確認してください。

カートページのプレビュー

WooCommerceの商品ページを編集する

WooCommerceのテーマは、ウェブサイト上のすべての製品を表示するために同じテンプレートを使用します。

ただし、他の製品よりも一部の製品を宣伝したい場合があります。重要な製品を区別するためにできることは、それらを注目の製品にすることです。

SeedProd を使用すると、カスタム製品ページを作成できます。コンバージョン率を高めるために特別に作成された、よく設計されたテンプレートを使用し、製品情報を入力するだけです。

開始するには、単にSeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

新しいランディングページを追加

次に、ページ用のテンプレートを選択するように求められます。

画面上のテンプレートのいずれかを選択して編集し、製品ページを作成できます。コンバージョン向けに最適化されたいくつかのテンプレートは、「セール」タブの下にあります。

商品ページを作成するためのテンプレートを選択する

テンプレートを選択して続行するには、クリックするだけです。

次に、ページタイトルとURLの入力を求められます。商品名をタイトルとURLに使用できます。

商品ページのタイトルとURL

続行するには、「保存してページ編集を開始」ボタンをクリックしてください。

これにより、選択したテンプレートでSeedProdページビルダーインターフェースが起動します。ページ上の任意の項目をポイントしてクリックするだけで編集できます。

商品ページの編集

ロゴ、ナビゲーションメニュー、コールトゥアクションボタンなどのヘッダーアイテムを自分のものに置き換えることから始めることができます。

その後、画像を製品画像に置き換え、必要に応じてテキストを編集できます。

カートに追加ボタンで商品詳細を追加

最後に、コールトゥアクションを「カートに追加」ブロックに置き換えることができます。

その後、「カートに追加」ブロックの設定で商品IDを入力する必要があります。ボタンのテキストを変更したり、サブテキスト、色を追加したり、配置をシフトしたりすることもできます。

カートバンドルを編集

商品IDを見つけるには、別のブラウザタブでWordPress管理画面の商品 » 全商品ページに移動する必要があります。

プロモーションしたい製品にマウスカーソルを合わせると、他のリンクと一緒に製品IDが表示されます。

WooCommerceで商品IDを見つける方法

商品ページをより効果的にするために、これらのヒントを試すことができます。

  • ズーム効果付きの高品質な商品画像を追加して、ユーザーが商品をはっきりと確認できるようにします。
  • メインのコールトゥアクションの下に、商品機能を強調し、顧客により多くの情報を提供するさまざまな行を作成できます。
  • FOMO(フォーモ)効果を誘発するために、ソーシャルプルーフを活用しましょう。

商品ページの編集が完了したら、上部にある「保存して公開」ボタンをクリックすることを忘れないでください。

商品ページを保存して公開

公開したら、「プレビュー」ボタンをクリックして商品ページを表示できます。

これにより、ウェブサイトにライブ製品ページが表示され、プロモーションを開始できます。

商品ページプレビュー

詳細とボーナスのヒントについては、WooCommerceの商品ページをカスタマイズする方法に関するチュートリアルをご覧ください。

WooCommerceストアのショップページをカスタマイズする

WooCommerceを使用すると、ショップページに商品を簡単に表示できます。基本的に、商品はグリッドレイアウトで表示されるページです。

ほとんどのWooCommerceテーマのショップテンプレートは退屈で、セールスやコンバージョンに最適化されていません。さらに、カスタマイズするためのオプションがほとんどないか、全くありません。

SeedProdを使用すると、WooCommerceのショップページを簡単に作成およびカスタマイズできます。独自のレイアウトとデザインを選択し、コンバージョン率を高めるためにこのページを最適化できます。

開始するには、単に SeedProd » ランディングページ に移動し、「新しいランディングページを追加」ボタンをクリックします。

新しいランディングページを追加

次に、ページ用のテンプレートを選択するように求められます。

画面上のテンプレートのいずれかを選択し、編集してショップページを作成できます。

商品ページを作成するためのテンプレートを選択する

テンプレートを選択して続行するには、クリックするだけです。

次に、ページタイトルとURLの入力を求められます。メインのショップページであることを示すために、Shop、Store、またはStorefrontのようなものを使用できます。

ショップページ

続行するには、「保存してページ編集を開始」ボタンをクリックしてください。

これにより、選択したテンプレートでSeedProdページビルダーインターフェースが起動します。ページ上の任意の項目をポイントしてクリックするだけで編集できます。

商品ページの編集

ロゴ、ナビゲーションメニュー、コールトゥアクションボタンなどのヘッダーアイテムを自分のものに置き換えることから始めることができます。

その後、大きな画像と主要なコールトゥアクションを備えたヒーローセクションを上部に追加できます。

ショップヘッダー

その下に、WooCommerceブロックを使用して商品をディスプレイできます。

最近の、おすすめ、ベストセラー、高評価、セール中の商品から選択できます。

商品を表示

商品ブロックを追加した後、その見た目をカスタマイズすることもできます。

SeedProdでは、製品数、並べ替えオプション、列などを選択できます。

商品表示オプション

より多くのテキスト、特別オファー、バナー、FAQセクションなどを追加して、このページをさらに最適化できます。

編集が完了したら、上部にある「保存して公開」をクリックすることを忘れないでください。

商品ページを保存して公開

ページを保存したら、「プレビュー」ボタンをクリックして動作を確認してください。

SeedProd はページを新しいブラウザタブで開きます。

ショップページプレビュー

これで、ナビゲーションメニューのショップページへのリンクをカスタムショップページに置き換えることができます。

WooCommerceサンキューページをカスタマイズする

WooCommerceの「ありがとう」ページは、顧客が購入を完了したときに表示されます。デフォルトでは、WooCommerceはこのページに注文の詳細のみを表示します。

WooCommerceのデフォルトのサンキューページ

これは、顧客にさらに多くの選択肢を提供するものではありません。行き止まりであり、販売とコンバージョンの機会を逃しています。

幸いなことに、SeedProdを使用してカスタムのありがとうページを作成することで、それを修正できます。

開始するには、単に SeedProd » ランディングページ に移動し、「新しいランディングページを追加」ボタンをクリックします。

新しいランディングページを追加

次に、ページ用のテンプレートを選択するように求められます。

「ありがとう」タブに切り替えると、多くのありがとうページテンプレートが見つかります。そのうちの1つを選択することも、空白のテンプレートから始めることもできます。

サンキューページテンプレート

次に、ページに付けるタイトルとURLを選択するように求められます。

「ありがとう」またはその他の意味のあるタイトルをページに使用できます。

サンキューページタイトル

続行するには、「保存してページ編集を開始」ボタンをクリックしてください。

これでSeedProdのページビルダーインターフェースが起動し、テンプレートのライブプレビューが表示されます。プレビュー内の任意の項目をクリックして編集したり、左側の列から新しいブロックを追加したりできます。

サンキューページを編集

これで、WooCommerceの商品グリッドブロックを追加して、メールリストの宣伝や商品のアップセルを行う機会を得られます。

効果的なサンキューページを作成するために、さまざまな見出し、テキストコピー、商品などを自由に試してみてください。

完了したら、画面右上にある「保存して公開」ボタンをクリックするのを忘れないでください。

商品ページを保存して公開

カスタムサンキューページは現在公開されています。ただし、このページをデフォルトのサンキューページとして使用するようにWooCommerceに指示する必要があります。

そのためには、Thanks Redirect for WooCommerceプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルをご覧ください。

有効化したら、WooCommerce » 設定 ページに移動し、 ‘商品’ タブをクリックしてください。

WooCommerceでサンキューページをリダイレクトする

ここから、「グローバルサンクスリダイレクトを有効にする」オプションを確認する必要があります。その後、「サンクスリダイレクトURL」というラベルのフィールドが表示されます。

新しいWooCommerceのありがとうページのURLをこのボックスに貼り付け、次に「変更を保存」ボタンをクリックします。

これで、顧客が購入を完了すると、最適化されたカスタムサンキューページが表示されます。デフォルトのままだった場合よりも、ストアの他の部分をクリックして検索する可能性がはるかに高くなります。

WooCommerceのカスタムサンキューページ

この記事が、コーディングなしでWooCommerceのページを簡単に編集する方法を学ぶのに役立ったことを願っています。また、当社の完全なWooCommerce SEOガイドや、コンバージョンを向上させるためのベストWooCommerceセールスファネルプラグインの専門家による選択肢もご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

10 CommentsLeave a Reply

  1. WooCommerceは私にとって個人的な悪夢であり、自分でeショップを作成する方法を知らないと思い込んで長らく避けていました。しかし、ある日どうしても必要になり、WooCommerceをインストールしました。良いチュートリアルがあれば、管理はかなり容易であることに驚きましたが、時間がかかりました。WPBeginnerとこれらのガイドのおかげで、私は今ではWooCommerceにずっと熟達しており、それは主にあなたとこれらの包括的な記事のおかげです。

  2. コーディングなしでWooCommerceのページを編集できるのは興味深いですね。これにより、プログラミング経験のない人でもオンラインストアを作成・カスタマイズできるようになります。これは、始めたばかりの小規模ビジネスや起業家にとって素晴らしい選択肢となるでしょう。

    • あなたは完全に正しいです。
      Seedprod は WooCommerce ページを作成およびカスタマイズすることを容易にし、カスタマイズするためにコーディングを学ぶ必要はありません。これはテーマに依存しないため、すべてのビジネスや個人が利用できます。

  3. オンラインストアのオーナーとして、コーディングの知識なしにWooCommerceのページを変更する必要がよくあります。WPBeginnerのWooCommerceページの編集に関するガイドは、このニーズを満たすのに非常に役立ちました。
    ElementorやBeaver Builderのようなプラグインの助けを借りて、コーディングの知識なしにカスタムWooCommerceページを簡単に作成できるようになりました。
    これにより、これらのページのコードを手動で編集するよりも、多くの時間と労力を節約できました。

    • これらのリソースが貴重であるというあなたの意見に完全に同意します!Elementorのようなドラッグアンドドロップビルダーでショップページを視覚的にカスタマイズできると、コードをいじるのに比べて時間を大幅に節約できます。

      • 私も同様の意見です。しかし、Elementorがウェブサイトを遅くし、妨げることがあるという事実に時々遭遇します。どちらのプラグインもウェブサイトのパフォーマンスに非常に要求が厳しいです。WooCommerceとElementorを組み合わせると、高速で強力なWebホスティング基盤が必要になります。これは、管理とコンテンツ作成の容易さとのトレードオフです。あなたや私のような初心者にとっては、本当に理想的な組み合わせであり、それに感謝しています。この点でeコマースサイトの開発が容易になるのであれば、品質の高いホスティングに追加料金を支払う方が良いでしょう。

  4. この記事は、コーディングを学ぶことなくオンラインストアの変更を行いたい私のような、テクノロジーに詳しくないWooCommerceユーザーにとって救世主です。多くのことがドラッグ&ドロップでできるようになったのは素晴らしいことです。

    しかし、質問があります。shop.domainとdomain/shopのどちらが良いでしょうか?
    SEOの観点から何か違いはありますか?それとも他の点でも?

    • SEO上の大きな違いはないはずです。すべてを同じサイトにしたい場合はdomain/shopが簡単ですが、ストア専用のサブサイトを作成したい場合は、通常store.domainを使用する方法です。

      管理者

  5. 共有ありがとうございます。このプラグインをインストールすると、すでにインストールされているElementorビルダーが置き換わりますか?

    • This plugin is normally an alternative to Elementor so there is a good chance that it will be a replacement plugin for you :)

      管理者

返信する

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