Posted on

WooCommerce Visual Hook Guide: My Account Pages

Hey WooCustomizers, the Visual Hook Guide is back ๐Ÿ™‚

In this episode, I’ve created a visual HTML hook guide for the WooCommerce Account Pages (there are multiple pages such as the My Account as logged in user, My Account as logged out, etc). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations – and you can also copy & paste in seconds unlike other “hook sniffer plugins” out there. Let me know in the comments what you think about this resource!

Enjoy!

WooCommerce My Account Page – User Logged Out – Login/Register Page [Visual Hook Guide]

My Account

woocommerce_before_customer_login_form

Login

Register

woocommerce_register_form_start




woocommerce_register_form register_form

woocommerce_register_form_end

woocommerce_after_customer_login_form

WooCommerce My Account Page – User Logged In – Dashboard [Visual Hook Guide]

My Account

woocommerce_account_content

Hello Rodolfo (not Rodolfo? Sign out)

From your account dashboard you can view your recent orders, manage your shipping and billing addresses and edit your password and account details.

woocommerce_account_dashboard

WooCommerce My Account Page – User Logged In – Orders [Visual Hook Guide]

Orders

woocommerce_account_contentwoocommerce_before_account_orders (param: $has_orders)

woocommerce_before_account_orders_pagination

woocommerce_after_account_orders (param: $has_orders)

WooCommerce My Account Page – User Logged In – Downloads [Visual Hook Guide]

Downloads

woocommerce_account_contentwoocommerce_before_account_downloads (param: $has_downloads)

woocommerce_before_available_downloads

File Remaining Expires  

Download โ€“ Test

โˆž Never Download

woocommerce_after_available_downloads

woocommerce_after_account_downloads

WooCommerce My Account Page – User Logged In – Addresses [Visual Hook Guide]

Addresses

woocommerce_account_contentwoocommerce_before_edit_account_address_form

The following addresses will be used on the checkout page by default.

Billing Address

Edit

Hello This
Is
Main
Street, CA 32444
United States (US)

Shipping Address

Edit

Hello This
Is
Main
Street, CA 32444
United States (US)

woocommerce_after_edit_account_address_form

WooCommerce My Account Page – User Logged In – Edit Address [Visual Hook Guide]

Addresses

woocommerce_account_contentwoocommerce_before_edit_account_address_form

Billing Address

woocommerce_before_edit_address_form_{$load_address}

woocommerce_after_edit_address_form_{$load_address}

woocommerce_after_edit_account_address_form

WooCommerce My Account Page – User Logged In – Payment Methods [Visual Hook Guide]

Payment Methods

woocommerce_account_contentwoocommerce_before_account_payment_methods (param: $has_methods)

woocommerce_after_account_payment_methods (param: $has_methods)

Add Payment Method

WooCommerce My Account Page – User Logged In – Account Details [Visual Hook Guide]

Account Details

woocommerce_account_contentwoocommerce_before_edit_account_form

woocommerce_after_edit_account_form

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

