WooCommerceでマイアカウントページをカスタマイズする方法（プラグインおよびプログラムで）

公開: 2020-12-31

マイアカウントページを編集およびパーソナライズする簡単な方法をお探しですか？ このガイドでは、WooCommerceのマイアカウントページをプログラムとプラグインの両方でカスタマイズして、ストアを次のレベルに引き上げる方法を学びます。

マイアカウントページの設定は、どのオンラインストアにとっても重要です。 このページは通常、ほとんどの店舗の所有者には見落とされていますが、競合他社との差別化を図り、買い物客にはるかに優れたカスタマーエクスペリエンスを提供するのに役立ちます。 編集方法に飛び込む前に、WooCommerceのマイアカウントページをカスタマイズすることがなぜそれほど重要なのかを詳しく見てみましょう。

私のアカウントページとは何ですか？なぜそれをカスタマイズする必要がありますか？

WooCommerceの[マイアカウント]ページでは、ストアの所有者が顧客の個人情報、請求先、配送先住所に関する情報を保持しています。 さらに、ユーザーが注文を確認できる場所でもあります。 デフォルトのマイアカウントページは、WooCommerceショートコードを含むシンプルなWordPressページです。

 [ woocommerce_my_account ]

このデフォルトページには、ユーザーが必要とするすべての基本情報が含まれていますが、[マイアカウント]ページをカスタマイズしない限り、それを最大限に活用できます。 このページはさまざまな目的に使用できます。 顧客に注文に関する情報を提供するだけでなく、クーポンや割引コードを設定してそこに表示したり、限定アラート、割引オファー、販売アラートを提供したりすることもできます。

マイアカウントページは、顧客との追加のやり取りの機会をたくさん提供すると同時に、顧客のショッピング体験を大幅に向上させます。 たとえば、買い物客に支払いの詳細、配送先住所、追加のアカウントの詳細を保存させ、それらをチェックアウトプロセスと統合させることができます。

同様に、マイアカウントページで直接持ってきたダウンロードと仮想製品のリストを提供し、プレミアムサポートチケットを開いてマイアカウントページから直接連絡することもできます。

WooCommerceページを実行していて、それを顧客にとって可能な限り便利にしたい場合は、 WooCommerceのマイアカウントページを確実にカスタマイズする必要があります。

WooCommerceでマイアカウントページをカスタマイズする方法

マイアカウントページを編集するには、次の2つの方法があります。

  1. プラグイン付き
  2. プログラムで

このガイドでは、両方の方法について説明し、最適な方法を選択できるようにします。

1）プラグインを使用してマイアカウントページを編集する

マイアカウントページを編集するためのプラグインがいくつかあります。 あなたの生活を楽にするために、私たちは最高のツールの選択を見ていきます。 これらのプラグインには、WooCommerceのマイアカウントページをユニークで快適、そしてユーザーフレンドリーにするために必要なすべてのカスタマイズが付属しています。 コーディングスキルがない場合は、プラグインを使用するのが良い方法です。

マイアカウントページのタブを編集したり、新しいタブを作成したり、専用のカスタマイザーや多数のカスタマイズオプションを使用してルックアンドフィールをカスタマイズしたりすることもできます。 これは、WooCommerceのマイアカウントページをカスタマイズするために使用できるプラグインの個人的な推奨事項です。

1）StoreCustomizer

アカウントページをカスタマイズするwoocommerce-ストアカスタマイザー StoreCustomizerは、すべてのWooCommerceページをカスタマイズするのに役立つ無料のWordPressプラグインです。 これには、メニューへのアイテムの追加から、ショップ、製品、チェックアウトページ、さらにはマイアカウントの管理まですべてが含まれます。 名前を自由に変更したり、タブを削除したり、さまざまなオプションを使用して、マイアカウントページのスタイルを2つの異なる方法で変更したりできます。

StoreCustomizerの優れた点の1つは、テーマテンプレートを変更したり、WooCommerceフックを設定したりする必要がないことです。 プラグインは非常に軽量でユーザーフレンドリーです。 さらに、プレミアムバージョンでは、カスタムタブの追加や、ページビルダープラグインとしてGutenbergエディターを使用したタブコンテンツの編集など、マイアカウントページをカスタマイズするためのより多くのオプションにアクセスできます。

主な機能

  • テーマファイルを変更せずにWooCommerceページをカスタマイズするユーザーフレンドリーなプラグイン。
  • WordPress LiveCustomizerと完全に統合されています。
  • [マイアカウント]タブの名前の変更と削除、およびタブのスタイルの変更を許可します。
  • プレミアムバージョンでは、[マイアカウント]タブを完全にカスタマイズしたり、カスタムタブを追加したりできます。

価格

これはフリーミアムプラグインです。 基本機能を備えた無料バージョンと、年間29米ドルから始まる4つのプレミアムプランがあります。

