Add Thumbnail Checkout Summary

Here’s a simple snippet you can add to your theme’s `functions.php` file or in a custom plugin:

—

### ✅ Add Product Thumbnail to Checkout Order Summary

add_filter( 'woocommerce_checkout_cart_item_name', 'add_thumbnail_to_checkout_summary', 10, 3 );

function add_thumbnail_to_checkout_summary( $product_name, $cart_item, $cart_item_key ) {
    $thumbnail = $cart_item['data']->get_image( array( 40, 40 ) ); // You can adjust the image size
    return $thumbnail . ' ' . $product_name;
}

—

### ✅ Optional: Add

You already have a “ where the product name and quantity are shown. You just need to insert the **thumbnail** HTML there.

—

### ✅ Here’s what to change:

Find this block inside your “:

<?php echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) ) . ' '; ?>

➡️ **Replace it with this (thumbnail included):**

<?php
	// Get product thumbnail (you can adjust size e.g. [50, 50])
	$thumbnail = $_product->get_image( array( 50, 50 ) );

	// Display thumbnail + product name
	echo '<div class="product-thumbnail" style="display:inline-block; vertical-align:middle; margin-right:10px;">' . $thumbnail . '</div>';
	echo '<div class="product-info" style="display:inline-block; vertical-align:middle;">';
	echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) );
	echo apply_filters( 'woocommerce_checkout_cart_item_quantity', ' <strong class="product-quantity">' . sprintf( '× %s', $cart_item['quantity'] ) . '</strong>', $cart_item, $cart_item_key );
	echo wc_get_formatted_cart_item_data( $cart_item );
	echo '</div>';
?>

—

### 🖼️ Result:
This will show the product thumbnail (e.g., 50×50) to the **left** of the product name in the checkout review table.

You can also fine-tune the layout or style further via CSS, or replace inline styles with a class name like `.checkout-thumbnail`.

Let me know if you want to style it cleaner or show full-size images too!

—

### ✅ Option 1: Hide with CSS (Quick & Safe)
Add this to your **theme’s CSS** (e.g. via *Customizer > Additional CSS* or your theme's style file):

.woocommerce-form-coupon-toggle {
    display: none !important;
}

—

### ✅ Option 2: Remove with PHP (Clean & Permanent)

Add this to your theme’s `functions.php` or a custom plugin:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

This **completely removes** the coupon toggle form (including the JS trigger and the coupon form itself).

—

Let me know if you'd prefer to show it only for logged-in users or on specific conditions — I can tailor it further!

—

### 🔧 Here's how you can do it step-by-step:

—

## ✅ 1. **Override WooCommerce Checkout Template**

Copy this template file from WooCommerce to your theme:

**From:**

wp-content/plugins/woocommerce/templates/checkout/form-checkout.php

**To:**

wp-content/themes/your-theme/woocommerce/checkout/form-checkout.php

—

## ✅ 2. **Edit `form-checkout.php` Template**

In the default template, you’ll see something like:

<div id="order_review" class="woocommerce-checkout-review-order">
	<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>

This section includes **both the order review table and the payment methods**.

—

### 👉 To separate them:

You can split the two parts by calling their specific actions individually.

#### 🔸 Replace this:

<?php do_action( 'woocommerce_checkout_order_review' ); ?>

#### 🔹 With this:

<div class="custom-order-review">
	<?php do_action( 'woocommerce_checkout_order_review_heading' ); ?>
	<?php do_action( 'woocommerce_review_order_before_cart_contents' ); ?>
	<?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>

<div class="custom-payment-methods">
	<?php do_action( 'woocommerce_review_order_after_order_total' ); ?>
	<?php woocommerce_checkout_payment(); ?>
</div>

> 🔁 You may need to experiment slightly depending on your theme and plugins, but this will separate the **payment methods** into a new “ below or beside the order summary.

—

### ✅ 3. Add Custom CSS if Needed
To style the separation or display side-by-side (optional):

.custom-order-review,
.custom-payment-methods {
    width: 100%;
    margin-bottom: 30px;
}

@media(min-width:768px) {
    .custom-order-review,
    .custom-payment-methods {
        width: 48%;
        display: inline-block;
        vertical-align: top;
    }
}

—

Let me know if you want:
– A **2-column layout** (e.g., order summary left, payment right),
– Or if you're using **Elementor/Divi**, so I can guide with builder-specific steps.

To fully control where the **payment options** render, you need to do the following:

—

## ✅ Step-by-step fix to separate payment options from order summary

### 🔧 1. **Override `form-checkout.php` in your theme**

You already have this file here:

/your-theme/woocommerce/checkout/form-checkout.php

### 🔧 2. **Customize the structure manually**

In the template file, instead of this:

<?php do_action( 'woocommerce_checkout_order_review' ); ?>

You need to **manually include** the order review **without the payment**.

—

### ✅ Here’s the updated code:

<div id="order_review" class="woocommerce-checkout-review-order">
    <?php
        // This renders ONLY the order review table (product list, totals)
        wc_get_template( 'checkout/review-order.php' );
    ?>
</div>

<div id="payment_section" class="woocommerce-checkout-payment">
    <?php
        // This renders ONLY the payment section
        woocommerce_checkout_payment();
    ?>
</div>

> ⚠️ Make sure you **don’t** call `do_action( 'woocommerce_checkout_order_review' );` anymore — it will bring both order review + payment together.

—

### 🧼 Optional CSS for styling:

#order_review,
#payment_section {
    margin-bottom: 30px;
}

@media(min-width:768px) {
    #order_review, #payment_section {
        width: 48%;
        display: inline-block;
        vertical-align: top;
    }
}

—

### ✅ Result:
– Order summary (`review-order.php`) shows alone.
– Payment options (`woocommerce_checkout_payment()`) show separately, wherever you place the code.

—

Let me know if you're using a page builder or need this in a custom layout/grid!

—

## ✅ How to move WooCommerce checkout error messages to the top

### 🔧 1. **Override `form-checkout.php`**
Make sure you're editing this file in your theme:

/your-theme/woocommerce/checkout/form-checkout.php

—

### 🔧 2. **Manually add the notices at the top of the form**

Add this line **immediately after the opening “ tag**, like this:

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

    <?php wc_print_notices(); ?>

—

### ✅ Optional: Remove the default hook to prevent duplicate output

If notices are still appearing in their old position, you can remove the default WooCommerce output using this snippet in your `functions.php`:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_output_all_notices', 10 );

This ensures the notices are shown **only** in the spot you placed `wc_print_notices()` manually.

—

### ✅ Final Result
Now, all checkout errors (like "Please enter your address" or "Coupon is invalid") will show at the **top of the form**, not buried in the middle of the checkout.

Let me know if you're using a page builder or want to place them *outside* the form — we can do that too.