Updated: 02 Feb 2020 – additions at bottom
This is something that has frustrated me a LOT with Elementor (and god I LOVE Elementor) and I think they should include the cart message as a widget when building product pages. It cant be too difficult.
With this nice simple fix, you will be able to move the position of the “X product successfully added to cart” message when using Woocommerce and Elementor.
Step 1 – Let’s get started. This is what it looks like by default when you have created your store, added products and then you add one of your products to the cart. See where the message appears
See how it a) places itself above the main page header i have in place, above ALL content on the page. It looks so unsightly and quite frankly, awful. So, lets do something to fix that eh?!
First thing to do, is to unhook the message completely from automatically appearing. To do that, we use this little snippet. Place this in the functions.php file in your child theme (please use child themes!).
// REMOVE ADD TO CART MESSAGE
remove_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
Step 2 – Now that we’ve removed the default message, if you add an item to your cart, you will see no message at all. So now we need to re-insert the message where we want.
You will need this shortcode:
[shop_messages]
Now, open up the “single product” template that you have created for your individual product pages. If you havent created one, do it. This next part is personal, but for the sake of this tutorial, I have added the message just above the product itself, containing it within the standard content width. See below:
Now, save the product template, and you won’t see any difference in layout. However, if you add a product to the cart, look where the message now appears 👇 (yes I know its small – soz but GIF’s get large)
If you have any comments or questions, drop them below. If you need any Elementor help, get in touch.
Update – Feb 2020
I’ve had a few comments and emails about the “cart” page and it not working on that page. That is simply because the message is in a different hook. If you want it to appear somewhere else on the cart page, you need to do 2 things.
1. Remove
2. Re-add
Both done via actions. Super simple to do. Let’s see…this piece of code will remove the cart notice.
// REMOVE UPDATED CART MESSAGE
remove_action( 'woocommerce_before_cart', 'woocommerce_output_all_notices', 10 );
You can of course just leave it with only the code above and it will just not show a message at all, but simply update the totals (works nicely in my opinion).
Then, you have options as to where you want to re-insert. This fantastic article by Rodolfo Melogli shows you where you can re-insert.
https://www.businessbloomer.com/woocommerce-visual-hook-guide-cart-page/
Simply look at this code and look for the hook (at the start of the brackets). You can see that in my demo it is “woocommerce_after_cart_table”. You can choose any location on that article to put the message using this code.
// RELOCATE UPDATED CART MESSAGE
add_action( 'woocommerce_after_cart_table', 'woocommerce_output_all_notices', 10 );
So a nice, simple, plugin-free way to move the cart message when using Elementor.
If you need any Elementor based help, feel free to drop us a message via the contact form here and we will try our best to help!
40 Responses
Hi,
By any chance, is it possible to disable the “view cart” button in a notice?
Thanks in advance for your answer
Hi Jimmy
Yes, you can simply use this bit of custom CSS to achieve that
.woocommerce-message a.button.wc-forward.wp-element-button {
display: none;
}
Thank you, thank you and….. THANK YOU! 🙌
Works very well!
Worked like a charm. Many Thanks!
Hi please, this is now not function? Help me?
Hi Pavel. Its still working for me, however it may be a good idea to wait just a little longer as this function should be appearing in an upcoming Elementor release according to their latest Beta release.
Bless you. I have struggled to find a solution to this for several Elementor+WooCommerce sites. It’s maddening, and I don’t understand why Elementor hasn’t yet implemented a proper solution. But this works, and works beautifully. Thank you!
Hi Collin. Glad you found it useful – thanks for the kind words.
Hopefully it wont be too long and the Ele team will bring it natively.
I have this working which is great, but how do it get the page to reload making sure the error is loaded as the top of the page.
To clarify, i moved the warning messages to appear down by my add to cart form which is about 70 % way down the actual single product page.
So when you try and submit the form without ticking teh Terms and conditions checkbox it triggers a warning, but it is reloading teh page back to teh top when I’d like it to stay down where the error message appears.
Interesting challenge, not one that i’d thought about to be honest.
I guess there will be some JS somewhere, where WooCommerce is defining the “Scroll To Top” function. Which, is cool but we’d need to alter that in order to get it to scroll to the error position.
I don’t have the time to look at a remedy at the moment, but a quick google reveals a “scroll_to_notices” function that we could perhaps amend.
Have a look – if you find a solution be good to hear it. Otherwise I will try and take a look in the coming weeks
I was searching for the same. AJAX button add to cart on the product page is the solution.
Found a plugin https://wordpress.org/support/plugin/woo-ajax-add-to-cart/reviews/
No reloads anymore and fast. Works great!
Take a look over here: https://banketbakkerijverhallen.nl/winkel/hazelnootslagroom/ for an example….
PErfect fix. thanks for that! And you’re absolutely right: can’t be too hard to set that up in the theme builder as a block. Divi builder hast too – but I prefer Elementor.
Excellent – glad it helped you out – I agree it would be great to have as an Elementor widget when creating product pages
Hi! How are you? It worked very well for me. Only it did not work for me when the cart is updated, it continues to appear at the top in the header. Do you know how to change places?
Thank you!
Hi Nahul. I am good, hope you are good too! For that, you would need to remove the notice using remove action and then re-add it using add_action. If you know where you want it adding, I can let you know the code you will need for the cart page.
Well, I’ll show you. The web is not finished and adapted yet, but the problem is when you add a product to the cart, and then in the cart you change the quantity of the product and update. It shows you the notification above the header, and it should go to the top of the cart table.
The page is in Spanish, but it is understood.
https://texflower.com/tienda
Thanks!
See the updated blog post above – it shows you how to change this on the cart page (hopefully)
Hi Nahuel
I’ve actually updated the blog post above to include the Cart page element – excellent point made and hopefully the updated post will help you too.
Brilliant! I could solve it with what you uploaded to the blog.
Thank you very much again.
How could you do it? I have the same problem and I haven’t succeed :_(
Have you followed the blog post now it has been updated? What problem are you having?
Thanks for the great tutorial!
is there a way to set how long the message displays say like 5 seconds before it fades away or to add an ‘X’ button to hide the message after it appears simular to any other popup?
Thanks again
You could use jquery to hide after a certain amount of time, sure. Here is a handy link 🙂
Stack Overflow Link
Thanks for getting back to me so quick! do you know where i would have to put that code? do you know if there is another way? i tried using the JS code but for somereaso it messed with some other code on my site – is there a way to add a ‘X’ button simular to a pop up or code it with css to disspear when you click anywhere on the site
Thanks again for the great tutorial!
Of course, possibilities are endless but a quick Google search brings me this, which looks like it has plenty of options for what you want
https://wordpress.org/plugins/popup-notices-for-woocommerce/#description
This seems to be a great solution but it isn’t working for me. In fact, the [shop_messages] shortcode appears at the new location that I place it but the “XXX product added to the cart” message isn’t showing up but for example if I remove a product from the cart, the “undo” message does appear at the new location. Any thoughts on this? I’ll really really REALLY appreciate the help.
Hey Ale,
What version of Ele and Pro are you running. I have it set up with latest versions of everything (Ele, Pro, WooCoomm etc) and its working perfectly here without any issues at all…
Happy to point you in that direction if needs be but let me know on the above and i’ll see.
Have you tried the obvious “deactivate all plugins” whilst trying it (apart from Elementor of course!)
Thank you! This is a really nice & clean solution! 🙂
You’re welcome Branka – I’m glad that you found it useful
Thanks for this … but how can we customize the message format like fonts, colors etc..
You’d need to target that using CSS.
For example, this could be some styling changes that you could run, but just change the colours etc.
/*background, line-height adjustment and border */
.single-product .woocommerce-message {
background-color: #eaeaea;
border: 1px solid #ccc;
line-height: 2;
}
/* the "view cart" button */
.single-product .woocommerce-message a.button.wc-forward {
background-color: #F61358;
color: white;
letter-spacing: 1px;
}
Hi,
How do you reinsert a message like [shop_messages] .
Do i need a widget for that? I’m using elementor and don’t have a clue of how to insert a message like this.
I got rid of the message but the rest doesn’t seem to work.
Thanks in advance
Hey Oli,
You will need to use the shortcode widget.
When you insert the shortcode widget just paste the shortcode in my post and then save the template and it works really nicely.
Let me know how you get on
Thank you for this tutorial. I’d been looking at vastly overcomplicated ways to achieve this on StackOverflow, but this cut straight to the chase and kept it simple. Thank you
Hi James. You are welcome, glad it was useful.
Excellent work!
I was so frustrated exactly with same issue but this saved a lot of time!
Thanks a lot!
Hi Mohan – Great to hear you found it useful and saved you some time.
This is awesome – thanks so much. I’d like the ability to edit these messages within Elementor itself but this is a cool alternative.
Thanks
Hi Patrick – I agree – hopefully one day the option will be available within Elementor itself. Good to hear it worked for you
Great, simple, easy to follow tutorial which would help out a lot of people.
Great job!