Elementor – Changing where the Woocommerce Cart messages appear
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!