2）ブースター

アカウントページをカスタマイズするwoocommerce-woocommerceのブースター Boosterは、コーディングを必要とせずにWooCommerceページをカスタマイズするための完全な答えです。 このプラグインには、さまざまなWooCommerceの機能やページを編集するのに役立つさまざまなモジュールが付属しています。 これには、[マイアカウント]ページも含まれます。 タブをクリックすると、指定した任意のページに移動できるように、タブの端点を簡単に変更できます。

さらに、カスタムページを追加したり、特定のページやタブをカスタマイズしたりすることもできます。 たとえば、ダッシュボードメッセージをカスタマイズしたり、顧客が[注文]タブから注文ステータスを手動で変更したりできるようにすることもできます。 マイアカウントページをカスタマイズするための完全なソリューションを探しているなら、Boosterは間違いなく素晴らしい答えです。

主な機能

  • WooCommerceのページ、機能、テンプレートをカスタマイズするためのオールインワンプラグイン。
  • マイアカウントページのタブエンドポイントのカスタマイズ。
  • ダッシュボードタブのカスタマイズのオプションを提供します。
  • [カスタム]タブを追加し、[マイアカウント]タブの名前を変更、スタイル設定、および並べ替えます。

価格

Boosterには、機能が制限された無料バージョンと、年間99.99米ドルから始まる4つのプレミアムプランがあります。

3）WooCommerceのマイアカウントをカスタマイズする

アカウントページをカスタマイズするwoocommerce-アカウントをカスタマイズする WooCommerceのマイアカウントのカスタマイズは、マイアカウントページを好きなようにカスタマイズおよびパーソナライズするためのプレミアムオプションです。 このツールを使用すると、必要な数のエンドポイントを編集および追加できます。 ライブカスタマイザーを使用して、すべてのタブの名前を変更、並べ替え、およびカスタマイズできます。 さらに、タブラベルを自由に変更したり、アイコンを追加したり、コーディングを一切必要とせずにカスタムコンテンツをタブに含めたりすることもできます。

さらに、このプラグインには、マイアカウントページをパーソナライズするためのライブカスタマイザーとともに強力な編集オプションが含まれています。 フォントのサイズと色、背景画像、色、パディング、および余白を変更できます。 独自のカスタムCSSコードを追加して、カスタマイズをまったく新しいレベルにすることもできます。

主な機能

  • 使いやすく、Liveカスタマイザーと完全に統合されています。
  • [マイアカウント]ページのすべてのタブとエンドポイントを完全にカスタマイズします。
  • タブラベルを変更したり、カスタムコンテンツ、画像、タブアイコンを追加したりするためのオプション。
  • 追加のカスタマイズのためのカスタムCSSコードをサポートします。

価格

マイアカウントをWooCommerceにカスタマイズするのは、年間49米ドルのプレミアムプラグインです。

WooCommerceStoreCustomizerを使用したマイアカウントページのカスタマイズ

それでは、StoreCustomizerを使用してWooCommerceのマイアカウントページをカスタマイズする方法を見てみましょう。 無料版では、プロプランが必要な新しいタブを追加しながら、タブ名を編集したり、タブのスタイルを変更したりできます。 別のプラグインを選択した場合でも、このセクションは、プラグインを使用してマイアカウントページをカスタマイズする方法をよりよく理解するのに役立ちます。

まず、 StoreCustomizerプラグインをインストールしましょう。 WordPress管理ダッシュボードを開き、 [プラグイン]> [新規追加]に移動します。 次に、右上の検索バーを使用してStoreCustomizerを検索します。 [インストール] 、[アクティブ化]の順にクリックします。 これで、プラグインがアクティブ化され、インストールされます。

マイアカウントページのカスタマイズを開始するには、 WooCommerce> StoreCustomizerに移動します。

アカウントページをカスタマイズするwoocommerce-storecustomizerを開く これにより、プラグインのインターフェースが開き、プラグインが提供するすべてのカスタマイズオプションが提供されます。 [マイアカウント]ページをカスタマイズするので、ページの下部にある[設定のカスタマイズ]ボタンをクリックします。

アカウントページをカスタマイズするwoocommerce-設定をカスタマイズする

StoreCustomizerの使用

これにより、 Live Customizerウィンドウが開き、メニューにStoreCustomizerタブが表示されるはずです。 それをクリックして、その下の[アカウントページ]タブに移動します。

アカウントページをカスタマイズするwoocommerce-ライブカスタマイザーストアプラグイン それでは、マイアカウントページの編集を始めましょう。 まず、タブのスタイルオプションを変更しましょう。 [アカウント]タブの[デザイン]オプションをクリックして、[水平スタイル]または[サイドタブスタイル]に変更します。

