I’ve put together a visual hook guide for the shortcode-based WooCommerce Cart Page (you can find the block version here).
Please note – as of the date above, you can’t add any customization to the Cart Block yet (unless you find a workaround), so you’d better revert to the shortcode version in case you’re willing to personalize the Cart page, move elements around, hide default elements, add custom content, etc.
So, with this copy/paste hook document you can find WooCommerce Cart hooks quickly and easily by seeing their actual location.
The great thing is – all you need to do in your custom code is “add_action(‘hook_name’,’custom_function’);” and you can place your personalized content anywhere on the WooCommerce Cart Page.
Enjoy!
WooCommerce Cart Page [Visual Hook Guide]
Cart
woocommerce_before_cart_table
Product | Price | Quantity | Total | ||
---|---|---|---|---|---|
woocommerce_before_cart_contents | |||||
× | Test 6 | €5,00 |
2
|
€10,00 | |
× | Test product | €1,00 |
1
|
€1,00 | |
woocommerce_cart_contents | |||||
woocommerce_cart_coupon |
|||||
woocommerce_after_cart_contents |
woocommerce_after_cart_table
You may be interested in…
-
Sale!
Monthly Product
€50,00€5,00
woocommerce_before_cart_totals
Cart Totals
Subtotal | €11,00 |
---|---|
woocommerce_cart_totals_before_shipping | |
Shipping |
woocommerce_before_shipping_calculator 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 );
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,
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
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?
Hi Anne, they’re standalone pages, so maybe you’ve applied a different page template?
Thank you for your fast answer. Where could have the different page template have been applied? What would the data be called?
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
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
Can I have any context please? Also please share your code. Thank you
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
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!
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 ?
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!
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
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!
I can’t begin to tell you how helpful this was. Thank you for taking the time.
Cool
Great!
How to add an “add to favorite” button to the product row? Prefferably next to the “remove from cart” button.
Do you use a Wishlist or similar plugin?
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!
Ciao Andrea, you can add a shortcode via PHP with “do_shortcode()” PHP function
you missed
Thanks!
Thank you. This is awesome.
You’re welcome!
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.
Doesn’t sound like default WooCommerce. Is maybe a plugin?
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
Great!
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.
Thanks! I have them for all WooCommerce pages already – or did I miss any?
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`.
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!
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.
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!
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
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!
Excellent! I had been struggling with getting buttons in the right place but solved in a couple of minutes with this guide. Many thanks.
Awesome!
Thank you, very much! Really valuable information.
You’re welcome 🙂
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..
Thanks Kenny, I’ll see what I can do 🙂
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.
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
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?
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
I just found treasure here.. thank you Rodolfo. One question how to remove padding/ margin below breadcrumb and Before cart. Again, Thank you Rodolfo
Hello Brigitte – thanks so much for your comment! You’ll need custom CSS for that 🙂
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?
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
The variation plugins I have seen usually take care of this. Have you already added different featured images for each variation?
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
Such a great overview, it helped me a lot!
Awesome 🙂
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!
Hey Malar, thank you for your comment! You can echo any HTML, so try echo a “nbsp” to create a space 🙂
alright, thank you 🙂 Tried using {cart_contents} in email but it is not pulling the data
Thanks – just applied one of the hooks on a job, and have bookmarked this page for future reference.
Brilliant 🙂
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 :)) ?!?
Hey B, thanks for your comment! You probably need to use a “filter” for that, that’s all I can suggest 🙂
If a filter doesn’t work, you may have to do it the old-fashioned way and edit the template file.
That’s great !!! Bookmarking it to save my life in the future.
Fantastic 🙂
Worked great! Thak you 🙂 🙂
🙂
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
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/
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
Pankaj, thanks for your comment! What code did you use?
How would I move the Coupon field and button to ‘woocommerce_cart_totals_before_order_total’?
Thanks, will
Will, thanks for your comment! Have you watched the Cart Customization tutorial? https://businessbloomer.com/woocommerce-visual-hook-guide-cart-page/#comment-25415
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.
Hey Patrick, thanks for your comment! I recommend you watch this video lesson, it should help: https://businessbloomer.com/customize-cart-page-woocommerce/
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.
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
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?
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!
WOW!!! are you The best woo commerce Teacher Ever.
Can help with a custom checkout gateway ?
That will be A great Piece
Ahah thanks Paulem, your feedback is much appreciated! Cool, I will put “custom gateway” on my to-do list 🙂 Thank you!
thank you so much
You’re welcome Rahim! 🙂
great guide,, i have questionshow to fix the pay button ?
Hello Arya, thanks for your comment. I’m not sure I entirely understand your point, maybe send me a screenshot to explain. Cheers!
where i send screenshot Mr. rodolfo ?
cannot post image this here
thanks for the reply,,i’m very happy
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!
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
This is excellent feedback, much appreciated Ewan! Thank you 🙂
Thank you soo much! This guide is soo usefull!
Thank you so much Mick! 🙂
how to remove x(Remove this item) and that column from cart page and replace it under product name in woocommerece cart page
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
This is great, thanks!
You’re welcome Jason 🙂
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.
Awesome! Thank you so much Manas 🙂
So useful – thankyou 🙂
Thank you Chris!!!
Thank you so much man, this type of visual presentation really helpful for every one. Thank you so much again.
Thank you Vishal 🙂
very very nice
Thank you !
You’re very welcome Curtis – thanks for sharing your feedback 🙂
A huge THANKS! 🙂
(I’ve figured out, I wish I could find this before…)
Awesome 🙂 Thank you so much TeeCee!
Please do this for the checkout page aswell 🙂
Thank you Jan! Working on it 🙂
Awesome resource, you filled a special need! Single Product pretty please with sugar on it!
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
This is a terrific guide! Thank you so much!!!!
Awesome Patty 🙂 Thanks so much for your feedback!
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 🙂
Brilliant! Thanks so much for your comment 🙂
Well done Rodolfo, this is a fantastic resource for woo lovers 😀
Thank you Mikel! Your feedback is invaluable 🙂
Love this guide! Can’t wait for the entire suite 😀
Thanks so much Meagan! Glad to know people loved this. I’m so happy 🙂 I’ll keep in touch!
Great guide, feel free to do more of these 🙂
Thank you so much Jan! Keep in touch, as more visual guides will come in the following days! ~R