Search code examples
wordpresswoocommercecheckoutcoupon

Changing the location of Woocommerce coupon code on checkout makes purchase button stop working?


Ok so I have looked everywhere for a solution to this but I can't figure out why this is happening. Logically it makes no sense. I'm not really a coder but I know some basic PHP.

I used the following code to simply move the coupon field in Woo checkout to a different location:

/*** MOVE THE COUPON CODE ***/

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

After this code is added, the "Buy Now" checkout button to finalize the order does nothing on click, like the JS is disabled.

When the code is removed and coupon code goes back to original location, the button works normally.

Has anyone else had this happen to them? It's so bizarre.

You can see the page (with code above implemented) here:

http://insiders.nomadmoguls.com/payment/?add-to-cart=205479&variation_id=205481&attribute_pa_type-of-pass=yearly

Thanks in advance for everyone's help! This was my last resort after several hours looking for a solution on my own!


Solution

  • The issue is caused by the hook you're using, woocommerce_after_order_notes. It's causing the <form name="checkout"> to close before the Submit button, so the Sign Up Now button isn't actually inside that form anymore, so it can't submit it when it's clicked, since your (paraphrased) markup is like this:

    <form name="checkout">
        <!-- coupon code stuff -->
    </form>
    <button type="submit">Sign Up Now</button>
    

    Check out this video of me on the site with Dev Tools open. You can see the Sign Up Now button outside the Checkout form - as soon as I drag it up to be inside the form, it works just fine.

    A relatively common misconception is that "Coupon Code" is a checkout form field, when it's really it's own separate form, so of course - it doesn't want to be nested directly inside the checkout form (you can't have forms inside forms).

    This means you have real two options, without doing something crazy like rebinding a click handler on the submit button to submit the form:

    1. Use a hook that comes after the checkout form, such as woocommerce_after_checkout_form instead of woocommerce_after_order_notes.
    2. Keep the coupon form at its original location.