Hướng dẫn cách thêm menu tài khoản khách hàng trong Woocommerce

Bạn đang gặp khó khăn trong quá trình tùy chỉnh cũng như chỉnh sửa các đoạn code liên quan đến tài khoản khách hàng trong plugin woocommerce. Sau khi xem hướng dẫn bài viết này bạn sẽ không còn lo lắng nữa.

1. Thêm menu vào tài khoản khách hàng

Thêm đoạn code bên dưới vào file functions.php trong theme bạn đang dùng.

/**
 * Bước 1: Khai báo slug cho menu, ví dụ: https://domain.com/tai-khoan/wpshare247-url-mac-dinh
 */
$wpshare247_product_bought_endpoint = get_option('wpshare247_product_bought_endpoint') ? get_option('wpshare247_product_bought_endpoint') : 'wpshare247-url-mac-dinh'; // Đặt key cho field

/**
 * Bước 2: Thêm mới menu vào menu tài khoản khách hàng. 
 */
add_filter ( 'woocommerce_account_menu_items', 'wpshare247_add_more_links_account' );
function wpshare247_add_more_links_account( $menu_links ){
    global $wpshare247_product_bought_endpoint;
    
    $new_items = array( 
                        // 	'slug' => 'Text link',
                            $wpshare247_product_bought_endpoint => __('Sản phẩm đã mua', 'woocommerce'),
                         );
    
    //Nếu bạn muốn thêm trên cùng menu thì mở dòng bên dưới
    /*
        $menu_links = $new_items + $menu_links;
    */
    
    //Nếu bạn muốn thêm dưới cùng menu thì mở dòng bên dưới
    /*
        $menu_links = $menu_links + $new_items;
    */
    
    //Thêm ở đoạn giữa menu
    $count = count($menu_links);
    $menu_links = 	array_slice( $menu_links, 0, $count - 1  , true ) // spit 1
                    + $new_items 
                    + array_slice( $menu_links, $count - 1, NULL, true ); // split 2
    
    //----------------------
    return $menu_links;
}

Sau khi thêm đoạn code trên bạn sẽ thấy trong trang quản lí tài khoản khách hàng sẽ xuất hiện menu vừa thêm

Tuy nhiên, khi thực hiện đến đây, đường dẫn của bạn chưa hoạt động, bạn hãy tiếp tục làm theo các bước bên dưới nhé.

2. Khai báo slug

Ta cần khai báo slug của menu vừa tạo ở trên như sau:

/**
 * Bước 3: Thêm mới menu vào menu tài khoản khách hàng. 
 */
add_action( 'init', 'wpshare247_add_endpoint' );
function wpshare247_add_endpoint() { 
    global $wpshare247_product_bought_endpoint;
    add_rewrite_endpoint( $wpshare247_product_bought_endpoint, EP_PAGES ); // ko được thay đổi EP_PAGES
}

/**
 * Bước 4: Trang quản lí nội dung Menu
 */
if($wpshare247_product_bought_endpoint){
    add_action( 'woocommerce_account_'.$wpshare247_product_bought_endpoint.'_endpoint', 'wpshare247_my_account_endpoint_content_product_bought' );
    function wpshare247_my_account_endpoint_content_product_bought() {
        echo '<p>Quản lý danh sách sản phẩm mua gần đây</p>';
        
        $perpage = get_option('wpshare247_product_bought_perpage');
        if(!$perpage) $perpage = '[Chưa thêm field này trong cấu hình]';
        echo 'Hiển thị '.$perpage . ' sản phẩm trên 1 trang';
    }
}

/**
* Bước 5 -end: Đừng quên vào Settings > Permalinks and just push "Save Changes" button.
*/

3. Lưu lại đường dẫn tĩnh

Sau khi khai báo các đoạn code trên, bạn đừng quên lưu lại đường dẫn tĩnh nhé.

Kết quả hiển thị nội dung trang đường dẫn menu mới như sau:

4. Quản lí đường dẫn trong admin Woocommerce

Để tạo trang quản lí các cấu hình menu ta thêm đoạn code bên dưới

/**
 * Bước 6 : Tạo tab quản lí menu
 */
add_filter( 'woocommerce_get_sections_advanced' , 'wpshare247_regitser_product_bought_add_settings_tab' );
function wpshare247_regitser_product_bought_add_settings_tab( $settings_tab ){
     $settings_tab['wpshare247_regitser_product_bought_999'] = __( 'Sản phẩm đã mua' );
     return $settings_tab;
}

/**
 * Bước 7 : Thêm field quản lý cho tab
 */
