WooCommerce Visual Hook Guide: Checkout Page

Here’s 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_before_checkout_form', 'woocommerce_output_all_notices', 10 );

add_action( 'woocommerce_checkout_billing', array( self::$instance, 'checkout_form_billing' ) );
add_action( 'woocommerce_checkout_shipping', array( self::$instance, 'checkout_form_shipping' ) );

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

Related content

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent 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. Follow @rmelogli

124 thoughts on “WooCommerce Visual Hook Guide: Checkout Page

  1. Hi Rodolfo,

    Thanks for this great article, i am sure many has been benefited from you by this.

    I was wondering if you have also written article or if you could point me somewhere about the sequence of “action” hooks, e.g before loading checkout page, after submitting checkout page,etc…

    Hope my question is not too confusing!

    Thanks again!

    1. No problem Ken! I guess you’re talking about “event” hooks e.g. “woocommerce_before_pay_action”, “woocommerce_payment_complete”, etc. Not really, but on this website you find many snippets that use them e.g. WooCommerce: Update User Meta After a Successful Order

  2. Is there a way to hook (or filter) the text on the payment button – specifically when Stripe is being used?

  3. I tried many time all the checkout page hooks to flatsome theme, but somehow they don’t work.
    Like I was trying to show total weight of the cart items just before shipping calculator and try with all hooks – https://prnt.sc/sSx2zbD5JkQj

    But all of them display the weight at the top of the checkout form ( https://prnt.sc/TexmoGymwBth ) or sometime twice. – https://prnt.sc/Ikuvbs4IJtmW

    any help ?

    1. Together with the value, you may also need to echo an actual HTML table row with columns, as you’re inside an HTML table there?

  4. I’m designing a WooCommerce Site. Everything is working great but the client wants to move all the billing fields to before/after the payment details.

    I know you can reorder the billing fields, but can you unhook all of them from the usual place and rehook them to before payment ie: woocommerce_checkout_before_order_review?

    Any help would be greatly fully received. Thanks

    1. Maybe it’s easier to move the payment details before the address as opposed to the opposite. Either way you need to be careful as there are many WooCommerce scripts on the checkout and moving components may mess up with them.

      As always, test on staging/development environment and see what happens

  5. Hi Rodolfo

    This is great work. Thank you!
    I’m trying to unhook the coupon box from before the checkout form and rehook to after the billing form however it doesn’t work. Can this only work in certain places on the checkout page?

    1. I believe you can put it anywhere, however the jQuery toggle function needs to be checked as it may be tied with some class that you need to recreate in the new position (hope this makes sense)

  6. Hi Rodolfo,
    Thanks for some great stuff here…
    If was looking for the “customer payment link page” code…
    It’s the link inside a order that are “pending for payment”. I wanted this unik link to be sent in a PENDING PAYMENT email to the client.
    f.eks. the link looks like this: https://mysite.com/checkout/payment/39230/?pay_for_order=true&key=wc_order_UWdhxxxYYYzzz

    Hope that is clear and possible?

    All the best

    Peter

    1. Hi Peter:

      $order->get_checkout_payment_url();
  7. yoo, thanks, this is really useful, thanks!

  8. Hi,
    how can i add dropdown menu here woocommerce_review_order_before_payment.
    Here is my code:

    add_filter( ' woocommerce_review_order_before_payment' , 'dropdown' );
    
    // Our hooked in function - $fields is passed via the filter!
    function dropdown( $fields ) {
         $fields['billing ??']['dropdown'] = array(
            'label'     =&gt; __('dropdown', 'woocommerce'),
        'placeholder'   =&gt; _x('dropdown', 'placeholder', 'woocommerce'),
        'required'  =&gt; false,
        'class'     =&gt; array('form-row-wide'),
        'clear'     =&gt; true,
        'type'      =&gt; 'select',
         'options'     =&gt; array(
            'option 1' =&gt; __('option 1', 'woocommerce' ),
            'option 2' =&gt; __('option 2', 'woocommerce' )
            )//end of options
         );
    
         return $fields;
    }
    

    Dont know the right fields

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

  9. Hi,

    Thank you for this great info.
    I’m trying to rename the Shipping field and the Tax field on the order/checkout page. I was able to rename the Shipping field using ‘woocommerce_shipping_package_name’. Do you know what hook can I use to rename the Tax field?

    Thanks.
    Pushkar

  10. Hi,
    Is it possible to move hooks around in the page?
    For instance, moving woocommerce_before_checkout_form below woocommerce_before_checkout_billing_form.

    Thank you very much
    Diana

    1. Can’t move hooks, but can move what’s hooked with those hooks

  11. Is there a way I could get customer details from Ultimate Member to autofill on Woocommerce checkout fields?

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

  12. Thank you for this article.
    Is there any way to use a hook to call/display the billing details on order review.

    1. Yes, do you mean the “Thank you page”? Try with https://www.businessbloomer.com/woocommerce-add-text-thank-page/

  13. Hi Rodolfo,

    I have 2 websites.

    1.site: visitors will do all the transactions here. Clicking the order button will be directed to the 2nd site (with all order information)
    2.site: the visitor will pay here and will be directed to the 1st site.

    So we will only use site 2 to receive payment. How can I do that?

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

  14. As someone who is just learning how to work with php and editing my checkout page this is insanely helpful! Thanks man.

    I have a question and need guidance. I am attempting to move the “ship to different address form” above the billing information form. But this far I am not able to. I have using the follow snippet which I know is incorrect. Thank you for any guidance you can give.

    remove_action( 'woocommerce_after_checkout_billing_form', 'woocommerce_checkout_shipping', 10 );
    add_action( 'woocommerce_checkout_before_customer_details', 'woocommerce_checkout_shipping' );
    
    1. Hi David, the shipping form is added via:

      add_action( 'woocommerce_checkout_shipping', array( self::$instance, 'checkout_form_shipping' ) );

      So that’s the action you should remove. Unfortunately it has that annoying “self::$instance” and it’s not straight forward

  15. How can I disable the hook that saves billing/shipping details in account’s billing/shipping details?

    Thanks!

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

  16. How could I place an element exactly between the billing_address_1 and billing_address_2 fields?

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

  17. Thin article is helping me A LOT !!! Thanks Rodolfo for your awesome job and dedication.

    1. Yay!

  18. Detailed hooks explanations for woocommerce, thanks Raph,
    But am looking for a function that will submit the form or complete the transaction.

    E.g
    if ($yam == ‘ok’) {
    woocommerce_submit_checkout_button();
    }

    Because i used filter to hide the form and i want when my custom form is submited the woocommerce own should submit too

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

  19. Hi, hope you’re doing well!

    So far I’m truly enjoying this visual guide! But recently I’m having a little issue with what I’m trying to do.

    I want to show some text after the shipping options using “woocommerce_review_order_after_shipping” hook but with no success.

    I’m using the following code:

    add_action( 'woocommerce_review_order_before_shipping', 'add_ship_info',5 );
    
         function add_ship_info() {
          echo '<span>HELLO</span>'  
          ;
    }
    
    1. Hi Charles 🙂 You’re inside a table, so you need to echo a table row and columns

      1. I can apply this hook but my message in span element show twice.what can i do for this

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

  20. Hi, your visual guides are amazing.
    I miss a “Before Ship to a different address checkbox”
    I use oceanWP theme with by steps checkout. The second step begin with this checkbox and i need to put something before. So woocommerce_after_checkout_billing_form don’t work for me.
    Thanks!

    1. Oh, nevermind, Rodolfo, I got it:
      woocommerce_checkout_shipping hook
      Godspeed
      (I’m Chilean and i really like this english expression “Godspeed”)

      1. Nice!

        1. You are like God sent Angel. This is quite useful. Thanks, Rodolfo!

          1. Ah, thanks!

  21. I feel like i love you… for real, i’ve been doing a lot of amazing thing with you code.. Thank You!!! please keep doing this i’ve learn a lot XOXO
    Ciao bellissima

    1. Best comment ever

      1. If I was Rodolfo, I would definitely reply with “Love you too :)”, sir Rodolfo, you are about to lose the chance , haha !

        1. Lol

  22. Thanks for creating this, Rodolfo… excellent visual guide.

    Mark

    1. Thank you! How can I improve it?

      1. It would be nice to have filter hooks also..
        Great content, thank you !

        1. I see, but they’re so many. How could I lay them out?

  23. This saved me a lot of time, thanks!

    1. Cool!

  24. Hello, how can I remove the place order button but just this button because I have a “ask for quote” button before ?
    I just want the customers can ask for quote but not place direct order.
    Thank You

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

  25. Hi,

    I think it’s worth adding you can hook around the terms and conditions checkbox with the following: ‘woocommerce_checkout_before_terms_and_conditions’ and ‘woocommerce_checkout_after_terms_and_conditions’ is also available on the checkout page.

    These are actioned from the /templates/checkout/terms.php.

    1. Good point! I’ll see if I can find time to revise this guide this week. Thank you

  26. Hi bloomer
    i need some hel to display in cart ant checkout something like that, in shipping_class_term description

    If ($shipping_class == ‘X’ and $shipping_country == ‘Y’)
    // output some text…

    Thank you

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

  27. At what point during the Checkout Process is the Cart destroyed?
    I have a function that I am calling from
    add_action( ‘woocommerce_thankyou’, ‘custom_wc_ty’ );
    which keeps complaining
    Fatal error: Uncaught Error: Call to a member function get_cart()
    So I’m assuming that by the time I’m at woocommerce_thankyou’
    that the Cart has been destroyed and my function is dying.
    So where can I make a call ‘after’ Payment Processed yet before Thank You and still have a Cart to talk to ?

    Thanks

    David

    1. Hi David, yes, tha thank you hook runs on the Thank You page, so it’s too late. I’m afraid this is custom work – if you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  28. Hi Rodolfo,

    great topic. Please, could you help me with one thing?

    I’m trying to change position of payment methods just above total price (position woocommerce_review_order_before_order_total).

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

  29. I created a simple plugin to add extra checkbox field to display on woocommerce checkout page. I added to “woocommerce_review_order_before_submit” hook. This field first comes and after a few seconds this section gets refreshed and my extra field get removed. Can you help me to solve this issue.

    1. Did you try with a different hook?

  30. Hello,
    In my checkout page i have three extra fields in “billing detail” section.

    Now i want to do that based on this three field values shipping charge is zero.

    So which hook that i need to use?

    Thanks in advance

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

  31. hello

    i made some customize on checkout page and product page.

    on checkout page . shipping form fields not showing there is just billing form also another problem is Upsells products and related product are disappear.

    i cant find them i dont remember about this customize what i did , How can I solve your problem. Which files should I look for?
    note : i m using child theme, i chaned original functions .php file. but it didnt work . i coundt solve.

    please help me
    thank you

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

  32. 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!

  33. 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!

  34. 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!

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

    1. Of course!

  36. 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 );
        
  37. This is so incredibly useful and a massive time saver. Many Thanks Rodolfo!

    1. Excellent!

  38. 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”

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

  40. 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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        1. Thank you for this article.
          Is there any way to use a hook to call a function when a Coupon is added on the Checkout page?

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

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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