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!

Related Articles

40 Responses

  1. Hi,

    By any chance, is it possible to disable the “view cart” button in a notice?

    Thanks in advance for your answer

    Reply

    1. 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;
      }

      Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

    1. Excellent – glad it helped you out – I agree it would be great to have as an Elementor widget when creating product pages

      Reply

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

    Reply

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

      Reply

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

        Reply

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

      Reply

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

    Reply

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

        Reply

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

    Reply

    1. 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!)

      Reply

    1. 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;
      }

      Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

    1. Hi Patrick – I agree – hopefully one day the option will be available within Elementor itself. Good to hear it worked for you

      Reply

Leave a Reply

Your email address will not be published.