Add custom html content in WooCommerce My Account Dashboard only

Question

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 ie ( 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?

Answer 1

To make that displayed only in the My account Dashboard without overriding any template file , you can use the following hooked function instead:

add_action( 'woocommerce_account_dashboard', 'custom_account_dashboard_content' );
function custom_account_dashboard_content(){
    echo '<div>' . __("Test", "woocommerce") . '</div>';
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

The custom html content is just added only to My Account Dashboard as expected (without overriding any template file) :

Note: This requires to replace back WooCommerce original related templates files.

Answer 2

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/