WooCommerce Visual Hook Guide: Checkout Page

Hey Woo Developers. I’ve created a visual HTML hook guide for the WooCommerce Checkout Page.

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 easily copy & paste. Enjoy!

WooCommerce Checkout Page [Visual Hook Guide]

woocommerce_before_checkout_form

–> “Have a coupon?” section <--

woocommerce_checkout_before_customer_details

Billing Details

woocommerce_before_checkout_billing_form

woocommerce_after_checkout_billing_form


woocommerce_before_checkout_shipping_form

woocommerce_after_checkout_shipping_form

woocommerce_before_order_notes

woocommerce_after_order_notes

woocommerce_checkout_after_customer_details

Your order

woocommerce_checkout_before_order_review

ProductTotal
woocommerce_review_order_before_cart_contents
Test product  × 1€1,00
woocommerce_review_order_after_cart_contents
Subtotal€1,00
woocommerce_review_order_before_shipping
Shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
Total€1,00
woocommerce_review_order_after_order_total

woocommerce_review_order_before_payment

  • Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.

woocommerce_review_order_before_submit

woocommerce_review_order_after_submit

woocommerce_review_order_after_payment

woocommerce_checkout_after_order_review

woocommerce_after_checkout_form

WooCommerce Checkout Page Default add_actions


// These are actions you can unhook/remove!

add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );
add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

