[Thủ Thuật WP] Thêm Tab trên trang Tài Khoản WooCommerce

Một trong những yêu cầu phổ biến khi custom lại trang tài khoản WooCommerce trong WordPress là " làm thế nào để thêm một “tab” bổ sung vào trang Tài khoản WooCommerce " của tôi và làm thế nào để thêm nội dung riêng bên trong nó?

Thêm Tab trên trang Tài Khoản WooCommerce

Đây là đoạn snippet tôi đã sử dụng để làm được điều đó

// ------------------
// 1. Register new endpoint (URL) for My Account page
// Note: Re-save Permalinks or it will give 404 error
  
function devwk_add_premium_support_endpoint() {
    add_rewrite_endpoint( 'premium-support', EP_ROOT | EP_PAGES );
}
  
add_action( 'init', 'devwk_add_premium_support_endpoint' );
  
// ------------------
// 2. Add new query var
  
function devwk_premium_support_query_vars( $vars ) {
    $vars[] = 'premium-support';
    return $vars;
}
  
add_filter( 'query_vars', 'devwk_premium_support_query_vars', 0 );
  
// ------------------
// 3. Insert the new endpoint into the My Account menu
  
function devwk_add_premium_support_link_my_account( $items ) {
    $items['premium-support'] = 'Hỗ trợ khách hàng';
    return $items;
}
  
add_filter( 'woocommerce_account_menu_items', 'devwk_add_premium_support_link_my_account' );
  
// ------------------
// 4. Add content to the new tab
  
function devwk_premium_support_content() {
   echo '<h3>Hỗ trợ WooCommerce</h3><p>Xin chào đây là trang hỗ trợ của tài khoản bạn.</i></p>';
   echo do_shortcode( ' /* Đặt Shortcode tại đây */ ' );
}
  
add_action( 'woocommerce_account_premium-support_endpoint', 'devwk_premium_support_content' );
// Note: add_action must follow 'woocommerce_account_{your-endpoint-slug}_endpoint' format

Giải thích 

Bước 1: Đăng ký một endpoint (url) 

Bước 2: Thêm vào biến truy vấn trước khi quá trình xử lý

Bước 3: Thêm endpoint vào trang Account

Bước 4: Thêm nội dung vào tab mới tạo