Move payment field checkout

March 22, 2025 · AI Conversations

User
Move payment field from order review to under order notes at checkout page
Assistant
To move the **payment method fields** from the **order review section** to **under the order notes** section on the WooCommerce checkout page, you can hook into the checkout fields and use `remove_action` and `add_action` smartly. Here's how to do it:

—

### Step-by-step solution:

1. **Remove the default payment section** from its original location (`woocommerce_checkout_order_review`).
2. **Add it after the order notes field**, which is under `woocommerce_after_order_notes`.

—

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

// Remove payment from order review section
remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

// Add payment under order notes
add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_payment', 20 );

—

### Optional: Rearranging the layout with CSS

After moving it, the layout might need slight CSS adjustments to align properly:

#payment {
    margin-top: 30px;
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
}

—

Let me know if you're using a custom checkout layout or builder (like Elementor, Divi, or a theme with custom Woo templates), and I can tailor the code accordingly.

User
Move coupon form before payment section and Add toggle option that open coupon form when click
Assistant
Perfect — you want to:

1. **Move the coupon form before the payment section** at checkout.
2. **Hide the coupon form by default**, and
3. **Add a toggle button** (like "Have a coupon? Click here to enter your code") that reveals the form on click.

Here’s how to do it:

—

### 1. **Move the coupon form before the payment section**
WooCommerce shows it at the top by default. We’ll remove it from there and place it right above the payment section.

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

// Remove default coupon form at top
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

// Add it before payment section
add_action( 'woocommerce_checkout_before_customer_details', 'custom_coupon_toggle_before_payment', 5 );

function custom_coupon_toggle_before_payment() {
    echo '<div class="custom-coupon-toggle">
            <a href="#" class="showcoupon" style="color:#0071a1;text-decoration:underline;display:inline-block;margin-bottom:15px;">
                Have a coupon? Click here to enter your code
            </a>';
    woocommerce_checkout_coupon_form();
    echo '</div>';
}

—

### 2. **Add custom CSS and JS for toggle behavior**

To hide the form by default and toggle it:

#### Add this CSS:
You can include it via your theme's customizer (Appearance > Customize > Additional CSS):

.checkout_coupon {
    display: none;
    margin-top: 15px;
}

#### Add this JavaScript:
You can enqueue it properly or add it via a custom JS file or directly in the footer:

add_action('wp_footer', function () {
    if (is_checkout()) : ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggleLink = document.querySelector('.custom-coupon-toggle .showcoupon');
            const couponForm = document.querySelector('.checkout_coupon');

            if (toggleLink && couponForm) {
                toggleLink.addEventListener('click', function (e) {
                    e.preventDefault();
                    couponForm.style.display = couponForm.style.display === 'none' || couponForm.style.display === '' ? 'block' : 'none';
                });
            }
        });
    </script>
    <?php endif;
});

—

Let me know if you're using a custom theme or page builder — the selectors or logic might need a tweak.

User
Above the place order button
Assistant
Great! You want the **coupon form to appear just above the "Place Order" button** on the WooCommerce checkout page — and **be hidden by default with a toggle link**.

Here’s how to achieve that step-by-step:

—

### 1. **Remove the default coupon form at the top**

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

—

### 2. **Add the coupon toggle + form just above the Place Order button**

We’ll hook into `woocommerce_review_order_before_payment` to insert the form before the payment section (which includes the Place Order button).

add_action( 'woocommerce_review_order_before_payment', 'custom_coupon_toggle_above_place_order' );

function custom_coupon_toggle_above_place_order() {
    echo '<div class="custom-coupon-toggle" style="margin-bottom:20px;">
            <a href="#" class="showcoupon" style="color:#0071a1;text-decoration:underline;display:inline-block;">
                Have a coupon? Click here to enter your code
            </a>';
    woocommerce_checkout_coupon_form();
    echo '</div>';
}

—

### 3. **Hide the coupon form by default with some CSS**

You can put this in Appearance > Customize > Additional CSS:

.checkout_coupon {
    display: none;
    margin-top: 15px;
}

—

### 4. **Add JS to toggle the form**

Add this to your `functions.php` to inject JS in the footer:

add_action('wp_footer', function () {
    if (is_checkout()) : ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggleLink = document.querySelector('.custom-coupon-toggle .showcoupon');
            const couponForm = document.querySelector('.checkout_coupon');

            if (toggleLink && couponForm) {
                toggleLink.addEventListener('click', function (e) {
                    e.preventDefault();
                    couponForm.style.display = couponForm.style.display === 'none' || couponForm.style.display === '' ? 'block' : 'none';
                });
            }
        });
    </script>
    <?php endif;
});