52 thoughts on “WooCommerce Visual Hook Guide: Checkout Page

  1. Thanks for this. Its very useful and time-saver.

    I would like to know if its possible to add an icon in the shipment options.

    For example in the option “Local Delivery (Free)” and beside it shows a store icon or custom icon.

    Thank you for sharing this and for reading this comment. Many thanks.

    1. Hi Charles, 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!

  2. Hi, im trying to find a easy way to display billing and shipping that the customer has entered before review order table.

    ie. woocommerce_checkout_before_order_review

    in this place it would show the customer what addresses they have entered into the fields?
    basically their reviewing their own info….
    iv given up trying to find a simple solution…. a plugin would be great if its difficult..

    thanks in advance, i have used other stuff on this guide and its worked a treat…..

    1. Hello Simon, 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!

  3. Hello

    I need to display woocommerce-shipping-totals right after shipping address is entered, is this possible? I m using Multi Step Checkout plugin. Final output should by something like this: after cart page client inserts billing details, next step shipping address and on same page client have to pick shipping option right after the address is inserted, and then payment step.

    1. Hi Mel, 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!

  4. I’m trying to add some text below the Billing Details title as instructions. Is that possible with hooks?

    1. Of course!

  5. Hi thanks for your wonderful world of knowledge.

    I was able to remove the payment and order review summary.
    But I can’t remove “Your order”

    Also how can I create a shortcode so I can display these two things somewhere else?

    /* remove summary and payment from main checkout */ 
    
    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
    
    /* attemt to display them elsewhere via shortcode */
    function customCheckout(){
    	echo 'apparently echo only works, i don't see the checkout review and payment';
    	add_action( 'woocommerce_checkout_order_review', 'woocommerce_order_review', 10 );
    	add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
    	
    }
     add_shortcode( 'custom_checkout_sc', 'customCheckout' );
    
    1. my comment is still in moderation after ten days?

      1. Yes Peter, I do this in my free time as I need to get paid done work first, I’m sure you understand. In regard to your request, you don’t want to create a shortcode, simply pick a hook for the checkout page and call the same function again after having it removed e.g.:

        add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_payment', 20 );
        
  6. This is so incredibly useful and a massive time saver. Many Thanks Rodolfo!

    1. Excellent!

  7. Hi, great visual explanation.

    I have a question: is there a hook/action/something which could help me execute code every time when order summary is updated? For example, when shipping method is changed.

    Thanks!

    1. Hey Karolis, yes, I believe it’s “woocommerce_checkout_update_order_review”

  8. Hello Rodolfo!

    Thank you very much for the info !!, but I have a question. How should I do if instead of creating a field before Billing Details with the hook woocommerce_before_checkout_billing_form, I would like to create it between fields (Between company and email)?

    Thank you!

    1. Hi Marc, 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. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  9. Rodolfo Melogli is this THE most valuable woocommerce checkout hooks page on the internet? YES it is! 🙂 Thank you for this man.

    1. Ahah thank you!

  10. Hi,

    Actually I want to customize my woocommerce checkout page to show the billing address and shipping address side by side.. and the your order form and payment gateway at the end..
    As I am not so much professional in editing back-end, I am confused how a function.php file in childtheme folder will override the actual content?? as the existing one is also sending hooks.
    Regards,
    Jay

    1. Hey Jay, good question! The default WooCommerce checkout is indeed side-by-side and payment stuff below it – so it’s your theme or another plugin giving you that functionality. You’ll need to override your theme or plugin in your child theme, and the coding will strictly depend on how they approached this (pure CSS, or also PHP). Hope this helps

  11. is it possible to remove the header and footer section on all woocommerce pages (Shop, Product, Cart, Checkout, Thank you)

    1. Hey Rashuan, 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

  12. Hello , thank u very much for this post
    i have a question about the checkout page please , i want to know which hook trigger when the customer modify city or address field because i’m going to use it to calculate shipping price , and if there a good source to get other useful hooks because it really hard to me to find them , thank u again 🙂

    1. Hello Ahmed, 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

  13. Hi Rodolfo,

    Love your content!

    Thanks so much for creating your tutorials and material.

    Please consider adding a section that explains how to center the text.

    For example: woocommerce_before_checkout_form has to be positioned because it isn’t in any container.

    Thanks,
    Yehuda

    1. Hello Yehuda, good idea, however this is about PHP and not CSS 🙂

  14. Hi,

    woocommerce_checkout_before_customer_details

    doesn’t work on my site.

    Others do work

    1. Hey Yehuda, thanks for your comment! That hook still exists, so not sure why it won’t work for you 🙂

  15. Hello, how do you add the shipping to the top of checkout? what is the hook action? I have remove the shipping between
    woocommerce_review_order_before_shipping

    woocommerce_review_order_after_shipping
    But can you tell me the action to add it to the top of checkout form? Thank you.

    1. Hello Steve, 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

  16. Hi admin,
    First of all really thank you for vary nice visual representation of hooks.

    I want to restrict some user from accessing the content and forms of the checkout page. So I did the following

    remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_login_form’, 10 );
    remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’, 10 );

    remove_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_order_review’, 10 );
    remove_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_checkout_payment’, 20 );

    But still I am seeing the billing and shipping forms.

    Actually, the simple is this, that I want to show a one line message online similar to “You must be logged in to checkout.”.

    can you please help me in this respect.?

    1. Hello there, thanks for your comment! Can you not just disable “guest checkout” from the WooCommerce settings?

  17. Hello I have a question about hooks… I need to move “Payment Methods” between:
    1) Delivery
    –payment methods–
    2) Fees

    Currently it is under Total which is wrong because my payment methods might have “Additional Fees” and they affects Total Price so by selecting something in payment methods I’m affecting something above in form which is not UX friendly…

    Is that move possible since whole “woocommerce_review_order_before_payment” contains Agreements and “Place order button”? I’m not sure how to move it and not to break everything 😀 How the code should look like so functions.php would take it?

    Thanks in advance for your time and answer 🙂

    1. Hello Jaroslav, 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

  18. how to add map picker?

    1. Hey Rada, thanks for your comment! For a map picker maybe a plugin would suit better, try taking a look at what Google gives you

  19. Is it possible to show the Review Order section before the shipping and billing detail on checkout page ?

    1. Hey Abhishek, thanks for your comment! I guess you can try to remove_action and then add_action the same thing above the details – give it a go 🙂

  20. Hi,

    I am using the Amazon Pay extension for WooCommerce and I really want to move the “Pay with Amazon” button to the payment section instead of at the top of the page.

    1. Hey Zach, 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

  21. Hi there 🙂

    Is it possible to hook into the Billing Details (h3) with a filter in order to change the text?

    1. Hey Carina 🙂 No, it’s not possible – but you can use this: https://businessbloomer.com/translate-single-string-woocommerce-wordpress/ – hope this helps 🙂

  22. Hi Rodolfo,

    can we remove the default checkout payment at woocommerce?

    1. Rodrigo, 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

    1. Hİ Rodolfo,
      Is it possible to change the “billing details” header on the payment page.

      Thank you.

      1. Hey Musa, yes, go to Google and look for “Translate WooCommerce Strings” and you should find my quick tutorial. Thank you!

  23. Hi Rodolfo! So…I’m wondering if this looks like I think it looks when I’m done: the ‘Stacked’ layout that mobile shows. But….on desktop. Is that the case? Am I seeing code that will make the desktop version of Checkout in WooCommerce…look like it does on mobile?? Because that’s what I’m trying to do! LOL. I want to make the ‘two-column’ look GO AWAY on desktop. COMPLETELY, lol. I want a stacked layout for desktop. I am using the WooCommerce plugin; not ‘Storefront’ (their free template…which is…ugly as sin, blech). I hope the fact that I’m only using the WooCommerce plugin (but not the Storefront theme)….I hope that doesn’t make this task impossible. I am so sick of the two-column layout for the Checkout page. It’s cramped, looks like a crazy monkey put it together (TOO MUCH WHITE SPACE, haaha…). It’s disjointed and driving me insane.

    I LOVE the tablet/mobile version that renders when you smoosh the desktop screen. The great thing about the desktop Checkout version is that it’s responsive. So I’ve been (lol) trying to fool the desktop version of the Checkout page into thinking it’s a tablet accessing it, hahaa….NO LUCK. 😀 THEN…I found this page. What a miracle.

    Of course I have noooo idea what any of this is, but…it looks like it’s my solution! 😀

    My question then, for you, Rodolfo: I just paste that itsy-bitsy little code you have there — the ‘// These are actions you can unhook/remove!’ code, which is all of about 4 lines or so — in the bottom of my ‘functions.php’ file in my child theme, before the ‘?>’ appears…? There is no ?> there at the end of my child theme’s functions.php file. Now, the file STARTS with at the end of my child theme’s functions.php file…. 🙁

    I know it’s a lot of questions for me to shove into one comment, so I apologize in advance for the headache you may receive when reading this. 😀 Here, let me try to parse it out a little cleaner for you and all readers who come after you, who are gonna read this….

    1.) I want a solution that renders the desktop version of the Checkout page in the WooCommerce plugin for WordPress….according to ‘tablet’ dimensions. No…I do not want the thing to also have the little hamburger menu and the header to turn into a tablet version — just the body content. Because the Checkout page is responsive; it’s currently in 2-column [default] style, which I hate. But if you ‘smoosh’ the desktop screen all the elements on that page ‘stack’ vertically upon one another, WHICH IS PERFECT. 😀 I want all elements to be one right after each other, as though they were bricks shoved on top of each other, piling up towards the sky.

    2.) I do not know how to use ‘hooks.’ This seems like a great idea though. SO…what do I paste where to get what I see above, in the little pink area that represents a Checkout screen on desktop?

    3.) The ‘Storefront Powerpack’ that WooCommerce sells only works if you have the Storefront theme installed and using that as your store; it does not work with the plugin for other themes. In case anyone thinks that’s gonna be a valid solution to my woes (sadly it isn’t lol). The great thing though is that it INSTANTANEOUSLY changes the layout of the Checkout page into EXACTLY what i was talking about. The jerks don’t make that as an option for everyone to use in the plugin, though. I am very unhappy about this fact, as you can probably tell.

    Thanks in advance for any and all assistance with this, Rodolfo. 😀 And to everyone else who may come along and also help!

    1. Oh crap. Looks like I didn’t format one of my sentences properly and the system thought I was telling it to put something else in place of the code I was referencing.

      My comment, edited:
      ‘There is no ‘?>’ there at the end of my child theme’s functions.php file. Now, the file STARTS with an ” exists at the end of my child theme’s functions.php file…. 🙁 ‘

      I was referring to this, what you said here, Rodolfo:
      ‘You can place PHP snippets at the bottom of your child theme functions.php file before “?>” ‘

      🙂

      Hope that helps.

    2. Okay, third time’s the charm. The system still is changing my text LOL…

      My comment, edited agaaain:
      There is no ” ? > ” there at the end of my child theme’s functions.php file. Now, the file STARTS with an ” ” exists at the end of my child theme’s functions.php file…. 🙁

      I was referring to this, what you said here, Rodolfo:
      You can place PHP snippets at the bottom of your child theme functions.php file before ” ?
      > ”

      🙂

      ….if it doesn’t work this time, I’ll just have to hope you understand what the heck I’m trying to say lol. 😀

      1. Hey there 🙂 Lots of questions yes, and unfortunately I can’t give this level of support here via the blog comments. If you’re interested in hiring me, please send me a message via the contact page. Thank you in advance 🙂

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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.