WordPress/WooCommerce：如何在自定义位置显示my-account页面各分区内容

WooCommerce 我的账户页面的子分区没有独立post ID是正常情况，这些子分区都是基于原生端点实现的，你可以直接通过模板调用函数输出对应分区内容，无需依赖URL抓取或者post ID调取，具体实现方案如下：

核心内容调取方法 #

每个分区对应WooCommerce原生模板调用函数，直接输出即可自动匹配当前登录用户的专属内容：

• 我的订单：调用wc_get_template( 'myaccount/orders.php' )
• 我的收货地址：调用wc_get_template( 'myaccount/form-edit-address.php', array( 'load_address' => 'shipping' ) )
• 我的账户详情：调用wc_get_template( 'myaccount/form-edit-account.php' )
• 退出登录：直接生成原生退出链接wp_logout_url( 自定义跳转页地址 )即可

完整实现示例 #

1. 手风琴弹窗HTML结构（可嵌入自定义页面/弹窗模块中） #

<div class="my-account-accordion-modal">
  <!-- 我的订单模块 -->
  <div class="accordion-item">
    <div class="accordion-header">我的订单 <span class="toggle-icon">+</span></div>
    <div class="accordion-content" style="display:none;">
      <?php 
      if ( is_user_logged_in() ) {
        wc_get_template( 'myaccount/orders.php' );
      } else {
        echo '<p>请先登录后查看订单信息</p>';
      }
      ?>
    </div>
  </div>
  <!-- 收货地址模块 -->
  <div class="accordion-item">
    <div class="accordion-header">我的收货地址 <span class="toggle-icon">+</span></div>
    <div class="accordion-content" style="display:none;">
      <?php 
      if ( is_user_logged_in() ) {
        wc_get_template( 'myaccount/form-edit-address.php', array( 'load_address' => 'shipping' ) );
      } else {
        echo '<p>请先登录后管理收货地址</p>';
      }
      ?>
    </div>
  </div>
  <!-- 账户详情模块 -->
  <div class="accordion-item">
    <div class="accordion-header">我的账户详情 <span class="toggle-icon">+</span></div>
    <div class="accordion-content" style="display:none;">
      <?php 
      if ( is_user_logged_in() ) {
        wc_get_template( 'myaccount/form-edit-account.php' );
      } else {
        echo '<p>请先登录后查看账户信息</p>';
      }
      ?>
    </div>
  </div>
  <!-- 退出登录模块 -->
  <div class="accordion-item">
    <div class="accordion-header">退出登录 <span class="toggle-icon">+</span></div>
    <div class="accordion-content" style="display:none;">
      <a href="<?php echo wp_logout_url( home_url() ); ?>">确认退出当前账户</a>
    </div>
  </div>
</div>

2. 手风琴交互JS代码 #

document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', function() {
    const content = this.nextElementSibling;
    const icon = this.querySelector('.toggle-icon');
    // 切换内容显示状态
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
    // 切换展开收起图标
    icon.textContent = icon.textContent === '+' ? '-' : '+';
  });
});

注意事项 #

• 表单提交默认会跳转至原生我的账户页面，你可以通过WooCommerce提供的表单提交钩子拦截跳转，自定义返回至弹窗所在页面
• 若需优化首屏加载速度，可将内容调取改为异步AJAX实现，点击对应菜单项时再加载对应分区内容
• 所有模板调用方法均兼容WooCommerce版本更新，不会因为版本升级出现功能失效问题

内容的提问来源于stack exchange，提问作者kaiji San