41 thoughts on “WooCommerce Visual Hook Guide: My Account Pages

  1. Thank you very much for making the hooks visual. Helped me out a lot to figure which ones i needed and where they are going to be placed on the page

    1. Great ๐Ÿ™‚

  2. “From your account dashboard you can view your recent orders, manage your shipping and billing addresses and edit your password and account details.”

    Sir, How to edit this line? Or how to remove this line ?

    Please help me……

    1. Hey Abhi, thanks for your comment! It’s a WooCommerce string, so you can translate it: https://businessbloomer.com/translate-single-string-woocommerce-wordpress/. Hope this helps!

  3. I was looking for it! Thank you very much for your time and knowledge ๐Ÿ˜‰

    1. Thanks Robert ๐Ÿ™‚

  4. Hi,
    I want to omit “last_name” in the Account Details page.

    I already use a plugin “WooCommerce Checkout Field Editor” to hide this field on Account Details page.
    However, when I clicked submit, then I got an error “last_name is required”.

    How do I make “last_name” not required?

    1. Hey Stonez, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  5. Hey, what is hook for single order preview ?

    1. Hey Roman, you’re right, in here there is no section for the “View Order” hooks. Good news is, there is only one:

      do_action( 'woocommerce_view_order', $order_id );
      

      Hope this helps ๐Ÿ™‚

  6. How do i put these codes in to make them active on my pages?

    1. Hello Kristen. You can place this in your child theme’s functions.php file – if you need more guidance, please take a look at this video tutorial: http://businessbloomer.com/woocommerce-customization-hangout/. Hope this helps!

  7. Hey Rodolfo, thank you so much for this great resource.

    If you are still updating the post, may I suggest include the woocommerce_account_menu_items filter hook to add navigation items. It’s what I was looking for.

    Either way, bookmarked! Thanks again.

    Best,

    Andy

    1. Hey Andy, thanks for your comment! This visual hook guide is for add_action only and not add_filter. One day I will do one for filters as well ๐Ÿ™‚

  8. Thank you for your awesome, neat and useful work.

  9. How do I show “you are logged in as + username/email on top bar(top menu) or header menu? when I logged in from checkout page

    1. Hello Pelle, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  10. Great site ๐Ÿ™‚

    How do I change the text “No order has been made yet.” on the Account Orders page other than copying the orders.php template to my child theme?

    Thanks

    1. Thank you Keely ๐Ÿ™‚ Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  11. I see how to add the product image to the email, but how would one add a product image to the order details page? I don’t actually see a hook for that?

    Please let me know if you can you help?

    1. Hey Aki, thanks so much for your comment! Is this in the WordPress Dashboard > WooCommerce > Orders > Single Order?

  12. Thank you very much for sharing.. but i dont see the code

    1. Arie, thanks for your comment! Which code are you referring to?

  13. Hi.

    I found this visual very helpful for me.
    But I think you miss a page here, that is Order Detail (which goes by URL /my-account/view-order/{id}/).
    Can you please update the article to include visual hook guide for Order Detail page?

    Thanks.

    1. Thanks Rizki, I’ll see what I can do ๐Ÿ™‚

    2. Hi, I’m searching for the same too

  14. Nice work \o/

    Added to bkm ๐Ÿ™‚

  15. Hi
    I guess that couple of these maps are changed in the current version of WC. Isn’t ?
    Alain

    1. Yes Alain, you’re right, I totally forgot to update this tutorial! I will put this on my urgent to-do list ๐Ÿ™‚

    2. The updated hooks are live now ๐Ÿ™‚

  16. Hi,

    Thank you very much for sharing your knowledge:)
    I am using woocommerce 2.6, could you please tell me if this hooks are still valide?
    Could you please tell me how I can add the reorder button in my account page please?

    Thank you
    Fred

    1. Fred, thanks for your comment! And yes, you’re right – this visual guide is a little out of date and it’s prior to 2.6. Sorry ๐Ÿ™‚ I will make sure to revise this resource as soon as possible. Cheers!

    2. Updated hooks are now live ๐Ÿ™‚

  17. Hey Rodolfo

    Hope all good with you.

    Can you tell me if you’ve covered anywhere how to remove items from the My Account menu?

    Basically I want to REMOVE the link to Dashboard (I can’t understand why it’s even there because it seems to go to the same page!), the Account Details link (for logged in users) – I’m using a separate plugin to provide a much nicer visual of the clients profile. I also want to edit the text that shows up:

    | From your account dashboard you can view your recent orders, manage your shipping and billing addresses and edit your password and account details. |

    I don’t want to let them do anything other than view orders via Woo

    I’m sure this should be relatively easy to edit but I’m going round in circles – AGAIN!!!

    1. Hello Mark, thanks a lot for your comment! I’m not sure what you mean here – can you maybe add a link to a screenshot to show exactly what you need? Cheers ๐Ÿ™‚

    2. Hi Rodolfo

      Here’s an annotated screenshot of the My Account page

      http://screencast.com/t/mqWxAfuVKGnu

      Thanks

    3. Excellent, thanks for that! I think that “navigation” is a new thing since WooCommerce 2.6, it didn’t use to be like that.

      So, I did a little search through the “/templates” folder in WooCommerce and found this file: woocommerce\templates\myaccount\navigation.php. That manages that navigation menu you get in your account and unfortunately there is no “apply_filters” that allow you to tweak that template without overriding it. You should therefore follow WooCommerce guidelines to override the template file: https://docs.woocommerce.com/document/template-structure/

      In regard to the “From your account dashboard…” you find this here: woocommerce\templates\myaccount\dashboard.php and should do the exact same thing as above. Again, no filter offered by WooCommerce in this case.

      Hope this helps!

    4. Thanks Rodolfo

      Didn’t see this until late. will see what I can do over weekend and update you with outcome

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.