WordPressソーシャルログインをWooCommerceに追加する方法

公開: 2022-04-18

ソーシャルメディアのフォロワーがWooCommerceサイトに簡単にログインできるようにする方法をお探しですか？ WordPressソーシャルログインをWebサイトに追加することを検討してください。

WooCommerceにソーシャルログインを追加することにより、サイト訪問者にソーシャルメディアアカウントのクレデンシャルを使用してログインするための迅速な方法を提供します。

ただし、唯一の問題は、WooCommerceがデフォルトでeコマースサイトのソーシャルログインオプションを提供していないことです。サイト訪問者に簡単なログインおよび登録フォームを提供するだけで、新しい資格情報を使用して新しいアカウントを作成する必要があります。

幸いなことに、ProfilePressなどのプラグインを使用して、WooCommerceサイトにカスタムのログインおよび登録フォームを作成できます。

この記事では、ソーシャルボタンをWooCommerceログインフォームに追加し、デフォルトのWooCommerceボタンをカスタムProfilePressのものに置き換える方法を紹介します。

WooCommerceにソーシャルログインを追加する必要があるのはなぜですか？

オンラインストアの所有者は、WooCommerceがデフォルトで、サイト訪問者がWebサイトにログインするための限られたオプションを提供していることをすでにご存知でしょう。

すべてのサイト訪問者は、コンテンツにアクセスする前に、最初に一意のユーザー名と電子メールアドレスを使用してWebサイトに登録する必要があります。デフォルトのログインフォームは、基本的に見えるだけでなく、ユーザーがWooCommerceサイトにすばやく登録してログインするための限られたオプションも提供します。

デフォルトのWooCommerceフォームは、ユーザーがソーシャルメディアアカウントを使用してWebサイトにログインできるようには設計されていません。多くの人がFacebook、Twitter、Googleなどのプラットフォームでソーシャルメディアアカウントを持っているため、これらのアカウントの詳細を使用してストアにログインするのが簡単になります。

WooCommerceサイトにソーシャルログインを追加することが役立つ理由は次のとおりです。

すべてのタイプのユーザーがサイトに登録してログインできるようにします。 ほとんどの人はすでにソーシャルメディアアカウントを利用できるようになっているので、WooCommerceサイトをはるかにアクセスしやすくし、あらゆるタイプのユーザーを歓迎することができます。すでにFacebookアカウントを登録しているユーザーは、数回クリックするだけで簡単にWebサイトに登録してログインできます。

フレンドリーなユーザーエクスペリエンスを提供します。 WooCommerceサイトでフレンドリーなユーザーエクスペリエンスを提供することで、人々はより多くの購入を行い、顧客維持を向上させることができます。考えてみてください。顧客がWooCommerceサイトにログインして注文するのが簡単な場合、同じ顧客が次回オンラインショップに戻る可能性が高くなります。

より多くの人に登録を促します。 ワンクリックで簡単にサインアップしてログインできるようにすることで、より多くの人がWooCommerceサイトに登録するように促します。これは、Eメールリストを作成し、Eメールマーケティングキャンペーンを強化するための優れた方法です。

フォローしているソーシャルメディアをサイトの登録ユーザーに変換します。 あなたのビジネスがソーシャルメディアプラットフォームで大きな支持を持っているなら、あなたのWooCommerceサイトにすべての注意をそらすことは素晴らしい考えかもしれません。これを行うには、WooCommerceサイトにソーシャルログインボタンを提供して、視聴者がWooCommerceサイトに簡単にアクセスできるようにします。

デフォルトのWooCommerceにソーシャルログインを追加する最も簡単な方法

WooCommerceサイトにソーシャルログインボタンを追加するために使用できるプラグインはたくさんありますが、目立つのはProfilePressだけです。

ProfilePressは、強力なフォームビルダーと高度なカスタマイズが組み込まれたプロフェッショナルなユーザープロファイルおよびメンバーシッププラグインです。

コードを1行も記述しなくても、デフォルトのWooCommerceログインページと登録ページ用に魅力的なカスタムフォームを作成できます。これに加えて、メンバーディレクトリを作成し、WooCommerceサイトのフロントエンドに登録されているすべてのメンバーを紹介することもできます。 ProfilePressの最も優れている点は、事前に設計されたテンプレートを使用してカスタムフォームをすばやく作成し、必要に応じてそれらをパーソナライズできることです。

ProfilePressプラグインを使用すると、ソーシャルログインボタンをカスタムProfilePressログインフォームに追加し、「マイアカウント」ページのデフォルトのWooCommerce登録およびログインフォームに置き換えることができます。

ProfilePressを使用してWooCommerceにソーシャルログインを追加する

ここでは、ProfilePressを使用してWooCommerceにソーシャルログインを追加するのがいかに簡単かを示します。

このチュートリアルでは、WordPressサイトにWooCommerceプラグインをインストールする必要があります。また、WooCommerceサイトにソーシャルログインボタンを備えたカスタムログインフォームを追加するには、ProfilePressプラグインが必要です。

ステップ1：ProfilePressをインストールしてアクティブ化する

開始するには、ProfilePressプラグインを入手して、WordPressサイトにインストールします。

