show woocommerce messages in overlay div or tooltip without page refresh

1 Views

I am trying to get rid of the redirect/reload when the user is adding a product or gets a info message in my woocommerce shop. I just want to show the “added to cart” message in a tooltip or overlay div and let them continue shopping without renavigate to the shop.

AJAX add to cart is enabled

Read More

so my question is:
what can I do to display this messages without refreshing the whole page?

EDIT: maybe useful for anyone, heres my FINAL CODE: 

$('.add_to_cart_button, .single_add_to_cart_button').click(function(e) {
                var produkt_id;
                if ($(this).attr('data-product_id') == undefined) {
                    produkt_id = $('input[type=hidden]').val();
                } else {
                    produkt_id = $(this).attr('data-product_id');
                }


                var amount;
                if ($(this).hasClass('single_add_to_cart_button') == true) {
                    if ($('.qty').val() !== '1') {
                        amount = $('.qty').val();
                    }
                    console.log(amount + ' single_add_to_cart_button');
                }
                else {
                    amount = '1';
                    console.log(amount + ' add_to_cart_button');
                }




                function addToCart(produkt_id) {
                    $.ajax({
                        type: 'POST',
                        url: '?add-to-cart=' + produkt_id,
                        data: {'product_id': produkt_id,
                            'quantity': amount},
                        success: function(response, textStatus, jqXHR) {
                        // callback

                        }/*,
                         dataType: 'JSON'*/
                    });
                }
                e.preventDefault();
                addToCart(produkt_id);
   });
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Do you mean something like this:
    if you do the function “addedToChart” it will do a ajax and creat a message at top of the page

    $(document).on('click','.add_to_cart_button',function(e) {
    e.preventDefault();
    addedToCart($(this).data('product_id'));
});
    function addedToCart(id){
        $.ajax({
          type: "POST",
          url: "some.php",
          data: { product_id: id},
          success: function(){
            $('body').prepend('<div style="position:fixed; height:20px; width:100%; background-color:red; text-align:center;">Added to chart</div>');
          }
        });
    }