在 WooCommerce 帐户中的 <nav> 和 <ul> 之间添加内容

Question

我正在为 WC 制作一个自定义仪表板，需要以最简单的方式在仪表板的 WooCommerce 菜单中的nav和ul元素之间添加内容。我看到有一个名为woocommerce_before_account_navigation和woocommerce_after_account_navigation的钩子，但这些钩子在整个nav元素之后或之前添加内容。这是我正在尝试做的事情的图片。有人有解决方案吗？

Answer 1

由于 WooCommerce 不提供挂钩来准确地在您需要的地方注入代码：

#1 从您的主题自定义导航部分

由于WooCommerce 允许您覆盖其大部分模板文件，您可以：

1. 复制navigation.php位于的文件/wp-content/plugins/woocommerce/templates/myaccount/。

2. 将此文件粘贴到/wp-content/themes/your-theme/woocommerce/myaccount/.

3. 进行您想要的更改。

4. 利润！

请记住，您需要不时关注 WC 的更新，因为您覆盖的文件中可能存在您可能想要/需要移植的更改。

或者...

#2 使用 AJAX 和 JS 在你想要的地方注入你的自定义代码

使用WordPress 的 AJAX API生成您需要的 HTML 输出，nav并ul使用 jQuery/vanilla JavaScript将其注入和标签之间。

这样您就不必覆盖 WC 的模板。但请记住，如果您在站点上使用缓存插件时执行此操作，则需要对其进行配置，以便它每大约 24 小时或更短时间重建一次缓存，否则某些用户可能会遇到问题（例如）。

Answer 2

嗯....最简单但不是最好的方法是：

手动放置一个空的 div 标签，这样你的代码就会变成这样：

<nav class= 'woocommerce-MyAccount-navigation'>

<div style ='blah-blah'>//that div after the nav bar ;TLDR

<div id='newDiv></div>

<ul>//etc

包装代码以在 php 函数中显示用户信息、头像和姓名（我命名为 getUsernameAndStuff()），让其id成为用户的 id。

喜欢 ：

<?php 

function getUsernameAndStuff(id){

//put the code here..

}

?>

然后使用js：

<script>document.getElementById().innerHTML=<?php getUsernameAndStuff(id)?></script>