If you take a look at most of the serious digital stores you know, 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 shows this to the customer.
In this short post, we will see how to create a popup that shows the customer that a product has been added to the shopping cart.
Displaying a Notification When Adding a Product to the Shopping 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 absolutely 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 absolutely and style it slightly to make it clear and readable using the following CSS:
.addedToCart-msg {
position: absolute;
left: 20px;
background: #fefefe;
padding: 10px 10px;
width: 260px;
font-weight: 500;
display: none;
font-size: 14px;
border: 2px solid #434d52;
top: 100px;
}Triggering the Message We Created 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 other information such as the element (button) you pressed when adding the product.
You can play with this information to interact with the specific button you used to add the product, for example. But in our case, we are simply popping up the element we created earlier on the screen and hiding this element 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 in the WordPress admin interface.
In any case, here is the code you need to add to trigger the element we created when adding a product on the WooCommerce product 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 attached post) in order to see the notification when adding a product on a single product page.
If you need help or have any questions, feel free to ask in the comments…. Good luck!
