Changing the HTML of notices in WooCommerce

I’m creating a WooCommerce theme from scratch, and I’d really like to change the HTML that wraps the default WooCommerce messages on the Cart and Checkout pages.

I am specifically talking about the default messages that appear in this element, when the cart is updated – or items are removed:

<div class="woocommerce-message" role="alert">
        Your cart has been updated / Product was removed. Undo? 
</div>

I have tried several things;

1. I am overriding the default error.php, success.php and notice.php templates in the templates/notices folder. These, I concluded, were seemingly only used for some of these notifications. My errors use the error template just fine, for example.
2. I tracked, what I thought was the culprit, down to the function woocommerce_output_all_notices in the wc-template-functions.php file. I was almost sure that this was it, since it was the only function that I could find, being called inside the wrapping container (The <div class="woocommerce-notices-wrapper"> element).

The function looks like this:

function woocommerce_output_all_notices() {
    echo '<div class="woocommerce-notices-wrapper">';
    wc_print_notices();
    echo '</div>';
}

It would be logical to think, that the markup is then coming from the wc_print_notices() function.

However, when I look at this function in wc-notice-functions.php… It uses the templates that I mentioned in #1.. ?

What am I doing wrong here? Does anyone have experience with properly altering the markup of these message?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

After talking with some of the WooCommerce people on Slack, I realized that the problem here is probably this pattern, in frontend/cart.js – due to the fact, that my store uses the AJAX functionality that WooCommerce provides.

var show_notice = function( html_element, $target ) {
        if ( ! $target ) {
            $target = $( '.woocommerce-notices-wrapper:first' ) ||
                $( '.cart-empty' ).closest( '.woocommerce' ) ||
                $( '.woocommerce-cart-form' );
        }
        $target.prepend( html_element );

A default, new HTML element seems to be created and prepended to the wrapper when certain store states are met after an AJAX update.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0