add_filter( 'woocommerce_get_settings_advanced' , 'wpshare247_add_rewrite_endpoint_product_bought' , 10, 2 );
function wpshare247_add_rewrite_endpoint_product_bought( $settings, $current_section ) {
        $custom_settings = array();
        if( 'wpshare247_regitser_product_bought_999' == $current_section ) {
            global $wpshare247_product_bought_endpoint;
            
        	$custom_settings =  array(
                                        array(
                                            'name' => __( 'Cấu hình tab sản phẩm đã mua của khách hàng' ),
                                            'type' => 'title',
                                            'desc' => __( 'Đây là những cấu hình cho menu sản phẩm đã mua của khách hàng' ),
                                            'id'   => 'wpshare247_regitser_product_bought_999' 
                                        ),
                                        
                                        //Thêm 1 field mới
                                        array(
                                            'name' => __( 'Đường dẫn sản phẩm đã mua' ),
                                            'type' => 'text',
                                            'default' => $wpshare247_product_bought_endpoint,
                                            'desc' => __( 'Cấu hình đường dẫn sản phẩm đã mua, vd: sp-da-mua'),
                                            'desc_tip' => true,
                                            'id'	=> 'wpshare247_product_bought_endpoint'
                                        ),
                                        
                                        array(
                                            'name' => __( 'Số sản phẩm phân trang' ),
                                            'type' => 'text',
                                            'default' => '9',
                                            'desc' => __( 'Cấu hình phân trang, vd: 9'),
                                            'desc_tip' => true,
                                            'id'	=> 'wpshare247_product_bought_perpage'
                                        ),
                                        
                                        // Có thể thêm các field khác bên dưới
                                    
                                        array( 'type' => 'sectionend', 'id' => 'wpshare247_regitser_product_bought_999' ),
                                );
        return $custom_settings;
     } else {
        	return $settings;
    }
}

Ngoài field kiểu text, còn một số loại field khác bạn có thể tham khảo như: select, color…

array(
                'name' => __( 'Kiểu field select' ),
                'type' => 'select',
                'desc' => __( 'Đây là kiểu select'),
                'desc_tip' => true,
                'id'	=> 'position',
                'options' => array(
                          'top' => __( 'Top' ),
                          'bottom' => __('Bottom')
                )
            ),
            
            array(
                'name' => __( 'Kiểu chọn màu' ),
                'type' => 'color',
                'desc' => __( 'Field chọn màu'),
                'desc_tip' => true,
                'id'	=> 'color',
            ),

5. Xóa menu tài khoản

Để xóa một hoặc nhiều menu mặc định trong tài khoản bạn có thể làm như sau:

add_filter ( 'woocommerce_account_menu_items', 'wpshare247_remove_links_account' );
function wpshare247_remove_links_account( $menu_links ){
 
    unset( $menu_links['edit-address'] ); // Xóa menu địa chỉ
 
 
    //unset( $menu_links['dashboard'] ); // Xóa menu Dashboard
    //unset( $menu_links['payment-methods'] ); // Xóa menu phương thức thanh toán
    //unset( $menu_links['orders'] ); // Xóa menu quản lí hóa đơn
    //unset( $menu_links['downloads'] ); // Xóa menu quản lí tải về
    //unset( $menu_links['edit-account'] ); // Xóa menu quản lí tài khoản
    //unset( $menu_links['customer-logout'] ); // Xóa menu thoát
 
    return $menu_links;
 
}

Đoạn code trên sẽ giúp chúng ta xóa được các menu tài khoản khách hàng dễ dàng. Tuy nhiên còn cách khác đơn giản hơn là chúng ta sẽ xóa chúng trong quản trị, để làm điều này bạn cần vào tab nâng cao và xóa đi dữ liệu, trong ví dụ này tôi sẽ xóa đi menu “Đơn hàng” như sau:

6. Sửa tên menu tài khoản khách hàng

Việc đổi tên các menu không quá khó, bạn chỉ cần dùng đoạn code bên dưới chúng ta có thể làm điều đó dễ dàng.

add_filter ( 'woocommerce_account_menu_items', 'wpshare247_rename_downloads' );
function wpshare247_rename_downloads( $menu_links ){
        
    // $menu_links['TAB ID'] = 'Tên mới';
    $menu_links['downloads'] = 'File của tôi';
        
       // Bạn có thể dùng lệnh var_dump($menu_links) để lấy ID của từng menu
 
    return $menu_links;
}

Như vậy qua bài viết này, hi vọng trong quá trình thiết kế web wordpress cho khách hàng với plugin Woocommerce sẽ giúp bạn dễ dàng tùy biến nội dung tài khoản khách hàng theo đúng yêu cầu nhất.