WooCommerce Show Product Added to Cart Notification as Popup

Looking for a cool way to prompt the customer once they are done with selecting their product and add it to their cart? Look no further!

WooCommerce gives you countless ways to design your online store to the best of your desires. One simple way to attract more customers is to make their experience great.

Prompting buyers with creative pop-ups and messages is a good way to make customers enjoy using the website.  In the following tutorial, we will be looking at a way to pop-up a message whenever a customer adds an item in the cart.

Now doing so will, one, make the buyers feel at ease and, two will make the checkout quicker and will increase the chances of the product being actually checked-out instead of being in the cart for eternity.

Below is a code that you will have to add in order to get this functionality on your website.

You will have to add the code to Theme functions. Just go to Dashboard > Appearance > Theme Editor > Theme Functions and add the following code to the end of the existing code and click Update File

 

add_action('wp_footer', 'single_added_to_cart_event');
 
function single_added_to_cart_event()
 
{
 
    if( isset($_POST['add-to-cart']) && isset($_POST['quantity']) ) {
 
        // Get added to cart product ID (or variation ID) and quantity (if needed)
 
        $quantity   = $_POST['quantity'];
 
        $product_id = isset($_POST['variation_id']) ? $_POST['variation_id'] : $_POST['add-to-cart'];
 
 
        // JS code goes here below
 
        ?>
 
        <script>
 
        jQuery(function($){
 
            console.log('added_to_cart');
 
            alert('added_to_cart');
 
        });
 
        </script>
 
        <?php
 
    }
 
}

 

Output:

Leave a Reply