Changing the HTML of notices in WooCommerce [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for WordPress Development Stack Exchange.

Closed 10 days ago.

Improve this question

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?

Answer 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.