Change Position in Checkout

Hi @masidus ,

Thanks for using our plugin. I would like to know the details of this improvement.

We appreciate this improvement and yes we will move this user story into our backlog item. Can you please share the little details for this, so it will give me a better idea to look into it.

Looking forward to your response.

Thank you!
Regards,
Codup

Hi there,

Thank you for your reply!

We’ve already moved the ‘Have a coupon?’ box down to above the order notes box and would like the ability to move the gift wrap also.

View post on imgur.com

From working on previous issues, I am foreseeing that this might be more difficult than appears as I searched for a long time for custom code to make the form system work for the coupon dialogue.

This is due to the fact that the action which is hooked to the ‘Apply Coupon’ button is ‘submit’, so if simply moved inside the checkout form, when the button is pressed to apply to coupon, it instead fires the submit for the whole checkout.

I achieved this by following a guide which used JS to accomplish this – https://tamstradingpost.com/move-the-woocommerce-coupon-field-anywhere/

The code I used personally is –

/*Coupon move checkout*/

/**
 * Need the jQuery UI library for dialogs.
 **/
function ttp_scripts() {
    wp_enqueue_script('jquery-ui-dialog');
}
add_action('wp_enqueue_scripts', 'ttp_scripts');

/**
 * Processing before the checkout form to:
 * 1. Hide the existing Click here link at the top of the page.
 * 2. Instantiate the jQuery dialog with contents of 
 *    form.checkout_coupon which is in checkout/form-coupon.php.
 * 3. Bind the Click here link to toggle the dialog.
 **/
function ttp_wc_show_coupon_js() {
    /* Hide the Have a coupon? Click here to enter your code section                                                
     * Note that this flashes when the page loads and then disappears.                                                
     * Alternatively, you can add a filter on                                                                       
     * woocommerce_checkout_coupon_message to remove the html. */
    wc_enqueue_js('$("a.showcoupon").parent().hide();');

    /* Use jQuery UI's dialog feature to load the coupon html code                                                  
     * into the anchor div. The width controls the width of the                                                     
     * modal dialog window. Check here for all the dialog options:                                                         
     * https://api.jqueryui.com/dialog/ */
    wc_enqueue_js('dialog = $("form.checkout_coupon").dialog({                                                      
                       autoOpen: false,                                                                             
                       width: 500,                                                                                  
                       minHeight: 0,                                                                                
                       modal: false,                                                                                
                       appendTo: "#coupon-anchor",                                                                  
                       position: { my: "left", at: "left", of: "#coupon-anchor"},                                   
                       draggable: false,                                                                            
                       resizable: false,                                                                            
                       dialogClass: "coupon-special",                                                               
                       closeText: "Close",                                                                          
                       buttons: {}});');

    /* Bind the Click here to enter coupon link to load the                                                         
     * jQuery dialog with the coupon code. Note that this                                                               
     * implementation is a toggle. Click on the link again                                                          
     * and the coupon field will be hidden. This works in                                                           
     * conjunction with the hidden close button in the                                                               
     * optional CSS in style.css shown below. */
    wc_enqueue_js('$("#show-coupon-form").click( function() {                                                       
                       if (dialog.dialog("isOpen")) {                                                               
                           $(".checkout_coupon").hide();                                                            
                           dialog.dialog( "close" );                                                                
                       } else {                                                                                     
                           $(".checkout_coupon").show();                                                            
                           dialog.dialog( "open" );                                                                 
                       }                                                                                            
                       return false;});');
}
add_action('woocommerce_before_checkout_form', 'ttp_wc_show_coupon_js', 10);

/**                                                                                                                 
 * Show a coupon link before order notes section.                                                                                                      
 * This is the 'coupon-anchor' div which the modal dialog
 * window will attach to.
 **/
function ttp_wc_show_coupon() {
    global $woocommerce;

    if ($woocommerce->cart->needs_payment()) {
        echo '<p style="padding-bottom: 1.2em;"> Have a voucher? <a href="#" id="show-coupon-form">Click here to enter your code</a>.</p><div id="coupon-anchor"></div>';
    }
}
add_action('woocommerce_before_order_notes', 'ttp_wc_show_coupon', 10);

Hope this helps, many thanks!

Hi @masidus,

Thanks for the details you have provided. Let me check the details you have provided with my team.

I will get back to you with the updates.

Thank you!
Regards,
Codup