如何为WooCommerce我的账户导航nav元素添加自定义CSS类？

没有专门用于修改该导航元素类名的专属钩子，但可以通过以下几种方法实现需求：

• 方法一：替换默认导航输出（PHP实现）
  先移除WooCommerce默认的导航渲染函数，再自定义输出带目标类的导航容器，同时保留原有菜单项逻辑：

  // 移除默认导航渲染
  remove_action( 'woocommerce_account_navigation', 'woocommerce_account_navigation' );
  
  // 添加自定义导航输出
  add_action( 'woocommerce_account_navigation', 'custom_woocommerce_account_navigation' );
  function custom_woocommerce_account_navigation() {
      ?>
      <nav class="woocommerce-MyAccount-navigation sticky-top" aria-label="<?php esc_attr_e( 'Account pages', 'woocommerce' ); ?>">
          <ul>
              <?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
                  <li class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>">
                      <a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>"><?php echo esc_html( $label ); ?></a>
                  </li>
              <?php endforeach; ?>
          </ul>
      </nav>
      <?php
  }
  

  将这段代码添加到主题的functions.php文件或自定义插件中即可。

• 方法二：JavaScript动态添加类
  如果不想修改PHP代码，可通过前端脚本实现类名添加：

  document.addEventListener('DOMContentLoaded', function() {
      const accountNav = document.querySelector('.woocommerce-MyAccount-navigation');
      if (accountNav) {
          accountNav.classList.add('sticky-top');
      }
  });
  

  将这段代码添加到主题的自定义JS文件、后台“自定义HTML”模块或插件的前端脚本中。

• 方法三：模板重写
  若使用自定义主题，可直接重写WooCommerce模板：

  1. 在主题目录下新建woocommerce/myaccount/文件夹
  2. 复制WooCommerce插件内templates/myaccount/navigation.php文件到新建的文件夹
  3. 打开复制后的文件，将<nav class="woocommerce-MyAccount-navigation"修改为<nav class="woocommerce-MyAccount-navigation sticky-top"

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