—

### Result:
– Coupon form is removed from the top
– A link saying **"Have a coupon? Click here to enter your code"** appears **above the Place Order button**
– Clicking it reveals the coupon form

Let me know if you also want a smoother slide-down animation or a more styled toggle.

User
We have already moved payment section from.order review page
Assistant
Got it! Since you've already **moved the payment section below the order notes**, the **"Place Order" button** is no longer inside the default `order review` area — it's now after order notes.

So now, to **place the coupon toggle + form just above the payment section (and thus above the Place Order button)**, we’ll need to hook into `woocommerce_after_order_notes`, but insert the coupon **before** the payment section (which you moved there earlier).

—

### Here's the updated approach:

#### 1. **Keep your existing payment section hook:**

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_payment', 20 );

#### 2. **Add coupon form *before* the payment section**
Since we’re now using `woocommerce_after_order_notes` for payment, we can hook the coupon form *right before it* with a slightly lower priority:

// Add coupon form above the payment section (and Place Order button)
add_action( 'woocommerce_after_order_notes', 'custom_coupon_toggle_above_payment', 10 );

function custom_coupon_toggle_above_payment() {
    echo '<div class="custom-coupon-toggle" style="margin-bottom:20px;">
            <a href="#" class="showcoupon" style="color:#0071a1;text-decoration:underline;display:inline-block;">
                Have a coupon? Click here to enter your code
            </a>';
    woocommerce_checkout_coupon_form();
    echo '</div>';
}

—

### 3. **Hide the coupon form by default (CSS)**

Add this to your Additional CSS:

.checkout_coupon {
    display: none;
    margin-top: 15px;
}

—

### 4. **Add JS to toggle it**

Place this in `functions.php`:

add_action('wp_footer', function () {
    if (is_checkout()) : ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggleLink = document.querySelector('.custom-coupon-toggle .showcoupon');
            const couponForm = document.querySelector('.checkout_coupon');

            if (toggleLink && couponForm) {
                toggleLink.addEventListener('click', function (e) {
                    e.preventDefault();
                    couponForm.style.display = couponForm.style.display === 'none' || couponForm.style.display === '' ? 'block' : 'none';
                });
            }
        });
    </script>
    <?php endif;
});

—

### Result:
– The **coupon toggle appears above the payment section**
– The **Place Order button** stays below it
– The **form is hidden by default**, and appears with a click

Let me know if you want it to **slide** in/out or use jQuery for better animation.

User
WOOcommerce checkout order review sub hooks
Assistant
In WooCommerce, the `woocommerce_checkout_order_review` hook outputs the order review section on the checkout page. This typically includes cart totals and the payment section (unless you've moved it).

If you’re exploring **sub-hooks or actions within `woocommerce_checkout_order_review`**, here’s a breakdown of what WooCommerce usually loads inside it:

—

### Main Hook:

do_action( 'woocommerce_checkout_order_review' );

—

### Sub-hooks (actions triggered inside this section):

#### 1. `woocommerce_review_order_before_cart_contents`
Runs before the cart items list is rendered.

#### 2. `woocommerce_review_order_before_shipping`
Runs before shipping rows.

#### 3. `woocommerce_review_order_after_shipping`
Runs after shipping rows.

#### 4. `woocommerce_review_order_before_order_total`
Runs before order total section.

#### 5. `woocommerce_review_order_after_order_total`
Runs after order total section.

#### 6. `woocommerce_review_order_before_payment`
Before the payment methods section.

#### 7. `woocommerce_review_order_after_payment`
After the payment section.

—

### Payment section itself:

do_action( 'woocommerce_checkout_payment' );

It’s triggered inside the `woocommerce_checkout_order_review` by default using this:

add_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );

Since you've moved the payment part elsewhere, you can use the following **if you still want to hook into its sub-sections**:

—

### Example: Add something before the order total

add_action('woocommerce_review_order_before_order_total', function() {
    echo '<tr><td colspan="2">Custom content before order total</td></tr>';
});

—

Let me know if you want to **insert something visually in the table**, or if you're looking to modify the structure/HTML around those parts (like moving totals, fees, or shipping).

Leave a Comment

Your email address will not be published. Required fields are marked *