Move WooCommerce Notices Top

—

### ✅ Step 1: Remove Default Error Notice Placement
WooCommerce prints errors using `woocommerce_output_all_notices()` in `checkout/form-checkout.php`. You’ll move them to a custom place.

—

### ✅ Step 2: Add Custom Div to `form-checkout.php`

1. **Override WooCommerce template**
Copy `form-checkout.php` from:
`wp-content/plugins/woocommerce/templates/checkout/form-checkout.php`
to:
`yourtheme/woocommerce/checkout/form-checkout.php`

2. Inside that file, add your custom div **where you want the notices** (usually right after the opening “):

<div class="custom-checkout-errors">
       <?php do_action( 'woocommerce_custom_checkout_notices' ); ?>
   </div>

—

### ✅ Step 3: Hook the Notices into Your Custom Div

In your theme’s `functions.php` or a custom plugin:

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

// Add notices to custom location
add_action( 'woocommerce_custom_checkout_notices', 'woocommerce_output_all_notices', 10 );

—

### ✅ Optional Styling (CSS)

You can style it like this in your theme’s CSS:

.custom-checkout-errors {
    margin-bottom: 20px;
    padding: 10px;
}

—

### ✅ Bonus: Scroll to Error on Submit (UX Improvement)

To improve UX, you can scroll to the `.custom-checkout-errors` div on error. Add this in your JS (like `checkout.js` or enqueue via your theme):

jQuery(function($) {
    $('form.checkout').on('checkout_error', function() {
        const errorDiv = $('.custom-checkout-errors');
        if (errorDiv.length) {
            $('html, body').animate({
                scrollTop: errorDiv.offset().top - 100
            }, 600);
        }
    });
});

—

Let me know if you’re using a specific theme (like Flatsome, Astra, or Divi), or a page builder like Elementor – I can tailor the instructions further.