Posted on

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

Product Total
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 );

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.

21 thoughts on “WooCommerce Visual Hook Guide: Checkout Page

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

  2. 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?

  3. 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

  4. 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

  5. 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 🙂

  6. 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

  7. 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 🙂

  8. 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

  9. 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. 😀

    3. 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'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.