WordPress管理パネルから[プラグイン]→ [新規追加]に移動し、[新規追加]ボタンをクリックします。次に、zipファイルをアップロードし、WooCommerceサイトにプラグインをインストールします。

ステップ2：カスタムログインフォームを作成する

ProfilePressプラグインの準備ができたら、ソーシャルメディアボタンが追加されたカスタムログインフォームの作成を開始できます。 ProfilePress→アドオン画面に移動して、最初にソーシャルログインアドオンを有効にしてください。

それが完了したら、 ProfilePress→Forms＆Profilesに移動し、 AddNewボタンをクリックします。

ドラッグアンドドロップビルダーを選択し、カスタムログインフォームに新しいタイトルを付けます。次に、テンプレートを選択して、ログインフォームの編集を開始します。デモンストレーション用にBashテンプレートを選択しました。

[テンプレートの選択]ボタンをクリックすると、フォーム編集ページに自動的にリダイレクトされます。このページでは、ソーシャルメディアのログインボタンだけでなく、フィールドを追加することもできます。

ステップ3：ソーシャルログインボタンを追加する

複数のソーシャルログインボタンを追加したり、このページからログインフォームに追加のフィールドをドラッグアンドドロップで追加または削除したりできます。

各フィールドを編集して、WooCommerceサイトのフロントエンドに表示されるフィールドテキストをカスタマイズすることもできます。

フィールドにマウスを合わせて設定アイコンをクリックし、完了したら[変更を適用]ボタンをクリックするだけです。フィールドのカスタマイズが完了したら、 [フォームの設定]メタボックスを使用して、ソーシャルメディアのログインボタンをログインフォームに追加できます。

[外観]タブを使用して、[ソーシャルログインボタン]テキストフィールドを使用してソーシャルメディアアカウントを追加します。カスタムログインフォームの送信ボタンとテキストフィールドプレースホルダーのボタンテキストをカスタマイズすることもできます。

完了したら、必ず[変更の適用]ボタンをクリックして続行してください。

ステップ4：デフォルトのWooCommerceログインフォームを置き換える

カスタムログインフォームのショートコードをコピーし、[ページ]→[新規追加]に移動して、WooCommerceサイトに新しいソーシャルログインページを作成します。

Shortcodeブロックを使用してログインフォームのshortcodeを貼り付け、[公開]ボタンをクリックして続行します。あとは、設定で実際のソーシャルログインを構成し、デフォルトのWooCommerceログインフォームを先ほど作成したものに置き換えるだけです。

作成したページをサイトでデフォルトのWordPressログインページとしてグローバルに設定するには、[ ProfilePress]→[設定]に移動し、[グローバル設定]タブの[ログインページ]ドロップダウンを使用して、新しく作成したログインページを選択します。

実際のソーシャルログインプロセスを設定するには、[ ProfilePress]→[設定]に移動し、[ソーシャルログイン]タブをクリックしてソーシャルログイン設定を設定します。

ここでは、さまざまなソーシャルアプリがProfilePressソーシャルログインフォームとシームレスに統合されるように、すべてのソーシャルメディアアカウントのセットアップAPIキーを入力できます。ソーシャルメディアプラットフォームのAPIキーを入力したら、[変更を保存]ボタンをクリックします。

これに加えて、[ボタン]タブに移動して、ソーシャルログインボタンのボタンテキストを変更することもできます。

完了したら、必ず[変更を保存]ボタンをクリックしてください。

WooCommerceMyAccountページに表示されるデフォルトの登録フォームとログインフォームを置き換えるには; [ WooCommerce ]タブをクリックし、[マイアカウントログインフォーム]および[マイアカウント登録フォーム]ドロップダウンフィールドを使用して、新しく作成したソーシャルログインページを選択します。

選択したフォームのテーマに応じて、WooCommerceのマイアカウントページでどのように表示されるかを次に示します。

チェックアウト時のデフォルトのWooCommerceログインフォームをソーシャルログイン付きのProfilePressログインフォームに置き換えることもできます。これを行うには、[チェックアウトログインフォーム]ドロップダウンメニューを使用して以前に作成したソーシャルログインを含むログインフォームを含むログインページを選択するだけです。

[変更を保存]ボタンをクリックして続行します。

ソーシャルログインボタンをクリックすると、ユーザーはログイン認証ページにリダイレクトされます。

顧客は、ソーシャルメディアアカウントを使用してWooCommerceチェックアウトページからログインすることもできます。

結論

WooCommerceサイトにソーシャルログインボタンを追加することは、より多くの登録を促進し、サイトのユーザーエクスペリエンスを向上させるための優れた方法です。これは、ソーシャルメディアアカウントですでに多くのフォロワーを獲得している企業にとって特に便利です。

ただし、サイトでソーシャルログインを提供する場合は、デフォルトのWooCommerce機能によって制限されます。これが、WooCommerceサイトのデフォルトの一般的な外観のログインフォームを置き換えるために、ProfilePressなどの専用のカスタムフォームビルダープラグインを使用することをお勧めする理由です。

WooCommerceサイトにソーシャルログインを追加する簡単な方法をお探しですか？今すぐProfilePressを入手してください！