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

Please share some screenshots where exactly you want? be specific. — Bhautik, Apr 15 '21 at 13:21
@Bhautik Thanks for reply . I have updaetd my question with couple of screenshots. So that you can have better idea. — Mittul At TechnoBrave, Apr 15 '21 at 13:31
can you inspect the element and show me where that div needs to be added? — Bhautik, Apr 15 '21 at 13:37
@Bhautik FYI .. I have implemented this feature by following this answer in the same thread provided by Danny Santoro https://stackoverflow.com/a/67109770/6829420 . Thanks for your support. — Mittul At TechnoBrave, Apr 16 '21 at 04:17

LoicTheAztec · Answer 1 · 2021-04-15T15:42:47.520

5

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.

edited Apr 15 '21 at 15:42

answered Apr 15 '21 at 14:47

LoicTheAztec

229,944
23
356
399

Thank you so so much. It really helped me to understand it better and to update my template. – Mittul At TechnoBrave Apr 16 '21 at 04:13
This is neat and more maintainable than templates. Thank you very much. Do you happen to know a similar approach for adding some text on top of the subscriptions page (added by woocommerce subscription) by any chance? – Daniele Muscetta Sep 29 '22 at 09:35

score 1 · Accepted Answer · edited Apr 15 '21 at 13:56

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/

This is exactly what and how I wanted. I have a form to add and do some ajax stuff .. Thank you so much. Your help and guidelines really helped me to understand it how it works. Thank you so much. — Mittul At TechnoBrave, Apr 16 '21 at 04:14

Add custom html content in WooCommerce My Account Dashboard only

2 Answers2

Code to Change

Overriding Templates

Linked