Improving the Login and Coupon notices/forms on the checkout page

  • Tom

    (@jeffreeeeey)


    8 years, 6 months ago

    Good afternoon,

    I’m trying to remove the default coupon notice/form within the woocommerce checkout page and then place the coupon form in a different position within the checkout page.

    Why?
    1. I don’t believe this should be as prominent as it is by default.
    2. I strongly believe abandoned carts will be reduced if the customer fills in all their details before getting to the payment stuff. So, the coupon field should ideally appear later on the page. Eg. Amongst the order (or payment) details.
    3. There are too many “notices” on the checkout page (I already have a “order before 3pm for same day shipping” notice and also a “spend ￡x more and qualify for free shipping” notice. Together with the “Existing user – click to login” notice – that means I have 4 notices in total – which is too much.

    FOR THE LOGIN ISSUE…

    I have used the following to REMOVE the “Existing user? Click to login” notice/form:

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

    I have added my own login solution to my themes header.

    FOR THE COUPON ISSUE…

    I have used the following to REMOVE the existing Coupon notice/form from the checkout page:

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

    This works as expected.

    But now I need to add the NEW coupon form (the one that’s shown on the CART/BASKET page – not the one that’s shown on the checkout page as default). I want to add this AFTER the order details but BEFORE the payment gateway options.

    To do this I believe I need to hook in to

    woocommerce_review_order_before_payment

    The form function that I assume I need to add is:

    woocommerce_cart_coupon

    That’s taken from the cart/basket page (though I think this is perhaps where I’m going wrong?).

    So here’s how I’ve tried adding the new form:
    add_action( 'woocommerce_review_order_before_payment', 'woocommerce_cart_coupon', 20 );

    This isn’t working.
    I get the following error on the checkout page:
    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'woocommerce_cart_coupon' not found or invalid function name in /home/ACCOUNTNAME/public_html/v1/wp-includes/plugin.php on line 525

    Can anyone tell me where I’m going wrong/ how to make the change I want?

    I’ve seen similar questions asked around the web but there are no real solutions.

    Thanks

    https://www.ads-software.com/plugins/woocommerce/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Tom

    (@jeffreeeeey)

    I should note that I’ve tried:

    add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form', 10 );

    It kinda’ works.
    It adds the Coupon form where I want it to be, but it also includes the blue “notice” box above it, along with the text “Have a coupon? Click here to enter your code”. The notice/form is OPEN by default, so I suppose I could just hide the .woocommerce-info notice using CSS, but this seems a little “hacky”.

    Open to opinions on this

    jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    Hey there!

    You could always create your own template from /woocommerce/templates/checkout/form-coupon.php and remove lines 26-29, which is the part that outputs the notice. This would be cleaner and less hacky.

    This should work with your code:

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

    Templates and overrides are covered here:
    https://docs.woothemes.com/document/template-structure/

    Thread Starter Tom

    (@jeffreeeeey)

    Thanks Jesse, yeah it’s looking like I’ll need to create a custom template to handle this because nothing else seems to work as expected.

    The action you mentioned above does display the coupon form (though complete with the notice part) to the desired location… however if the customer has filled in their name/address etc – once they enter their coupon code and click apply, they are instantly directed to PayPal.

    In other words the form doesn’t work as it should (apply code then leave them on the page so that they can select their shipping method and payment option)

    jessepearson

    (@jessepearson)

    Automattic Happiness Engineer

    Ah, that’s my error for not noticing that. The form for payment begins at the first Billing Address field and ends after the payment information, so you are basically placing a form within a form… which is most likely why the coupon form appears above the address fields.

    The only other idea that I have would be to place a notice and link below the address fields, and when the link is clicked it opens the div/form above the address fields and also scrolls up to it.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Improving the Login and Coupon notices/forms on the checkout page’ is closed to new replies.