Add custom html content in WooCommerce My Account Dashboard only

user_6829420 0
Viewed 2251

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 ?

woocommerce-subscriptions account woocommerce wordpress php
2 Answers

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):

enter image description here

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

user_37307540

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/

user_26581920
Related