Changing the HTML of notices in WooCommerce

Question

Changing the HTML of notices in WooCommerce

p01ntbr34k

2021年5月6日 03:03

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;

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

Topic woocommerce-offtopic notices functions e-commerce templates Wordpress

Category Web

p01ntbr34k · Accepted Answer · 2021年5月6日 03:03

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.

Changing the HTML of notices in WooCommerce

About