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_after_customer_login_form
WooCommerce My Account Page – User Logged In – Dashboard [Visual Hook Guide]
My Account
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
| Order | Date | Status | Total | |
|---|---|---|---|---|
|
#501 |
On Hold | €22.00 for 2 items | ViewDownload invoice (PDF) | |
|
#500 |
On Hold | €32.06 for 2 items | ViewDownload invoice (PDF) | |
|
#499 |
On Hold | €32.06 for 2 items | ViewDownload invoice (PDF) | |
|
#466 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) | |
|
#465 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) | |
|
#464 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) | |
|
#463 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) | |
|
#462 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) | |
|
#461 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) | |
|
#460 |
On Hold | €32.06 for 1 item | ViewDownload invoice (PDF) |
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_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
The following addresses will be used on the checkout page by default.
woocommerce_after_edit_account_address_form
WooCommerce My Account Page – User Logged In – Edit Address [Visual Hook Guide]
Addresses
woocommerce_after_edit_account_address_form
WooCommerce My Account Page – User Logged In – Payment Methods [Visual Hook Guide]
Payment Methods
| Method | Expires | |
|---|---|---|
| Visa ending in 4242 | 12/22 | Delete |
woocommerce_after_account_payment_methods (param: $has_methods)
WooCommerce My Account Page – User Logged In – Account Details [Visual Hook Guide]
Account Details
woocommerce_after_edit_account_form
Hi, how are your doing ?
We have a wordpress 6 website and I would like to know if it possible to replace the “no subscription” message in the “my account/subscriptions” page ?
Thank you
Chris
Chris, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Wow, this is super helpful! I always struggled to figure out which hooks go where on the WooCommerce account pages, but this visual guide clears everything up. Thanks for breaking it down so clearly – definitely bookmarking this for future projects. Awesome job!
Cheers!
is there any hook for Order Detail page?
For the “View Order” page you mean? If yes:
Great Site with lots of info
Hi I am looking to display the edit_account endpoint only when the user clicks on edit profile else it should display the entire profile as read only. ( The password fields are to be hide)
And I want to merge edit_account and edit_address endpoints to display only in one view when the user tries to edit the profile. And there it should have only one save changes button.
I have tried your hook but the edit_address is showing after the save changes button of edit_account endpoint.
Nikhilesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo, I really appreciate your helpful guide.
I have a login page I would like to find the hook for which is the “Pay for Order” login page which shows for customers to login to pay for manually created woocommerce orders.
Actually I’ve used your snippet from below to bypass the login page.
Much appreciated thanks.
https://www.businessbloomer.com/woocommerce-allow-to-pay-for-order-without-login/
Cool!
This is great!
I have used your hooks in the past and they are such a great resource. Now I have challenge where i want to remove/add some fields in the editing of Billing Address. So the hook I want to use is woocommerce_before_edit_address_form_{$load_address}. But this doesn’t seem like the ordinary declaration with the {$load_address}. Right now I have declared it like this:
add_action('woocommerce_before_edit_address_form_(load_address)','dyc_before_edit_billing_address');which is obviously wrong as it doesn’t get called. Could you shine some light on this?
Ah, tried this which worked.
add_action('woocommerce_before_edit_address_form_billing','dyc_before_edit_billing_address');.
The $load_address was just a string variable depending on if the billing or shipping form was loaded.
Exactly, well done!
Very helpful. I’ve used your WooCommerce solutions many times!
Thanks!
very informative I highly recommended this.
Cheers
This is such a great article. I was struggling with the My Account page for months. Trying different things, wondering how the page worked with the logged-in, logged-out, separate login from register, add custom registration fields, customise the My Account logged-in page to make it look better, etc. I was always looking for a visual guide in order to understand how this page works. Now I finally did and I am so thankful for this post. Great stuff
Thank you!
Hello! Great article, very useful. For some reason the “woocommerce_account_content” is displaying in the same place where the “woocommerce_account_dashboard” is (below the welcome text). Has it changed? Please help. Thank you.
Hi Daniel, you can try using a low priority (watch the free tutorials) and hopefully in that case you can show something before the welcome text. Let me know!
Hi Rodolfo
This article is just amazing. Thank you for sharing your knowledge with us.
I am just looking for a way to change the View button styling under orders using some hook.
is this possible?
Cheers! No, styling = CSS and not PHP
Hello,
I am wonering if you have something similar to this but for Woocommerce Memberships? I am trying to add an action to my memberships management tab, just a button with a link in the actions column. I’ve tried using the action ‘wc_memberships_my_memberships_column_membership-actions’, but it doesn’t seem to do anything.
Any help is greatly appreciated.
Nope, sorry
Hi Rodolfo,
Thanks for helping us out. I would like to add a custom tab/field in my account page which I can connect/sync to google worksheet for data value. Is this doable in woocommerce? Is there a plugin there for this purpose?
Many thanks for your help.
Cheers,
Isaac
Hi Isaac, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello Rodolfo,
Your website has saved me so many times, that I’m definitely going to subscribe to CustomizeWoo soon. 🙂
Just one remark/question about the visual guide. When I use the hook ‘woocommerce_before_account_navigation’, things end up underneath the page title, but above everything else. So, not in the left hand column, but full width, forcing down the rest of the content. Any thoughts on that?
I’m trying to avoid adjusting template files as much as possible.
Best regards!
Ineke
Thank you Ineke. You probably need a bit of CSS as well in this case
Hey Rodolfo, thanks for another super-helpful visual hook guide! Question: what about the “view order” page? Specifically, the page that has an endpoint like “/my-account/view-order/12345/”
Thanks!
Good point. You can find hooks for that template under woocommerce/templates/my-account/view-order.php
Hi Rodolfo
I kind of lost. How can I have a register form+dashboard etc ? all the combination for a new and regular client ? Meaning exactly what you show on that page
I can’t succeed with that
The default WooCommerce “my account” shortcode does just that
Hi Rodolfo
Do you have any articles on getting the Woocommerce login error message to show?
Or how to control it? The storefront theme does not show an error message when a user
adds an incorrect username or password. It just reloads the page. Any idea what could be causing this?
Thanks in advance
To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme – does it work? If yes, you have a problem with your current theme or one of the plugins.
This was helpful. Thank you Rodolfo.
Great!
You have hook references including: woocommerce_before_edit_account_address_form. Is there an available before and after hook for the subscriptions page?
Hi Phil, search for “add_action” calls through the subscription plugin files
In this scenario I think you are better off editing this WooCommerce subscriptions template file
woocommerce-subscriptions\templates\myaccount\view-subscription.php
Here are the 3 options you have for the «Subscriptions» tab in My account page :
Awesome
Hi Rodolfo,
Thanks for this excellent blog.
How do I change My Account to display dropdown instead of a menu page?
Any help would be truly appreciated, thanks!
Robert
Hi Robert, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
You can change the name of the field on the page:
my-account / edit-account /
my-account / edit-address / billing /
thanks
Is that a question? 🙂
Thanks for the answer, I decided))
Thank you for this awesome article.
It will be usefull in my work!
Welcome!
Hello Rodolfo~ How do I move the My Account title (text wrapped in .entry-header) inside the .woocommerce-MyAccount-content div using hook? 🙂
Hello Ming, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello, I’m currently experiencing a very complicated problem and maybe you have the answers that I’m looking for. The My-Account Navigation Menu in Storefront is appearing to the right side instead to the left side like all the menus around the world. I think that that was after update the theme, because I didn’t do any other thing in this section. I didn’t install any plugin related or something similar. And I didn’t insert any code to my theme or nothing. I’ve also switched to others themes and all themes have the My-Account Nav Menu to the LEFT SIDE. I’ve also cloned my website (before this problem arrive) in order to make tests in one of these versions. But both have exactly the same problem right now.
I’ve wrote to the Storefront support, but I didn’t receive any answers yet.
I’ll really appreciate if you can help me or give some answer or clue to solve this big issue, because I don’t have programming skills.. Thank you for your time!
Elsy
Hello Elsy, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi,
All i need to do is to add one custom link inside my account page only when they logged-in can see the link. And my link is a button. what should I add to my function.php?
Hello Ali, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
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
Great 🙂
“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……
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!
I was looking for it! Thank you very much for your time and knowledge 😉
Thanks Robert 🙂
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?
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
Hey, what is hook for single order preview ?
Hey Roman, you’re right, in here there is no section for the “View Order” hooks. Good news is, there is only one:
Hope this helps 🙂
How do i put these codes in to make them active on my pages?
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: https://businessbloomer.com/woocommerce-customization-hangout/. Hope this helps!
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
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 🙂
Thank you for your awesome, neat and useful work.
Cheers 🙂
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
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
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
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
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?
Hey Aki, thanks so much for your comment! Is this in the WordPress Dashboard > WooCommerce > Orders > Single Order?
Thank you very much for sharing.. but i dont see the code
Arie, thanks for your comment! Which code are you referring to?
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.
Thanks Rizki, I’ll see what I can do 🙂
Hi, I’m searching for the same too
Nice work \o/
Added to bkm 🙂
Thanks!
Hi
I guess that couple of these maps are changed in the current version of WC. Isn’t ?
Alain
Yes Alain, you’re right, I totally forgot to update this tutorial! I will put this on my urgent to-do list 🙂
The updated hooks are live now 🙂
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
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!
Updated hooks are now live 🙂
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!!!
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 🙂
Hi Rodolfo
Here’s an annotated screenshot of the My Account page
https://screencast.com/t/mqWxAfuVKGnu
Thanks
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!
Thanks Rodolfo
Didn’t see this until late. will see what I can do over weekend and update you with outcome
Cool!