Show a Message After Product is Added to Cart in WooCommerce

If you take a look at most serious digital stores, you will see that when a product is added to the shopping cart, there is some indication that the product has been added. Whether it’s a text message on the screen, a change in color, or any other visual change that signals this to the customer.

In this short post, we will see how to create a popup notification that shows the customer a product has been added to the shopping cart.

Displaying a Notification When Adding a Product to the Cart

As a start, let’s add the element that displays the message on the screen. This can be done in several ways and using any hook you choose, but in our case and in order not to complicate matters, we will simply add the element to the footer of the site and position it where we want.

To do this, add the following code to your functions.php file in your theme (preferably, of course, use a child theme):

<?php
//****** DON'T COPY ABOVE THIS LINE ******//

function savvy_add_to_cart_msg() { ?>
    <div class="addedToCartMsg" style="display: none;">
        The product has been added to the cart...
    </div>
    <?php
}
add_action( 'wp_footer', 'savvy_add_to_cart_msg' );

Now let’s position it and style it to make it clear and readable using the following CSS:

.addedToCartMsg {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background: #fefefe;
    padding: 10px 15px;
    width: 260px;
    font-weight: 500;
    display: none;
    font-size: 14px;
    border: 2px solid #434d52;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

Triggering the Message When Adding a Product

At this stage, we’ll target the event that occurs when a product is added to the cart using JavaScript. This event returns, among other things, information about the product that was added and the element (button) that was clicked.

You can use this information to interact with the specific button, for example. But in our case, we are simply showing the element we created earlier on the screen and hiding it after a few seconds.

It’s important to note that this code will not work if the “Enable AJAX add to cart button on product archive pages” option is not checked in your store settings. You can find this setting under WooCommerce > Settings > Products.

Here is the code you need to add to trigger the notification when adding a product on the WooCommerce archive pages:

(function($){
    $('body').on( 'added_to_cart', function(e, fragments, cart_hash, this_button){
    
        // console.log('added_to_cart');
        // console.log(fragments);
        // console.log(cart_hash);
        // console.log(this_button);
    
        var cartMsg = $('.addedToCartMsg');
        cartMsg.fadeIn(400);

        setTimeout(function () {
            cartMsg.fadeOut(400);
        }, 1500);
    });

})(jQuery);

Simply enqueue this code in the footer of your site and you will see a result similar to the one shown in the live example above (don’t forget to add the opening and closing <script> tags).

By the way, if you enabled adding a product to the cart using Ajax on a single product page, you will need to modify this code (and the code in the linked post) in order to see the notification when adding a product on a single product page.

Using WooCommerce Blocks?

If your store uses WooCommerce Blocks (the block-based cart and checkout), the jQuery added_to_cart event may not fire. WooCommerce Blocks dispatch a native DOM event called wc-blocks_added_to_cart instead. You can listen for it like this:

document.body.addEventListener('wc-blocks_added_to_cart', function() {
    var cartMsg = document.querySelector('.addedToCartMsg');
    cartMsg.style.display = 'block';

    setTimeout(function() {
        cartMsg.style.display = 'none';
    }, 1500);
});

This approach uses vanilla JavaScript and doesn’t require jQuery at all, making it a lighter alternative for block-based stores. To learn more about WooCommerce hooks and events, check out our guide to WooCommerce hooks.

FAQs

If you need help or have any questions, feel free to ask in the comments. Good luck!