How to Move coupon form before subtotal in WooCommerce checkout after ajax?

To move the coupon form before the subtotal in the WooCommerce checkout page, especially after an AJAX update (which occurs when cart items are updated), you’ll need to use a combination of actions and filters provided by WooCommerce, as well as some custom JavaScript to handle the AJAX event.

Live demo

Step 1: Remove the Default Coupon Form

WooCommerce normally displays the coupon form under the order summary. To move it, you first need to remove it from its default location. This can be done by adding the following PHP code to your theme’s functions.php file or a custom plugin:

function custom_remove_checkout_coupon_form() {
    remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
}
add_action( 'woocommerce_before_checkout_form', 'custom_remove_checkout_coupon_form', 9 );

Step 2: Add the Coupon Form to a New Location

Next, decide where you want the coupon form to appear. Since you want it before the subtotal, you can hook it to a suitable action hook. Unfortunately, there isn’t a direct hook for “before subtotal” in the WooCommerce checkout form, but you can use the woocommerce_review_order_before_order_total hook as it’s close to the subtotal area. Add the following code:

function custom_add_checkout_coupon_form() {
    wc_get_template( 'checkout/form-coupon.php', array( 'checkout' => WC()->checkout() ) );
}
add_action( 'woocommerce_review_order_before_order_total', 'custom_add_checkout_coupon_form' );

Step 3: Handle AJAX Updates

When cart items are updated, WooCommerce uses AJAX to refresh the checkout page, which may affect the placement of the coupon form. To ensure the coupon form stays in the correct location, you can use custom JavaScript to move the form dynamically after AJAX updates.

Add the following JavaScript code to your theme’s custom.js file or inline within a custom plugin. If your theme doesn’t have a custom.js file, you might need to enqueue one correctly in your theme’s functions.php.

jQuery(document).ready(function($) {
    // Function to move the coupon form
    function moveCouponForm() {
        var couponForm = $('.checkout_coupon');
        var targetLocation = $('.order-total').closest('tr'); // Adjust this selector based on your theme's structure
        couponForm.insertBefore(targetLocation);
    }

    // Initial move
    moveCouponForm();

    // Reapply after checkout updates
    $(document).on('updated_checkout', function() {
        moveCouponForm();
    });
});

Notes:

The JavaScript selector $('.order-total').closest('tr') is used to find the correct place before the subtotal. Depending on your theme or if you have customized the WooCommerce templates, you might need to adjust this selector.
Ensure to clear your site and browser cache after applying these changes to see the effect.
Test the checkout process to ensure everything works as expected and that applying coupons still functions correctly.

This approach combines PHP to modify the WooCommerce templates and JavaScript to ensure the UI remains consistent after AJAX updates. It gives you control over where the coupon form appears in the checkout process.

Tags:Woocommerce Wordpress