Add a new front-end user center submenu and custom function page for WooCommerce

The WooCommerce Account Center page has a My Account sidebar by default, which is a menu link to all functions of the User Center. For websites that use WooCommerce to sell goods, these functions are basically enough. If you want to proceedWooCoommerce secondary development, it is obviously inappropriate to implement some custom functions in the front-end user center of WooCommerce and add them to the default function page of WooCommerce. At this time, it is a more reasonable choice for us to add a My Account submenu and a custom page to WooCommerce. Let’s take a look at how to achieve this requirement.

Step 1: Create a new endpoint for My Account Center, that is, create a new menu

First, we need to useadd_rewrite_endpoint()The function registers a new page endpoint while usingquery_varsThe filter registers a new query string.

/**
 * 注册在我的账户页面使用的新的端点
 *
 * @see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
 */
function wizhi_endpoints() {
    add_rewrite_endpoint( 'wizhi-endpoint', EP_ROOT | EP_PAGES );
}

add_action( 'init', 'wizhi_endpoints' );

/**
 * 添加新的查询字符串
 *
 * @param array $vars
 * @return array
 */
function wizhi_query_vars( $vars ) {
    $vars[] = 'wizhi-endpoint';

    return $vars;
}

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

After registering the new page endpoint, after the theme or plugin is activated, we need to useflush_rewrite_rules()Refresh the redirection rules to make the new page endpoint take effect, or innovate and save the options on the options page of Settings > Permalinks. If we use when activating a theme or pluginflush_rewrite_rules()Refresh the redirect rules and ensure that the page endpoint has been added before refreshing the redirect rule cache.

Example of usage in the plugin:

/**
 * 在插件激活时，刷新重定向规则缓存
 */
function wizhi_flush_rewrite_rules() {
    add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
    flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'wizhi_flush_rewrite_rules' );
register_deactivation_hook( __FILE__, 'wizhi_flush_rewrite_rules' );

Example of usage in theme:

/**
 * 主题激活时，刷新重定向规则缓存
 */
function my_custom_flush_rewrite_rules() {
    add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
    flush_rewrite_rules();
}

add_action( 'after_switch_theme', 'my_custom_flush_rewrite_rules' );

The second step is to add the custom menu we created to the WooCommerce User Center menu

WooCommerce provides us with the woocommerce_account_menu_items filter so that we can manage the menu of my account page.

Add new menu item to menu

The following example demonstrates how to add a new menu item before the logout menu item.

/**
 * 在我的账户菜单中添加新的菜单项目
 *
 * @param array $items
 * @return array
 */
function wizhi_my_account_menu_items( $items ) {
    // 先移除登出链接
    $logout = $items['customer-logout'];
    unset( $items['customer-logout'] );

    // 添加自定义菜单项目
    $items['my-custom-endpoint'] = __( '自定义菜单', 'woocommerce' );

    // 重新添加登出链接
    $items['customer-logout'] = $logout;

    return $items;
}

add_filter( 'woocommerce_account_menu_items', 'wizhi_my_account_menu_items' );

We can also add custom menus anywhere in the My Account page menu.

/**
 * 自定义插入项目到数据中的某个项目之后的辅助功能
 *
 * @param array $items
 * @param array $new_items
 * @param string $after
 * @return array
 */
function my_custom_insert_after_helper( $items, $new_items, $after ) {
    // 搜索指定的位置，+1 就是该位置之后位置
    $position = array_search( $after, array_keys( $items ) ) + 1;

    // 插入新项目
    $array = array_slice( $items, 0, $position, true );
    $array += $new_items;
    $array += array_slice( $items, $position, count( $items ) - $position, true );

    return $array;
}

/**
 * 插入一个新的自定义菜单到我的账户页面菜单
 *
 * @param array $items
 * @return array
 */
function wizhi_my_account_menu_items( $items ) {
    $new_items = array();
    $new_items['my-custom-endpoint'] = __( '自定义菜单', 'woocommerce' );

    // 在 `我的订单` 后面添加新的自定义菜单
    return my_custom_insert_after_helper( $items, $new_items, 'orders' );
}

add_filter( 'woocommerce_account_menu_items', 'wizhi_my_account_menu_items' );

Step 3: Manage the content displayed on the newly added menu item page

WooCommerce automatically creates a hook for each menu item to display the page content corresponding to the menu item. The name of the hook is woocommerce_account_{$endpoint}_endpoint.

Default WooCommerce My Account menu endpoint hooks

By default, the WooCommerce My Account page menu has the following hooks:

woocommerce_account_orders_endpoint
woocommerce_account_view-order_endpoint
woocommerce_account_downloads_endpoint
woocommerce_account_edit-address_endpoint
woocommerce_account_payment-methods_endpoint
woocommerce_account_add-payment-method_endpoint
woocommerce_account_edit-account_endpoint

Add page content to custom menu

/**
 * 自定义菜单页面显示的内容
 */
function wizhi_endpoint_content() {
    echo '<p>Hello World!</p>';
}

add_action( 'woocommerce_account_my-custom-endpoint_endpoint', 'wizhi_endpoint_content' );

Modify a page menu title

We may modify the title of the custom page added above through the_title filter.

/*
 * 修改自定义菜单页面标题
 *
 * @param string $title
 * @return string
 */
function wizhi_endpoint_title( $title ) {
    global $wp_query;

    $is_endpoint = isset( $wp_query->query_vars['wizhi-endpoint'] );

    if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
        // 新页面标题
        $title = __( '自定义WooCommerce我的账户菜单', 'woocommerce' );

        remove_filter( 'the_title', 'wizhi_endpoint_title' );
    }

    return $title;
}

add_filter( 'the_title', 'wizhi_endpoint_title' );

The above code is just a basic demonstration, the specific requirements need to be in WooCommerceCustom user centerWhat functions the page implements also need to be determined based on the needs of the website and project. If your website has added a WooCommerce custom user center menu page, you might as well share it here. I can use your website as an example to explain it to everyone.