Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How To Move WooCommerce Coupon Field

March 7, 2017

3 Min Read
Reading Time: 3 minutes

Many store owners think that moving WooCommerce coupon field to the bottom of the page (around the payment details section) is a great idea. By default, this field is located near the top of the checkout page. If the customer is not logged in, this field would be located right under the legal notice:

The good thing is that I could move this field to a new location without disturbing other elements of the template. For this, I need to unhook the coupon form from its current location (top of the checkout page). This task could be done through a single line of code:

Move WooCommerce Coupon Field

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');

This snippet will remove the coupon field from the checkout form. Next, I will need to add it back to the template at the desired location. In this case, I will add the field below the checkout form. Remember that the coupon field could not be nested inside the checkout form because it might affect the Place Order button. Add the field near the end of the form through this snippet:

add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );

Move WooCommmerce Coupon Field

To implement this move, I will use the jQuery UI Dialog library to help me with the dialog functionality. In functions.php, add the following code (in the case, if your website doesn’t already include the jQuery UI Dialog library).

function cw_scripts() {
    wp_enqueue_script('jquery-ui-dialog');
}
add_action('wp_enqueue_scripts', 'cw_scripts');

Next, create an instance of jQuery Model Dialog that contains all the content of the coupon code. Position the model dialog so that it anchors to a HTML element inside the checkout form. Use the existing WooCommerce filters (or actions) to position the HTML element at your desired location within the checkout form.

In the functions.php, add the following code:

function cw_show_coupon_js() {
    wc_enqueue_js('$("a.showcoupon").parent().hide();');
    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: {}});');
    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', 'cw_show_coupon_js');

Next, to show the coupon field in the form, add the “Click here to enter your code link”. This code will add the link between the customer details and order details sections. In order to check out other locations for this link, you could look into other WooCommerce actions and filters on the checkout page (woocommerce_checkout_fields or woocommerce_before_checkout_billing_form). If you could not find the right filter or method, you could override the default WooCommerce checkout page template and locate the link at your desired location.

function cw_show_coupon() {
    global $woocommerce;

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

Click the link and enter the coupon code. You will get the following result

Conclusion

In this tutorial, I discussed the very important issue of how you could move the WooCommerce coupon field to your desired location. In many instances, you could find a filter or action to situate the link. However, you could also override the default template for locating the link. If you need further help in this regard, do leave a comment and i will get back to you ASAP!

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!