WooCommerce Visual Hook Guide: Cart Page

I’ve put together a visual (yet, you can copy/paste!) hook guide for the WooCommerce Cart Page. If you like this and it is helpful to you, let me know in the comments and I’ll create another one for the checkout, single product page and my account page.

You can find WooCommerce Cart hooks quickly and easily by seeing their actual locations. Great thing is – all you need to do in your functions.php is “add_action(‘place-hook-here’,’your-PHP-function-here’);” and you can place your custom functions anywhere on the WooCommerce Cart Page. Enjoy!

WooCommerce Cart Page [Visual Hook Guide]

Cart

woocommerce_before_cart

 

woocommerce_before_cart_table

    Product Price Quantity Total
woocommerce_before_cart_contents
× Ciara Bow Earrings Gold Test 6 €5,00
2
€10,00
× Isla ring Test product €1,00
1
€1,00
woocommerce_cart_contents

woocommerce_cart_coupon

woocommerce_after_cart_contents

woocommerce_after_cart_table

woocommerce_cart_collaterals

 

You may be interested in…

  •  

    Sale!
    Sadie  rings necklace

    Monthly Product

    €50,00 €5,00

     

    Add to cart

woocommerce_before_cart_totals

Cart Totals

Subtotal €11,00
woocommerce_cart_totals_before_shipping
Shipping

woocommerce_before_shipping_calculator

Calculate Shipping

woocommerce_after_shipping_calculator

woocommerce_cart_totals_after_shipping
woocommerce_cart_totals_before_order_total
Total €18,00
woocommerce_cart_totals_after_order_total

woocommerce_proceed_to_checkout Proceed to Checkout

woocommerce_after_cart_totals

woocommerce_after_cart

 

WooCommerce Cart Default add_actions

// These are actions you can unhook/remove!

add_action( 'woocommerce_before_cart', 'woocommerce_output_all_notices', 10 );

add_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' );
add_action( 'woocommerce_cart_collaterals', 'woocommerce_cart_totals', 10 );

add_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );

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.

