Move checkout notices WooCommerce

By default, WooCommerce displays notices at the top of the checkout form using the `woocommerce_before_checkout_form` hook. Here's how you can **remove** that default position and **reposition** the notices **after the Place Order button**:

—

### ✅ Add this to your `functions.php`:

// Remove default checkout error notices
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_output_all_notices', 10 );

// Add notices after the Place Order button
add_action( 'woocommerce_review_order_after_submit', 'custom_checkout_notices_after_place_order' );
function custom_checkout_notices_after_place_order() {
    wc_print_notices();
}

—

### 🔍 Explanation:
– `remove_action(…)`: This disables the default behavior (notices at top).
– `woocommerce_review_order_after_submit`: This hook is placed right after the “Place Order” button on the checkout page.
– `wc_print_notices()`: This function actually prints any WooCommerce notices (errors, warnings, messages).

—

### 💡 Optional Styling Tip
If you want to add a custom class or wrap the notices for better styling:

function custom_checkout_notices_after_place_order() {
    echo '<div class="custom-checkout-notices">';
    wc_print_notices();
    echo '</div>';
}

You can then target `.custom-checkout-notices` in your CSS.

—

Let me know if you’re using a custom checkout template or builder (like Elementor, Divi, etc.), and I can tailor it for that setup too.

### 🎯 Goal:
Move WooCommerce checkout notices (like validation errors: “Email is required”) **after the "Place Order" button** — instead of showing at the top of the checkout page.

—

### ✅ Working Approach for WooCommerce Notices (after AJAX submission)

WooCommerce uses **AJAX** to validate and submit the checkout. So standard `wc_print_notices()` may not output messages unless they are part of the AJAX response.

We need to use **JavaScript** to reposition the notices **after the "Place Order" button** on the frontend.

—

### 🔧 Step-by-Step Solution (PHP + JS):

#### 1. Add this to your theme’s `functions.php`:

add_action( 'wp_footer', 'move_checkout_notices_js' );
function move_checkout_notices_js() {
    if ( ! is_checkout() || is_wc_endpoint_url() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        // Run on page load and when checkout updates
        function moveNotices() {
            var notices = $('.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message');
            var target = $('.woocommerce-checkout-review-order-table').closest('form').find('#place_order');

            if (notices.length && target.length) {
                notices.insertAfter(target.closest('.form-row'));
            }
        }

        moveNotices(); // On load

        // Re-run after checkout updates (e.g. shipping change)
        $(document.body).on('updated_checkout updated_cart_totals checkout_error', function() {
            moveNotices();
        });
    });
    </script>
    <?php
}

—

### 🧪 What This Does:
– Waits for checkout to load.
– Finds WooCommerce notices like errors and messages.
– Moves them right **after the "Place Order" button**.
– Keeps working even after the checkout is updated via AJAX.

—

### 🧼 Optional CSS Cleanup:
To fix spacing or make the moved messages more obvious:

.woocommerce-NoticeGroup-checkout {
    margin-top: 20px;
}

—

Let me know if you’re using a custom checkout plugin (like Checkout Field Editor, Elementor, Divi, CartFlows, etc.), as they can affect this too.

👉 **From here:**
Top of the page (default WooCommerce location)

👉 **To here:**
**Just above the form fields** (e.g. above Billing Details)

—

### ✅ Solution: PHP Hook to Reposition Notices Above the Form Fields

Here’s how you can do it properly:

#### 1. Remove default notice location (top of form)
#### 2. Reposition above the form fields (before billing/shipping fields)

Add this to your theme’s `functions.php` file:

// Remove default notices at top of checkout
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_output_all_notices', 10 );

// Add notices just above the checkout form fields (before billing)
add_action( 'woocommerce_checkout_before_customer_details', 'custom_checkout_move_notices' );
function custom_checkout_move_notices() {
    wc_print_notices();
}

—

### 📍 Where will this show?
This will place error messages like "Email is required" **right above the Billing and Shipping sections** — cleaner and more intuitive.

—

### 🧪 Optional Testing Tip:
To test:
1. Go to checkout.
2. Leave required fields like email or name empty.
3. Click "Place Order".
4. Errors will appear **above the form** instead of at the top.

—

Let me know if you want it placed in a **different** spot — like above a custom field, or inside a specific checkout column layout.

—

### ✅ Goal:
Move `.woocommerce-NoticeGroup-checkout` messages to right **above the form fields** (not at the very top, and not after the Place Order button).

—

### ✅ JavaScript Solution (to put in `functions.php` or enqueue properly):

add_action( 'wp_footer', 'move_checkout_notices_above_form_fields_js' );
function move_checkout_notices_above_form_fields_js() {
    if ( ! is_checkout() || is_wc_endpoint_url() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($) {

        function moveNoticesAboveFormFields() {
            var notices = $('.woocommerce-NoticeGroup-checkout');
            var target = $('#customer_details');

            if (notices.length && target.length) {
                notices.insertBefore(target);
            }
        }

        moveNoticesAboveFormFields(); // Run on initial load

        // Re-run when WooCommerce updates the checkout area
        $(document.body).on('updated_checkout checkout_error', function() {
            moveNoticesAboveFormFields();
        });

    });
    </script>
    <?php
}

—

### 🧪 What this does:
– Finds the WooCommerce notices (errors, messages).
– Finds the `#customer_details` wrapper (contains billing/shipping).
– Inserts notices **just before** the form fields.
– Works on initial load and after AJAX updates.

—

### 💄 Optional CSS touch:

.woocommerce-NoticeGroup-checkout {
    margin-bottom: 20px;
}

—

Let me know if you’re using a custom layout or builder (like Elementor or Divi) — we can adjust selectors accordingly!

Let's adjust your JavaScript snippet accordingly. Here's the updated version:

—

### ✅ Updated Code for `functions.php`:

add_action( 'wp_footer', 'move_checkout_notices_above_coupon_form_js' );
function move_checkout_notices_above_coupon_form_js() {
    if ( ! is_checkout() || is_wc_endpoint_url() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        function moveNotices() {
            var notices = $('.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message');
            var target = $('.checkout_coupon.woocommerce-form-coupon');

            if (notices.length && target.length) {
                notices.insertBefore(target);
            }
        }

        moveNotices(); // On page load

        // Run again after AJAX updates or checkout errors
        $(document.body).on('updated_checkout updated_cart_totals checkout_error', function() {
            moveNotices();
        });
    });
    </script>
    <?php
}

—

### ✅ Result:
Now your WooCommerce notices (like required field errors) will appear:

> 🔼 **Above the "Have a coupon?" section**
> instead of the default top or bottom positions.

—

Let me know if you also want to hide the default notice container or adjust its spacing.

> **We need a Stripe account to connect our WooCommerce store to Stripe Payments.**

Or, a slightly more polished alternative:

> **A Stripe account is required to connect a WooCommerce store to Stripe Payments.**

Let me know if you'd like it to sound more formal, casual, or customer-facing.

> We're experiencing an issue with site caching — the page only reflects changes when a query string is added to the URL. We've already cleared the site cache and excluded the page from caching in WP Rocket and the theme settings, but the changes still require a query parameter to appear. It might start working correctly after some time once the cache is fully cleared.

Let me know if you want it rephrased in a more technical, professional, or client-friendly tone.