WooCommerceカスタムマイアカウントページを作成する方法

公開: 2021-05-11

WooCommerceカスタムマイアカウントページ WooCommerceの「マイアカウント」ページをカスタマイズする方法をお探しですか？ アカウントページの編集は、WooCommerceストアで最も重要なページの1つです。 このページは、オンラインストア全体をスムーズに運営するために不可欠であるため、見事なデザインにする必要があります。

これは、ユーザーがアカウント管理を最大限に活用したり、売り上げを増やしたり、顧客に繰り返し購入するように促したりできるように設計する必要があります。

「マイアカウント」ページとそのサブページは、ショートコードを使用してサイトのどこにでも表示できます。 ショートコードは、WordPressの投稿、ページ、サイドバーに動的コンテンツを追加する簡単な方法です。

WooCommerceカスタムマイアカウントページ

この簡単なチュートリアルでは、カスタムPHPスクリプトを使用して、「マイアカウント」ページの外観、感触、レイアウト、コンテンツ、およびデザインをカスタマイズする方法を示します。 これは、先に進む前にコーディングの知識が必要であることを意味します。

PHPのカスタマイズに精通している場合は、WooCommerceでほとんどすべてを実現できます。 これは、カスタムタブの追加、タブの名前の変更、タブの削除、またはタブの内容のマージができることを意味します。

これをどのように達成できるかを見てみましょう。

PHPスニペットを使用してマイアカウントページを編集する手順

このセクションでは、WooCommerceフックを使用します。 これは、WordPressがサイトをカスタマイズするときに推奨するベストプラクティスの1つであるためです。

カスタムタブを追加し、タブの名前を変更し、タブを削除し、タブの内容をマージします。

[マイアカウント]ページをプログラムで編集するために従う必要のある手順は次のとおりです。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、PHPコードスニペットを追加するテーマ関数ファイルを探します。
  3. [住所]タブの名前を[配送先住所]に変更する場合は、次のコードをphpファイルに追加します。 同じコードを使用して、任意のタブの名前を変更できます。 
add_filter( 'woocommerce_account_menu_items', 'njengah_rename_address_my_account', 9999 );

function njengah_rename_address_my_account( $items ) {

   $items['edit-address'] = 'Delivery Address';

     return $items;

}
  1. これが結果です： 配送先住所
  2. [アドレス]タブを削除する場合は、次のコードをphpファイルに追加します。 
add_filter( 'woocommerce_account_menu_items', 'njengah_remove_address_my_account', 9999 );

function njengah_remove_address_my_account( $items ) {

unset( $items['edit-address'] );

return $items;

}
  1. $ items配列のタブスラッグの完全なリストを次に示します。これにより、削除するタブを選択できます。 
$items = array(

'dashboard' => __( 'Dashboard', 'woocommerce' ),

'orders' => __( 'Orders', 'woocommerce' ),

'downloads' => __( 'Downloads', 'woocommerce' ),

'edit-address'; => _n( 'Addresses', 'Address', (int) wc_shipping_enabled(), 'woocommerce' ),

'payment-methods' => __( 'Payment methods', 'woocommerce' ),

'edit-account' => __( 'Account details', 'woocommerce' ),

'customer-logout' => __( 'Logout', 'woocommerce' ),

);
  1. タブとコンテンツをマージすることも可能です。 たとえば、[アドレス]タブを削除して、そのコンテンツを[アカウント]タブに移動できます。 これは、 phpファイルに次のコードを追加することで実現できます。 
// -----------------------------

// 1. Remove the Addresses tab

add_filter( 'woocommerce_account_menu_items', 'njengah_remove_acc_tab', 999 );

function njengah_remove_acc_tab( $items ) {

unset($items['edit-address']);

return $items;

}

// -------------------------------

// 2. Insert the content of the Addresses tab into an existing tab (edit-account in this case)

add_action( 'woocommerce_account_edit-account_endpoint', 'woocommerce_account_edit_address' );
  1. これが結果です： 住所
  2. このページでカスタムタブを作成することもできます。 たとえば、ユーザーがサポートチケットを簡単に確認できる[サポート]という新しいタブを追加できます。 これを実現するには、次のコードをphpファイルに追加します。 
/**
* Add New Tab on the My Account page
*/

// ------------------

// 1. Register new endpoint (URL) for My Account page

// Note: Re-save Permalinks or it will give 404 error

function njengah_add_premium_support_endpoint() {

add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );

}

add_action( 'init', 'njengah_add_premium_support_endpoint' );

// ------------------

// 2. Add new query var

function njengah_premium_support_query_vars( $vars ) {

$vars[] = 'premium-support';

return $vars;

}

add_filter( 'query_vars', 'njengah_premium_support_query_vars', 0 );

// ------------------

// 3. Insert the new endpoint into the My Account menu

function njengah_add_premium_support_link_my_account( $items ) {

$items['premium-support'] = 'Premium Support';

return $items;

}

add_filter( 'woocommerce_account_menu_items', 'njengah_add_premium_support_link_my_account' );

// ------------------

// 4. Add content to the new tab

function njengah_premium_support_content() {

echo 'Premium WooCommerce Support. Welcome to the WooCommerce support area. As a premium customer, you can submit a ticket should you have any WooCommerce issues with your website, snippets or customization. <i>Please contact your theme/plugin developer for theme/plugin-related support.</i></p>';

echo do_shortcode( ' /* your shortcode here */ ' );

}

add_action( 'woocommerce_account_premium-support_endpoint', 'njengah_premium_support_content' );

// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format
  1. WPFormsなどのサードパーティプラグインを使用して、サポートページを作成できます。 その後、最終行にショートコードを貼り付けることができます。 これが結果です： プレミアムサポート

結論

これで、アカウントページをカスタマイズできるようになります。 このページを編集する前に、子テーマを作成することをお勧めします。 これにより、更新中に変更が失われないようになります。 このチュートリアルが最良の解決策を提供することを願っています。

同様の記事

  1. 100以上のヒント、コツ、スニペットUltimate WooCommerce Hide Guide
  2. チェックアウト後のWooCommerceリダイレクト：カスタムサンキューページにリダイレクト
  3. WooCommerceのありがとうページを変更する方法
  4. ストアフロントテーマWooCommerceでタグを非表示にする方法
  5. 特定のカテゴリの支払い方法を無効にする方法
  6. WooCommerce製品ページから数量フィールドを非表示または削除する
  7. WooCommerceマイアカウントページリダイレクトを追加する方法
  8. マイアカウントページでダッシュボードを非表示にする方法WooCommerce
  9. WooCommerceで支払い方法を取得する方法»コード例
  10. WooCommerceの設定方法BuyOne Get One
  11. WooCommerceで製品をエクスポートする方法
  12. WooCommerceで商品を複製する方法
  13. CSSで最後の子を除くすべてを選択する方法»CSSは最後の子ではない例
  14. ダウンロードメニューを削除する方法マイアカウントページWooCommerce
  15. WooCommerceの最大または最小注文数量を設定する方法
  16. チェックアウト時にWooCommerceアップロードファイルを設定する方法
  17. ショップページからカテゴリを非表示にする方法WooCommerce
  18. WooCommerceチェックアウトフィールドのプレースホルダーテキストを変更する方法
  19. マイアカウントからダウンロードを非表示にする方法WooCommerce
  20. クーポンコードプレースホルダーWooCommerceを変更する方法