How do I display woocommerce message in different places?

1 Views

I want to display the green color “your tee has been added to your cart.” message under “add to cart” button. And I want to display the red message “Please choose product options…” before the “size” I create the attribute. By default, the woocommerce message are displaying at the same place. Is there a way to display them at different places. Please help!

I try to do this
I put the “wc_print_notices” where I want the message to show. It works but “your tee has been added to your cart.” and ” “Please choose product options…” message display at the same place.

Read More
   <?php wc_print_notices(); ?>

And I put this in my function.php 

   remove_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 ); /*Single Product*/

For example,
I want the “Please choose product options…” message display like this. If you click add to bag without choosing size. DON’T choose size so the red message show up.

http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=36029353&category=W_OUTERWEAR&color=004

AND I want the “your tee has been added to your cart.” message display like this. If you click add to bag you will see the add to cart message displaying under the button.

http://alittlemorelikethis.com/collections/wear/products/imagine-maine-anchor-tee-black

Post Views: 1

Related posts

2 comments

  1. I think this will help you. Here is the source

    $(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>');
              }
            });
        }

  2. The function adds a div to the page by a ‘prepend’ on the ‘body’ element. That div is ‘position:fixed’ so it displays at the top left of the viewport and does not move. It covers the whole screen left to right, 20px high. To move the div so it display somewhere else, you would need to prepend it to an element BELOW the element you want it to appear below. If you ‘prepend’ it directly to the “add to cart” button it will appear over top of that button, not under it. And you probably want to delete the width so it’s not site wide. Same applies to the other message you want to move. Got it?

Comments are closed.