返回博客

如何为 WooCommerce 我的账户页面添加/删除/更新选项卡

2022-02-053 分钟阅读

WooCommerce 插件提供了短代码 [woocommerce_my_account],可以嵌入到任何页面中,向登录的客户显示与他们过去订单、地址、支付详情等相关的所有信息,具体取决于您网站上安装的插件。该短代码会输出按选项卡和每个选项卡中的独特内容组织的数据,如下面的图片所示:

默认我的账户页面

如何删除、修改或添加新选项卡?

是的,一种方法是使用现有插件,另一种方法是编写几行 PHP 代码。我将在下面提供一些 PHP 代码片段,您可以将它们添加到您的 functions.php 文件中进行任何必要的自定义。我们正在使用以下 WordPress 过滤器钩子 woocommerce_account_menu_itemswoocommerce_get_endpoint_url


删除选项卡

/**
 * 从我的账户页面删除预购链接。
 * @param $menu_links
 * @return array|string[]
 */
function my_site_remove_my_account_links( $menu_links ) {
    // 从我的账户页面删除预购选项卡。
    // 此选项卡由插件 https://woocommerce.com/products/woocommerce-pre-orders/ 创建
    unset( $menu_links['pre-orders'] );
    // 您可以在下方找到默认选项卡。
    //unset( $menu_links['dashboard'] ); // 删除仪表盘选项卡。
    //unset( $menu_links['orders'] ); // 删除订单选项卡。
    //unset( $menu_links['edit-address'] ); // 地址选项卡。
    //unset( $menu_links['payment-methods'] ); // 删除支付方式选项卡。
    //unset( $menu_links['edit-account'] ); // 删除账户详情选项卡。
    //unset( $menu_links['customer-logout'] ); // 删除登出链接选项卡。
    return $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_remove_my_account_links' );

更新选项卡标题

/**
 * 更新我的账户页面选项卡的标题。
 * @param $menu_links
 * @return array|string[]
 */
function my_site_update_my_account_links( $menu_links ) {
    // 更新订单选项卡的文本。
    $menu_links['orders'] = __('我的历史订单');
    // 您可以在下方找到默认选项卡。
    // $menu_links['dashboard'] = __('您的自定义仪表盘文本'); // 更新仪表盘选项卡标题。
    // $menu_links['edit-address'] = __('您的自定义地址文本'); // 更新地址选项卡标题。
    // $menu_links['payment-methods'] =__('您的自定义支付方式文本'); // 更新地址选项卡标题。
    // $menu_links['edit-account'] = __('您的自定义账户文本'); // 更新地址选项卡标题。
    // $menu_links['customer-logout'] = __('您的自定义登出文本'); // 更新登出选项卡标题。
    return $menu_links;
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_update_my_account_links' );

/**
 * 向我的账户页面添加新的自定义链接。
 * @param $menu_links
 * @return array|string[]
 */
function my_site_add_my_account_links( $menu_links ) {
    // 如果您想仅向特定角色显示新选项卡,请取消注释这些行。
    // 获取当前用户。
    // $user = wp_get_current_user();
    // if ( !in_array( 'MY_ROLE', (array) $user->roles ) ) {
    //  return $menu_links;
    // }
    // customendpoint 将通过 woocommerce_get_endpoint_url 过滤器进行挂钩。
    $new = [ 'customendpoint' => __('我的新选项卡') ];
    return array_slice( $menu_links, 0, 1, true )
            + $new
            + array_slice( $menu_links, 1, NULL, true );
}
add_filter ( 'woocommerce_account_menu_items', 'my_site_add_my_account_links' );
/**
 * 设置在 woocommerce_account_menu_items 中创建的 endpoint customendpoint 的 URL
 * @param $url
 * @param $endpoint
 * @param $value
 * @param $permalink
 * @return mixed|string
 */
function my_site_custom_endpoint( $url, $endpoint, $value, $permalink ) {
    if ( $endpoint === 'customendpoint' ) {
        $url = '/internal-url/';
        // 您也可以使用外部 URL。
        // $url = 'https://davidloor.com';
    }
    return $url;
}
add_filter( 'woocommerce_get_endpoint_url', 'my_site_custom_endpoint', 10, 4 );

有关 WooCommerce 我的账户页面的完整说明,您可以访问:
https://woocommerce.com/document/the-my-account-page/