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

Question

我正在为WC创建自定义仪表板，并且需要以最简单的方式在WooCommerce菜单中的nav和ul元素之间添加内容。

我已经看到有一个名为woocommerce_before_account_navigation和woocommerce_after_account_navigation的钩子，但是这些钩子会在整个nav元素之后或之前添加内容。

这是我要做什么的图片。

有人解决了吗？

Answer 1

由于WooCommerce不提供钩子来将代码准确地注入到您需要的位置：

＃1根据您的主题自定义导航部分

自WooCommerce allows you to override most of its template files起，您可以：

1. 复制位于navigation.php的{​​{1}}文件。
2. 将此文件粘贴到/wp-content/plugins/woocommerce/templates/myaccount/中。
3. 进行所需的更改。
4. 利润！

请记住，您将不时关注WC的更新，因为您覆盖的文件中可能会有更改，可能希望/需要移植。

或者...

＃2使用AJAX和JS将您的自定义代码直接插入到所需位置

使用WordPress' AJAX API生成所需的HTML输出，并使用jQuery / vanilla JavaScript将其直接插入/wp-content/themes/your-theme/woocommerce/myaccount/和nav标签之间。

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

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函数中显示用户信息，头像和名称（我命名为mine getUsernameAndStuff（））设置id为用户的ID。

赞：

<?php 
function getUsernameAndStuff(id){
//put the code here..
}
?>

然后使用js：

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