Elementor – Changing where the Woocommerce Cart messages appear

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

This is something that has frustrated me a LOT with Elementor (and god i LOVE Elementor) and i think they should include it 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)

So a nice, simple, plugin-free way to move the cart message when using Elementor.

If you have any comments or questions, drop them below. If you need any Elementor help, get in touch.

7 Responses

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *