仅在 WooCommerce 我的帐户仪表板中添加自定义 html 内容 [英] Add custom html content in WooCommerce My Account Dashboard only

问题描述

我将 WordPress 与 WooCommerce 和 WooCommerce 订阅插件一起使用，并且按照我的要求运行良好.

现在我想在 /my-account/ 页面中添加我的自定义 div ie (

所以我研究并发现了这个页面 /wp-content/plugins/woocommerce/templates/myaccount/my-account.php 并且该页面具有以下代码.

<div class="woocommerce-MyAccount-content"><?phpdo_action('woocommerce_account_content');?>

因此我添加了类似这样的代码

测试

在do_action('woocommerce_account_content');之下，但随后它出现在所有页面中，例如my-account/orders/、/my-account/downloads/ 等等.. 我不想要它.

如何仅在 /my-account/ 页面中显示?此外，如何通过复制我的活动主题之一来覆盖此页面，以便我不需要更改插件的核心文件?

解决方案

您在模板方面走在正确的轨道上，但还不够深入.我们可以通过另一个 do_action() 看到它仍在您正在处理的代码中提取另一个模板 - 在本例中，是专门用于该仪表板页面的代码.

要更改的代码

代替/wp-content/plugins/woocommerce/templates/myaccount/my-account.php，你要去:/wp-content/plugins/woocommerce/templates/myaccount/dashboard.php.

在那里，您会找到此代码(显示默认消息)，您可以在那里添加您的自定义 div，它只会显示在仪表板上.在第 50 行(撰写本文时)你会看到

 printf(wp_kses( $dashboard_desc, $allowed_html ),esc_url(wc_get_endpoint_url('订单')),esc_url(wc_get_endpoint_url('编辑地址')),esc_url(wc_get_endpoint_url('edit-account')));?></p>

您可以在结束 </p> 下添加任何自定义代码以保留在段落下方.如果你想把它放在段落上方，你可以在第 41 行开始写，再次在关闭 </p>

之后

覆盖模板

您可能希望在您的主题中覆盖该模板，因此在您的主题中，创建一个文件夹/文件结构，如下所示:

[yourtheme]/woocommerce/myaccount/dashboard.php.您有意不在主题覆盖中包含 templates.您可以将 dashboard.php 复制到此文件夹中并编辑该版本.

有一些关于模板结构和覆盖的开发人员文档，可以在这里查看:https://docs.woocommerce.com/document/template-structure/

I am using WordPress with WooCommerce and WooCommerce Subscription plugins and its working fine as per my requirements.

Now I want to add my custom div in /my-account/ page i.e. (http://www.example.com/my-account) after we login to system.

So I researched and found out this page /wp-content/plugins/woocommerce/templates/myaccount/my-account.php and that page has below code.

<?php 
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_account_navigation' ); ?>

<div class="woocommerce-MyAccount-content">
    <?php       
        do_action( 'woocommerce_account_content' );
    ?>
</div>

Hence I have added my code code something like this

<div>Test</div>

Below do_action( 'woocommerce_account_content' ); but then its appearing in all the pages like my-account/orders/ , /my-account/downloads/ etc .. I do not want it.

How can I show this only in /my-account/ page ? Additionally, how can I just overwrite this page by copying in one of my active themes so that I do not need to make changes in core files of the plugins ?

解决方案

You're on the right track with the templates, but you haven't quite gone deep enough. We can see by another do_action() that it's still pulling in another template in the code you're working on - in this case, the code specifically for that dashboard page.

Code to Change

Instead of /wp-content/plugins/woocommerce/templates/myaccount/my-account.php, you want to go to: /wp-content/plugins/woocommerce/templates/myaccount/dashboard.php.

There, you'll find this code (which displays the default message) and you can add your custom div there, which would only display on the dashboard. Around line 50 (as of writing) you'll see

    printf(
        wp_kses( $dashboard_desc, $allowed_html ),
        esc_url( wc_get_endpoint_url( 'orders' ) ),
        esc_url( wc_get_endpoint_url( 'edit-address' ) ),
        esc_url( wc_get_endpoint_url( 'edit-account' ) )
    );
    ?>
</p>

You can add any custom code under the closing </p> to stay under the paragraph. If you want it above the paragraph, you'd start writing around Line 41, again after a closing </p>

Overriding Templates

You would want to override that template in your theme, so in your theme, create a folder/file structure like this:

[yourtheme]/woocommerce/myaccount/dashboard.php. You intentionally do not include templates in your theme override. You would copy dashboard.php into this folder and edit that version.

There's some developer documentation about template structure and overrides that might be good to check out here: https://docs.woocommerce.com/document/template-structure/

这篇关于仅在 WooCommerce 我的帐户仪表板中添加自定义 html 内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！