Masidus

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:                                                         
     * http://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 @makewebbetter

Thank you for your swift reply and I did see the small section on the product page on the website which mentions this however could not find any further info in the documentation so was unsure of whether to purchase or not – a small note of this somewhere in the official documentation would prevent the same confusion for others in the future.

My apologies for the mistake and again thank you for getting back to me so quickly – I really appreciate your time!

Hope you and the team are all keeping well, all the best!

Solution - The ability to target Product Categories within the plugin is ONLY available in the PRO version.

I have cleared the cache and there is no change unfortunately.

Regarding my first question – is it possible to change the checkout-2 slug created by the plugin?

Let me know if you need any further info, hope you’re well!

Thank you very much for your swift reply!!

I have just disabled copy protection so you can right click now 🙂

Let me know if there’s anything else you need, thank you so much!

Excellent thank you for your time!

I’ve submitted a support ticket to coupon plugin so hopefully that will be fixed in the near future.

Also I’ve left a review for the plugin; again thank you for providing us with Matomo, it’s the definitely the best free platform!

Hi @yukikatayama,

Thank you for your reply!

So the latest update to WooCommerce 4.0 has fixed this issue, howeevr I am still unable to personalise the text string as before.

I’m looking to change the text for minimum and maximum spend to also reflect the coupon name in the message string, so for example – “The minimum spend for coupon ‘COUPON_NAME’ is £xx.” instead of the current – “The minimum spend for this coupon is £xx.”

Many thanks!

Hi @webtoffee and thank you for your swift reply!

Version is latest (1.4.2) and the site is https://watkinsprints.co.uk

If there’s any furhter information that you require then feel free to drop me another line.

Many thanks!