phpwordpresswoocommerceaccountwoocommerce-subscriptions

Add custom html content in WooCommerce My Account Dashboard only

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.

enter image description here

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.

enter image description here

enter image description here

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 ?

Solution

  • 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/