WooCommerceのマイアカウントをカスタマイズする方法（メニューの削除・変更・追加）

WooCommerceのマイアカウント画面は、デフォルトの状態だと次のように表示されます。

デフォルトのマイアカウントのメニュー項目

▲ダウンロード商品の販売に特化したWordPressテーマ「common」のマイアカウントの例

ただ、commonのようなダウンロード商品の販売サイトであれば問題ないものの、物販サイトであれば、「ダウンロード」というメニュー項目は不自然ですよね。

物販サイトの場合、クリックしても「まだ利用できるダウンロードファイルはありません。」と無駄に表示されるだけなんです。

そこで今回は、メニュー項目の削除、名称変更、追加するために、WooCommerceのマイアカウントのカスタマイズ方法をご紹介いたします。

メニュー項目の削除
メニュー項目名の変更
メニュー項目の追加
まとめ

メニュー項目の削除

まずは、多くの一般的なECサイトですぐ使える「不要なメニュー項目を削除する方法」についてです。今回は、「ダウンロード」というメニュー項目を削除する例で解説いたします。

高度な設定

ダッシュボードの「WooCommerce」>「設定」を開き、「高度な設定」タブより「アカウントのエンドポイント」の項目欄を確認します。スクロールすると下部にあります。

エンドポイント

その中から、「ダウンロード」と書いてある項目の入力欄に記載されている「downloads」というエンドポイントを削除するだけです。これでフロント画面から「ダウンロード」のメニュー項目が削除されていることを確認できます。

メニュー項目名の変更

メニュー項目名の変更は、こちらでご紹介しているコードをコピペして、テキスト部分を適宜変更することで実現できます。

テーマファイルを編集するので、必ずバックアップを取った上で操作してください。

手順は以下の通りです。

当記事で紹介しているコードをコピペ
任意の文言に変更
functions.phpへ貼り付け

まずは、以下のコードをコピペしてください。

function my_woocommerce_account_menu_items( $items ) {
if ( 'ja' === strtolower( get_locale() ) ) {
$items['dashboard'] = 'トップ';
$items['edit-account'] = 'アカウント';
}
return $items;
}
add_filter( 'woocommerce_account_menu_items', 'my_woocommerce_account_menu_items' );

上記は、

ダッシュボード→トップ
アカウント詳細→アカウント

と変更する場合の例ですので、適宜コードを編集します。

その他のメニュー項目名を変更する場合の記述は、以下の通りです。各種コピペしてお使いください。

$items['dashboard'] = 'ダッシュボード';
$items['orders'] = 'ご注文';
$items['downloads'] = 'ダウンロード';
$items['edit-address'] = '住所';
$items['edit-account'] = 'アカウント詳細';
$items['customer-logout'] = 'ログアウト';

あとは、functions.php内の最下部にでも貼り付ければOKです。必ずバックアップを取ってから作業してください。子テーマを作って編集するのもありですが、このようなプラグインを使えば、テーマファイルを直接編集する必要はありません。

2019.08.31

2020.02.28

「functions.php」ファイルの直接編集が不要になるプラグイン「Code Snippets」

2020/02/28 情報を更新いたしました。 WordPressの「functions.php」ファイルは記述を間違えるとエラーが出てしまったりして、初心者にとってあまり触りたくないファイルですよね。また、テーマの色々な独自の機能を追加していると、テーマのアップデート時にうっかり消えてしまう...

メニュー項目の追加

最後に、任意のメニュー項目を追加する方法をご紹介いたします。マイアカウント内にメニュー項目を追加するには、次の作業が必要です。

エンドポイントの追加
メニュー項目の追加
メニューの内容を編集

まずは、下記コードをfunctions.phpに追加します。「エンドポイント」をオリジナルで追加するためのコードです。「original_menu」といいう部分は、適宜変更してください。他の記述でも同じものを使います。

add_action( 'init', 'original_menu_add_endpoint' );
function original_menu_add_endpoint() {
add_rewrite_endpoint( 'original_menu', EP_PAGES );
}

追加後は必ずパーマリンク設定で「変更を保存」を押してください。メニュー項目を追加しても404エラーになります。

続いて、フロント画面にメニュー項目を追加する以下のコードを追記します。

add_filter( 'woocommerce_account_menu_items', 'original_menu_add_menu_item' );
function original_menu_add_menu_item( $items ) {
$items['original_menu'] = '追加するメニュー名';
return $items;
}

最後に、追加した「エンドポイント」と「メニュー項目」を紐付け、メニューの内容を編集します。

add_action( 'woocommerce_account_original_menu_endpoint', 'original_menu_add_menu' );
function original_menu_add_menu() {
echo '<p>これが独自に追加したページの内容になります。</p>';
}

ここまでの記述を追加すると、オリジナルのメニュー項目が追加されているはずです。フロント画面を確認してみましょう。

追加されたオリジナルメニュー