Automatically Hiding the “Product Added to Cart” Message in WooCommerce

In a recent Business Bloomer Club discussion, a member asked how to remove the “Product has been added to your cart” message after a few seconds rather than keeping it displayed indefinitely. This notification, while informative, can sometimes disrupt the shopping flow, especially when customers add multiple items to their cart.

Instead of permanently disabling it, an ideal approach is to automatically hide the message after a few seconds using JavaScript. Here’s a simple way to implement this timed message removal and improve the user experience in your WooCommerce store.

JavaScript Solution for Timed Message Removal

Using JavaScript allows you to set a timer to hide the WooCommerce message after it’s displayed. This approach doesn’t interfere with WooCommerce’s default behavior of displaying the message but simply adds a timeout function to remove it after a set period.

Steps to Implement JavaScript for Message Removal

  1. Add JavaScript to Your Site: Use the following code to target the WooCommerce cart message and hide it after three seconds.
   // This JavaScript code hides the WooCommerce cart message after 3 seconds
   setTimeout(function() {
       const message = document.querySelector('.woocommerce-message');
       if (message) {
           message.style.display = 'none';
       }
   }, 3000); // 3000 milliseconds = 3 seconds
  1. Adjust Timing as Needed: Change the 3000 milliseconds in the code above to your desired time. For example, set it to 5000 for a 5-second delay.
  2. Where to Add the Code: Add this JavaScript code to your theme’s footer.php file or through a custom JavaScript snippet plugin for WooCommerce.

This solution allows the message to be displayed briefly, ensuring that customers notice it, while automatically removing it after a short period.

Alternative: Close Button for Manual Dismissal

If you’d like customers to control when the message is hidden, adding a close button is a useful alternative. A close button provides a more interactive option, giving users the choice to dismiss the message themselves. Learn more about adding a close button for WooCommerce notices in Business Bloomer’s guide.

Why Use a Timed Message?

A timed message keeps the shopping experience clean and encourages customers to continue browsing without clutter. Automatically hiding notifications reduces visual interruptions, especially for customers adding multiple items to their cart in quick succession. This approach is simple to implement and ensures that the WooCommerce store feels polished and user-friendly.

Related content

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

Reply

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