relocate woocommerce notices/messages on Cart page

Question

Coupon notices are displayed by updating cart dynamically using JavaScript. Moving wc_print_notices function will not take effect because all logic is placed in the cart.js file. You have to deregister and dequeue WooCommerce cart.js file and add your own modified version.

/**
 * Deregister and dequeue WooCommerce cart.js file and add own modified version.
 */
function wpse_305939_replace_woocommerce_cart_script() {

    /**
     * Remove default woocommerce cart scripts.
     */
    wp_deregister_script( 'wc-cart' );
    wp_dequeue_script( 'wc-cart' );

    /**
     * Add own modify scripts.
     */
    wp_register_script( 'wc-cart', plugin_dir_url( __FILE__ ) . 'js/cart.js', array( 'jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n' ), WC_VERSION, true );

    if( is_cart() ) {
        wp_enqueue_script( 'wc-cart' );
    }
}

add_action( 'wp_enqueue_scripts', 'wpse_305939_replace_woocommerce_cart_script', 20 );

Copy original cart.js entirely to your custom cart.js and update two methods.

apply_coupon

/**
 * Apply Coupon code
 *
 * @param {JQuery Object} $form The cart form.
 */
apply_coupon: function( $form ) {
    block( $form );

    var cart = this;
    var $text_field = $( '#coupon_code' );
    var coupon_code = $text_field.val();

    var data = {
        security: wc_cart_params.apply_coupon_nonce,
        coupon_code: coupon_code
    };

    $.ajax( {
        type:     'POST',
        url:      get_url( 'apply_coupon' ),
        data:     data,
        dataType: 'html',
        success: function( response ) {
            $( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();
            show_notice( response, $('.cart-collaterals') );
            $( document.body ).trigger( 'applied_coupon', [ coupon_code ] );
        },
        complete: function() {
            unblock( $form );
            $text_field.val( '' );
            cart.update_cart( true, false);
        }
    } );
}

and update_cart

/**
 * Update entire cart via ajax.
 */
update_cart: function( preserve_notices, scroll_to_notices ) {
    var $form = $( '.woocommerce-cart-form' );

    block( $form );
    block( $( 'div.cart_totals' ) );

    // Make call to actual form post URL.
    $.ajax( {
        type:     $form.attr( 'method' ),
        url:      $form.attr( 'action' ),
        data:     $form.serialize(),
        dataType: 'html',
        success:  function( response ) {
            update_wc_div( response, preserve_notices );
        },
        complete: function() {

            scroll_to_notices = typeof scroll_to_notices !== 'undefined' ? scroll_to_notices : true;

            unblock( $form );
            unblock( $( 'div.cart_totals' ) );

            if( scroll_to_notices ) {
                $.scroll_to_notices( $( '[role="alert"]' ) );
            }
        }
    } );
}

You can check what has been updated comparing these two methods with an original cart.js file (WooCommerce 3.4.2).

This solution works only for notice when a coupon is applied.

Related Posts: