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

Related content

  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
  • WooCommerce: “You Only Need $$$ to Get Free Shipping!” @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. Here’s how we show a simple message on the […]
  • WooCommerce: Cart and Checkout on the Same Page
    This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
  • WooCommerce: Weight-Based Shipping Methods
    With WooCommerce you get 3 default shipping methods: Flat Rate, Free Shipping, Local Pickup. For each one you can define a cost, however there is no way to set up some “weight” restrictions. So, what if you want to display a rate for orders below 10 kg, and another shipping rate for orders above that […]
  • WooCommerce: Hide Shipping Method If Shipping Class Is In The Cart
    Our goal is to check if a Product with a specific Shipping Class is in the Cart, and consequently disabling a shipping rate such as Free Shipping if this is true. This is super useful when there are multiple items in the cart and you don’t want to give free shipping for certain orders for […]

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

119 thoughts on “WooCommerce Visual Hook Guide: Cart Page

  1. Thank you for your great effort for us,
    can you help me understand the reason behind, following hooks according to your visual guide should be inside cart totals table, but they are getting printed before/above cart totals table,

    here’s the hooks, which are not at the expected positions,

    “woocommerce_cart_totals_before_shipping”
    “woocommerce_cart_totals_after_shipping”
    “woocommerce_cart_totals_before_order_total”
    “woocommerce_cart_totals_after_order_total”

    your response will help me understand,

    1. Because you also need to use some HTML table markup, as those hooks are inside the HTML table. So you need to print rows, columns, etc. Just echoing some text will put it outside the table

  2. Does the Woocommerce Cart use the same woocommerce.php as the other pages? Because my cart site and my checkout site have different headers than the other pages. Is there another php data?

    1. Hi Anne, they’re standalone pages, so maybe you’ve applied a different page template?

      1. Thank you for your fast answer. Where could have the different page template have been applied? What would the data be called?

        1. Usually in the “Edit Page” page, in the right sidebar, you can pick templates. But this is depending on your theme, so each theme behaves differently

  3. At the time I request the hook woocommerce_cart_contents does not send me the information that is inside the cart, the information is null

    1. Can I have any context please? Also please share your code. Thank you

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

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

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

  7. I can’t begin to tell you how helpful this was. Thank you for taking the time.

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

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

  10. you missed

     woocommerce_cart_actions 
  11. Thank you. This is awesome.

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

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

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

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

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

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

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

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

    1. You’re welcome 🙂

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

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

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

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

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

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

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

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

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

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

  30. Worked great! Thak you 🙂 🙂

  31. 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/

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

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

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

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

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

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

  38. thank you so much

    1. You’re welcome Rahim! 🙂

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

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

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

    1. Thank you so much Mick! 🙂

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

  43. This is great, thanks!

    1. You’re welcome Jason 🙂

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

  45. So useful – thankyou 🙂

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

    1. Thank you Vishal 🙂

  47. very very nice

    Thank you !

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

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

    1. Awesome 🙂 Thank you so much TeeCee!

  49. Please do this for the checkout page aswell 🙂

    1. Thank you Jan! Working on it 🙂

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

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

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

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

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

    1. Thank you Mikel! Your feedback is invaluable 🙂

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

  55. 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? 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 *