アカウントページをカスタマイズするwoocommerce-ストアカスタマイザータブオプション タブを削除するか名前を変更するかを選択することもできるので、[住所]タブの名前を[配送先住所]に変更し、[ダウンロード]タブを削除しましょう。

ストアカスタマイザーを使用してマイアカウントページタブの名前を変更する

名前を変更するには、名前を変更するタブに移動し、[タブテキストの編集]をクリックします。 次に、必要な新しいタブテキストを[タブタイトル]フィールドに入力するだけで、右側のライブカスタマイズウィンドウに表示されます。 タブをクリックしたときに表示されるページタイトルを変更することもできます。 ページタイトルの下のテキストを変更するだけで、それで十分です。

アカウントページをカスタマイズするwoocommerce-タブテキストを変更する

ストアカスタマイザーを使用したマイアカウントページタブの削除

タブを削除するには、非表示にするタブの下にある[タブの削除]ボタンをクリックするだけです。 たとえば、[ダウンロード]タブを削除する場合は、その下にある[タブの削除]オプションを選択するだけです。

アカウントページをカスタマイズするwoocommerce-タブを削除

タブの変更はいつでもリセットできることを忘れないでください。 タブの下にあるリセットアイコンをクリックすると、[マイアカウント]タブをデフォルトに戻すことができます。

アカウントページをカスタマイズするwoocommerce-タブをリセットする ここで、 WooCommerceの[マイアカウント]ページのタブを必要に応じてカスタマイズし、タブを編集することをお勧めします。 ただし、新しいタブとエンドポイントを追加する場合は、 StoreCustomizerのプレミアムバージョンを購入する必要があります。 新しいタブを追加するプロセスは同じで、カスタマイズ画面を開くだけで追加できます。

プラグインのドキュメントを参照して、プラグインとそのWooCommerceのカスタマイズの全範囲を最大限に活用することもできます。 [マイアカウント]ページのカスタマイズが完了したら、カスタマイザー画面の上部にある[公開]をクリックして変更を保存することを忘れないでください。

アカウントページをカスタマイズするwoocommerce-公開

プラグインを使用してマイアカウントページをカスタマイズするオプションは、より簡単で合理化されたものですが、ほとんどのプラグインは、幅広い機能を提供するためにかなりの金額がかかります。 したがって、マイアカウントページを最大限に活用したいが予算に余裕がある場合は、独自のソリューションをコーディングすることをお勧めします。

プログラムでWooCommerceMyAccountページをカスタマイズする方法を見てみましょう。

2）WooCommerceのマイアカウントページをプログラムでカスタマイズする

コーディングスキルがある場合は、 WooCommerceテンプレートファイルを編集するか、 WooCommerceフックを使用して、プログラムで[マイアカウント]ページをカスタマイズすることもできます。 始める前に、子テーマを作成するか、これらのプラグインのいずれかを使用して、WordPressインストールの完全バックアップを生成することを強くお勧めします。

デモンストレーションでは、WooCommerceフックを使用してプログラムでマイアカウントページをカスタマイズする方法を紹介します。 これはテンプレートファイルを編集する必要がないので、何かを壊す可能性が少なくなります。

ただし、少しコーディングしてマイアカウントページをカスタマイズするためのオプションがさらに必要な場合は、マイアカウントページをプログラムで編集する方法に関する完全なガイドを確認してください。 テンプレートをカスタマイズする方法の詳細については、このチュートリアルを参照してください。

WooCommerceフックを使用したWooCommerceのマイアカウントページのカスタマイズ

WooCommerceフックに慣れていない場合は、 WooCommerceフックのガイドを参照して、フックがどのように機能するかを理解することをお勧めします。 その後、次の手順に従って、マイアカウントページをカスタマイズして変更を加えます。

プロセスを開始するには、 WordPress管理ダッシュボードで[外観]> [テーマエディター]に移動します。 テーマエディタを開きます。

次に、右側のサイドバーの[テーマファイル]リストにあるfunctions.phpファイルに移動します。 これで、エディターを使用して、カスタム関数を子テーマの関数ファイルに追加できます。

アカウントページをカスタマイズするwoocommerce-テーマエディター機能

WooCommerceフックを使用してタブの名前を変更する

WooCommerceフックを使用してタブの名前を変更するには、 functions.phpファイルに次のスクリプトを追加します。 このスクリプトは、[アドレス]タブの名前を[アドレス]に変更しますが、スクリプトを編集して、必要な名前を使用できます。

 add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_rename_acc_adress_tab'、9999）;
function QuadLayers_rename_acc_adress_tab（$ items）{
$ items ['edit-address'] = 'あなたのアドレス';
$ itemsを返します。
}

アカウントページをカスタマイズするwoocommerce-フックを追加

次に、変更を保存し、フロントエンドをチェックして変更を確認します。