111 thoughts on “WooCommerce Visual Hook Guide: Cart Page

  1. Hi there,

    Thanks for your very helpful posts!

    I just have one issue:

    My cart page is not displaying many of the woocommerce hooks. It only displays:
    – woocommerce_cart_totals_before_shipping
    – woocommerce_cart_totals_after_order_total
    – woocommerce_proceed_to_checkout

    Literally every other hook is not displayed!

    The issue arose when I copied cart.php from the woocommerce plugin folder to my child theme folder, but I have since deleted the file in my child theme and the issue still occurs.

    Could you please assist with what would be causing this?

    Many thanks!
    Ben

    1. Hi Ben, thanks so much for your comment! If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi master
    At first thank you for all that hooks visual guide, this is super useful for me

    Is possible to combine checkout page with cart page ? I want add payment options to “woocommerce_cart_collaterals”, and click button redirect to payment page. Any idea ?

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

    On the cross-sell section, is it possible to show the “add to cart button” below the product image, knowing the we do not show it on archive pages?

    Best regards,
    Ricardo Franco

    1. Hi Ricardo 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 can’t begin to tell you how helpful this was. Thank you for taking the time.

  5. How to add an “add to favorite” button to the product row? Prefferably next to the “remove from cart” button.

    1. Do you use a Wishlist or similar plugin?

  6. Hello and thanks for the article. I would like to understand how to insert a shortcode after WOO’s default coupon box “woocommerce_cart_coupon”.
    The short code will contain a second section to enter a second coupon code, intended for the affiliate program.
    Thank you very much, will continue to follow you!

    1. Ciao Andrea, you can add a shortcode via PHP with “do_shortcode()” PHP function

  7. you missed

     woocommerce_cart_actions 
  8. Thank you. This is awesome.

  9. Thank you for the great work you’re doing!
    Please is there a way to remove the order summary after a customer tries to place an order? I mean this ‘woocommerce_review_order_after_submit’. I want them to go straight to the payment processor immediately they tap on place order.
    Thanks in advance for your prompt response.

    1. Doesn’t sound like default WooCommerce. Is maybe a plugin?

  10. Hi Rodolfo

    Thanks, as always, for the fantastic content. Just an FYI that I’ve included a link here on my blog where I am helping users relocate the cart messages. Hope that is ok.

    Best

  11. Very helpful, using visual guides like this helps me edit and style our WC store so much quicker with placement of whatever I need where I need it. The more you can add like this for other pages would be awesome.

    1. Thanks! I have them for all WooCommerce pages already – or did I miss any?

  12. Thanks for your articles.

    Is there any article on js hooks, currently I am trying to hide the `Proceed to Checkout` button , once user calulcate the shipping only then this button will be enabled.

    I am was looking in core files but no-js hook i found which I can listen like `updated_checkout`.

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

  13. hi, Rodolfo Melogli, illustrious one, could you tell me how I can make my shopping cart page of woocommmerce divided into two columns, so that the part of the total cart next to it, as they have in amazon, thanks to be many before hand.

    1. Hi Juan Luis, 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. Hello is there a way to remove the ” Shipping to – ‘City'”
    And the “Change address ” part from the Cart menu.
    Here is an image of what I want to remove
    https://drive.google.com/file/d/1WnFR7_UmVpZyx1Xc1rgMnooBtXLanIXz/view?usp=sharing

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

  15. Excellent! I had been struggling with getting buttons in the right place but solved in a couple of minutes with this guide. Many thanks.

    1. Awesome!

  16. Thank you, very much! Really valuable information.

    1. You’re welcome 🙂

  17. Hi, this article series is great, however, would you be willing to go more into detail? For example here I am missing stuff like “woocommerce_cart_item_name” and so on..

    1. Thanks Kenny, I’ll see what I can do 🙂

  18. Well done Rodolfo.
    Can you please give the snippet to change “Quantity” in woocommerce_before_cart_table. I want to change “Quantity” to “Numbers” in this hook ie existing “Product Price Quantity Total” to “Product Price Numbers Total”.
    Thanks in advance for all such great work.

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

  19. Hello, thanks for the guide.
    Nevertheless I have a problem I cannot find the solution for.
    In my instance of woocommerce, the last entry in the cart pricing list is the tax amount. I want to show the total amount in the last position instead. Where can you change the order of the cart total prices?

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

  20. I just found treasure here.. thank you Rodolfo. One question how to remove padding/ margin below breadcrumb and Before cart. Again, Thank you Rodolfo

    1. Hello Brigitte – thanks so much for your comment! You’ll need custom CSS for that 🙂

  21. I am using a plugin which gives graphic variations and I want the variation to show instead of the product image, any idea how this can be achieved?

    1. Hey Mark, 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. The variation plugins I have seen usually take care of this. Have you already added different featured images for each variation?

        1. And by the way, WooCommerce allows you to set a featured image for each variation now, so maybe you don’t even need a plugin

  22. Such a great overview, it helped me a lot!

  23. Hello, the code works fine, could you tell us how to add a space before starting the hook content? the text we give starts only from the hook, we need a space after the hook for proper alignment and better visual appearance!

    1. Hey Malar, thank you for your comment! You can echo any HTML, so try echo a “nbsp” to create a space 🙂

    2. alright, thank you 🙂 Tried using {cart_contents} in email but it is not pulling the data

  24. Thanks – just applied one of the hooks on a job, and have bookmarked this page for future reference.

  25. You are as usual a “go to” when it comes to Woo customization, but i can’t find a way to move the SHIPPING CALCULATOR. I need it either below the Cart Total title or just before the Checkout button. Would that work? What organ can i donate for this, as money is kinda short this days :)) ?!?

    1. Hey B, thanks for your comment! You probably need to use a “filter” for that, that’s all I can suggest 🙂

    2. If a filter doesn’t work, you may have to do it the old-fashioned way and edit the template file.

  26. That’s great !!! Bookmarking it to save my life in the future.

  27. Worked great! Thak you 🙂 🙂

  28. Hi Rodolfo,
    I want to remove the link on the product thumbnail and the product name in the cart page. I used one of your snippets for the same purpose on the shop page, which worked fine, but still don’t understand how to adjust this one to work on the cart page as well. Any suggestions?
    Kind regards, Johan

    1. Hey Johan, thanks for your comment! Unfortunately this is custom work – however you can use this as inspiration: https://businessbloomer.com/woocommerce-remove-permalink-product-order-table/

  29. Hi

    I have tried to add visual hook php code but that isn’t working in storefront child theme i cant see any change in it also it the same case when i trying to add php code cart and checkout page it the same problem

    1. Pankaj, thanks for your comment! What code did you use?

  30. How would I move the Coupon field and button to ‘woocommerce_cart_totals_before_order_total’?
    Thanks, will

    1. Will, thanks for your comment! Have you watched the Cart Customization tutorial? https://businessbloomer.com/woocommerce-visual-hook-guide-cart-page/#comment-25415

  31. It is probably me but I don’t understand.
    What do you mean with ,’your-PHP-function-here’);” ?

    I want to make my cart page a bit more professional looking.

    1. Hey Patrick, thanks for your comment! I recommend you watch this video lesson, it should help: https://businessbloomer.com/customize-cart-page-woocommerce/

  32. Hi, Rodolfo

    I used remove_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cart_totals’, 10 ); to remove cart totals but nothings happen. I would like to remove that and place below the cart_content same cart layout you use in the video tutorial.

    1. Hey, thanks for your comment! It could be that your theme is already overriding that call, so I’m afraid this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  33. Rodolfo, your visual hook guides have been a life saver for me. I have a question though. I’m using these hooks to add content above the cart, however I notice that it doesn’t work if the cart is empty. Are there hooks specifically for empty carts?

    1. That’s an awesome question Jason! So good that I decided to write a tutorial about it: https://businessbloomer.com/woocommerce-add-content-empty-cart-page/ Hope this helps!

  34. WOW!!! are you The best woo commerce Teacher Ever.
    Can help with a custom checkout gateway ?
    That will be A great Piece

    1. Ahah thanks Paulem, your feedback is much appreciated! Cool, I will put “custom gateway” on my to-do list 🙂 Thank you!

  35. thank you so much

    1. You’re welcome Rahim! 🙂

  36. great guide,, i have questionshow to fix the pay button ?

    1. Hello Arya, thanks for your comment. I’m not sure I entirely understand your point, maybe send me a screenshot to explain. Cheers!

      1. where i send screenshot Mr. rodolfo ?
        cannot post image this here
        thanks for the reply,,i’m very happy

        1. Hey Arya, you can upload screenshots to Dropbox, Screencast.com or similar websites. Then, they’ll give you a link you can paste in a blog comment. Hope this helps!

  37. Thank you so so much. I find myself returning to your site time after time to refer to your guides. Thank you so so much

    1. This is excellent feedback, much appreciated Ewan! Thank you 🙂

  38. Thank you soo much! This guide is soo usefull!

    1. Thank you so much Mick! 🙂

  39. how to remove x(Remove this item) and that column from cart page and replace it under product name in woocommerece cart page

    1. Thanks for your comment Amit! I have an article that might partially help you: https://businessbloomer.com/woocommerce-hide-column-cart-table/.

      In regard to adding the “X” under the product title, unfortunately this is custom development work and I cannot provide this solution on the blog right now. I will add it to my to-write list but I cannot guarantee I will be publishing this before 2-3 months.

      If you would like to get a quote for the fix, feel free to go here to get in touch.

      Thanks for your understanding!

      ~R

  40. This is great, thanks!

    1. You’re welcome Jason 🙂

  41. Hi Rodolfo,

    Great articles you have released for everyone. They helped me a lot in my projects. I also attended your last webinar. Waiting for the next one. Thanks.

    1. Awesome! Thank you so much Manas 🙂

  42. So useful – thankyou 🙂

  43. Thank you so much man, this type of visual presentation really helpful for every one. Thank you so much again.

    1. Thank you Vishal 🙂

  44. very very nice

    Thank you !

    1. You’re very welcome Curtis – thanks for sharing your feedback 🙂

  45. A huge THANKS! 🙂
    (I’ve figured out, I wish I could find this before…)

    1. Awesome 🙂 Thank you so much TeeCee!

  46. Please do this for the checkout page aswell 🙂

    1. Thank you Jan! Working on it 🙂

  47. Awesome resource, you filled a special need! Single Product pretty please with sugar on it!

    1. Ahah thanks again Pam, really appreciate your feedback! Single Product (variable product) will be published tomorrow. Feel free to join the newsletter so that I can notify you when the other pages are published as well. Talk soon 🙂 ~R

  48. This is a terrific guide! Thank you so much!!!!

    1. Awesome Patty 🙂 Thanks so much for your feedback!

  49. Nice! Excellent job!
    Especially because it’s visual, it’s becomes much more clear where the hooks show up.

    Looking forward to the single page 🙂

    1. Brilliant! Thanks so much for your comment 🙂

  50. Well done Rodolfo, this is a fantastic resource for woo lovers 😀

    1. Thank you Mikel! Your feedback is invaluable 🙂

  51. Love this guide! Can’t wait for the entire suite 😀

    1. Thanks so much Meagan! Glad to know people loved this. I’m so happy 🙂 I’ll keep in touch!

  52. Great guide, feel free to do more of these 🙂

    1. Thank you so much Jan! Keep in touch, as more visual guides will come in the following days! ~R

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

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. 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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.