11 mins read ‧ 2022/08/01 普

客製化WooCommerce會員頁面 #1

閱讀本篇需要的必要知識

1. php 基礎
2. WordPress Hooks 的使用方式

預設的 WooCommerce My Account 會員頁面

預設的 Woocommer My Account 會員頁有控制台、訂單、下載次數、地址、付款方式( 這個應該沒有 🧐 )、帳戶詳細資料、登出

網址通常是 {你的網址}/my-account

WooCommerce My Account 客製化步驟

移除 My Account 選單 & 修改選單文字

add_filter( 'woocommerce_account_menu_items', 'remove_my_account_links' );

function remove_my_account_links( $menu_links ){

// 你也可以用 var_dump( $menu_links ); 來看 $menu_links 到底是什麼東西
// $menu_links 是一個 Array ，可以透過 unset 來移除內容

// 如果你想移除地址，就像這樣子打
unset( $menu_links[ 'edit-address' ] ); // 移除地址
//unset( $menu_links[ 'dashboard' ] ); // 移除控制台
//unset( $menu_links[ 'payment-methods' ] ); // 移除付款方式
//unset( $menu_links[ 'orders' ] ); // 移除訂單
//unset( $menu_links[ 'downloads' ] ); // 移除下載次數
//unset( $menu_links[ 'edit-address' ] ); // 移除地址
//unset( $menu_links[ 'edit-account' ] ); // 移除帳戶詳細資料
//unset( $menu_links[ 'customer-logout' ] ); // 移除登出

// 下面代碼會把 "帳戶詳細資料" 的文字改成 "修改會員資料"
$menu_links['edit-account'] = '修改會員資料';

//最後再返回 $menu_links，⭐記住 filter 一定會有返回值
return $menu_links;
}

有些人要用 CSS 的 display: none 藏，我也沒意見，差異在於，CSS 只是隱藏外觀而已，如果用戶直接打網址，還是能造訪頁面

用 php 方式移除的話，就算用戶輸入連結也無法造訪

新增 My Account 選單 & 內容

// 你會發現，又是同一隻 filter
add_filter ( 'woocommerce_account_menu_items', 'add_my_account_links', 40 );

function add_my_account_links( $menu_links ){
    // 這邊你可以自由去修改 Array ， Array 的 key 是代表 Endpoint 端點，而 value 是選單的名稱

    // 下面這些意思就是新增一個端點為 test 的分頁，並且叫做 "測試頁面"
    // 做法1 簡單粗暴的作法
    $menu_links['test'] = '測試頁面';

    // 做法2 新增 & 調整順序的作法
    $menu_links = array_slice( $menu_links, 0, 5, true )
                + array(
                'test' => '測試頁面'
                )
                + array_slice( $menu_links, 5, NULL, true );

    return $menu_links;
}

// 註冊端點的永久連結，ℹ️有時候註冊完新的端點，你需要去 "永久連結" 那邊刷新一樣設定(換去預設，再換回來)才會有作用
add_action( 'init', 'add_endpoint' );

function add_endpoint() {
    add_rewrite_endpoint( 'test', EP_PAGES );
}

// 測試頁面的內容，使用 woocommerce_account_{ENDPOINT NAME}_endpoint 這支 action
add_action( 'woocommerce_account_test_endpoint', 'my_account_test_endpoint_content' );

function my_account_test_endpoint_content() {
    // 輸出你想輸出的 php / HTML
    echo "這是測試頁面啦！";

    // 我的話會使用 wc_get_template 這隻函式，把版型統一放在標準的覆寫位置上 ( 例如：/wp-content/themes/{子主題}/woocommerce/myaccount/ 底下 ) ，方便管理
}

客製化WooCommerce會員頁面 #2 使用 Hooks 新增欄位 (準備中)

客製化WooCommerce會員頁面 #3 使用版型覆寫新增欄位 (準備中)