アカウントページをカスタマイズするwoocommerce-あなたのアドレス このスクリプトを編集して、タブの名前を変更することもできます。 これを行うには、 $ items配列の名前を変更するだけです。 $ items配列で使用可能なスラッグの完全なリストは、ここで確認できます。

 $ items = array（
'ダッシュボード' => __（ 'ダッシュボード'、 'woocommerce'）、
'orders' => __（ 'Orders'、 'woocommerce'）、
'ダウンロード' => __（ 'ダウンロード'、 'woocommerce'）、
'edit-address' => _n（ 'Addresses'、 'Address'、（int）wc_shipping_enabled（）、 'woocommerce'）、
'支払い方法' => __（ '支払い方法'、 'woocommerce'）、
'edit-account' => __（ 'アカウントの詳細'、 'woocommerce'）、
'customer-logout' => __（ 'Logout'、 'woocommerce'）、
）;

たとえば、 [注文]タブの名前を[注文]に変更する場合は、スクリプトの3行目を$ items ['orders'] = 'YourOrders'に変更できます。 また、新しい関数が上記の関数と同じ名前にならないように、フィルター名をQuadLayers_rename_orders_tabに変更する必要があります。 したがって、これらの変更により、新しいスクリプトは次のようになります。

 add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_rename_orders_tab'、9999）;
function QuadLayers_rename_orders_tab（$ items）{
$ items ['orders'] = 'あなたの注文';
$ itemsを返します。
}

このようにして、 functions.phpファイルを編集し、すべてのタブの名前を変更できます。 変更に満足したら、[ファイルの更新]をクリックして準備完了です。

WooCommerceフックを使用したタブの削除

タブの名前を変更する以外に、 $ items配列でunset（）関数を使用して、[マイアカウント]ページのタブを削除することもできます。 たとえば、 [アカウントの詳細]タブを削除するには、次のスクリプトを使用する必要があります。

 add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_remove_acc_tab'、999）;
function QuadLayers_remove_acc_tab（$ items）{
unset（$ items ['edit-account']）;
$ itemsを返します。
}

アカウントページをカスタマイズするwoocommerce-削除用のフックを追加する

変更を保存してから、フロントエンドを確認します。 [アカウントの詳細]タブがないことがわかります。

同じスクリプトを使用して、スクリプトを調整し、必要なタブを削除できます。 たとえば、[ダウンロード]タブを非表示にする場合は、関数名とアイテム配列を$ items ['edit-account']から$ items ['downloads']に変更する必要があります。 これで、新しいスクリプトは次のようになります。

 add_filter（ 'woocommerce_account_menu_items'、 'QuadLayers_remove_download'、9999）;
function QuadLayers_remove_downloads（$ items）{
unset（$ items ['downloads']）;
$ itemsを返します。
}

次に、[ファイルの更新]をクリックして変更を適用します。 これらは、WooCommerceの[マイアカウント]ページをカスタマイズするためにできることのほんの一部ですが、削除と名前の変更だけに限定されていません。 タブをマージしたり、カスタマイズされたタブを作成したりすることもできます。 プログラムでマイアカウントページを最大限に活用する方法を学ぶには、ステップバイステップガイドに従うことを強くお勧めします。

結論

これで、 WooCommerce MyAccountページをカスタマイズする方法に関するガイドは終わりです。 これにより、カスタマーエクスペリエンスが向上し、競合他社から際立つようになります。

マイアカウントページの編集に使用する推奨事項については、ニーズとスキルによって異なります。 コーディングスキルがない場合、またはテーマのテンプレートファイルを編集したくない場合は、プラグインが最適なオプションです。 この代替手段は、より便利で初心者に優しいものです。 さらに、カスタム関数とテンプレートを使用して、WordPressのインストールで何も壊さないようにします。

この投稿では、マイアカウントページを編集するためのベスト3プラグインのいくつかを紹介しました。 他のいくつかのオプションを確認したい場合は、この投稿をチェックしてください。 一方、コーディング方法を知っていて、完全な柔軟性が必要な場合は、プログラムで[マイアカウント]ページをカスタマイズできます。 このために、デフォルトのWooCommerceテンプレートファイルをオーバーライドするか、WooCommerceフックを使用できます。

このガイドでは、フックの使用方法を示しましたが、カスタムスクリプトを使用して[マイアカウント]ページをカスタマイズする方法について詳しく知りたい場合は、このチュートリアルを参照することを強くお勧めします。

  • WooCommerceでショップページをカスタマイズする方法
  • WooCommerceの[カートに追加]ボタンをカスタマイズします
  • WooCommerceチェックアウトを編集する方法（コーディングとプラグイン）
  • DiviでWooCommerce製品ページをカスタマイズする方法

最後に、選択した方法に関係なく、[マイアカウント]ページの設定で問題が発生した場合は、コメントでお知らせください。