Moving Coupon section below Customer Details section on WooCommerce Checkout page
This tutorial provides the steps to change the position of “Have a coupon? Click here to enter your code” section including the coupon form from near the top of the WooCommerce Checkout page to in between the Customer Details section and the Order Review section.
The source for the code is this excellent article by Henry Tam.
Before:
After:
Step 1
Install and activate My Custom Functionality plugin.
Connect to your hosting account using a FTP client and navigate to site’s
/wp-content/plugins/my-custom-functionality-master
.
a) This step will ensure that the default “Have a coupon? Click here to enter your code” element will not flash for a second and disappear as it would happen if we use JS to hide it per Tam’s Trading Post tutorial. It is better to instead remove it at the PHP server level.
Create a directory named
woocommerce
and inside that, a directory named
checkout
.
Copy/upload
/wp-content/plugins/woocommerce/templates/checkout/form-coupon.php
to the above directory and edit it.
Delete
<div class="woocommerce-form-coupon-toggle">
<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' <a href="#" class="showcoupon">' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '</a>' ), 'notice' ); ?>
</div>from the file.
We are going to add this markup later on where needed using the WooCommerce hooks, in this case,
woocommerce_checkout_after_customer_details
.
Note: Here we are overriding the WooCommerce template file from our custom plugin. If you would rather do this from within your active theme, then place the modified
form-coupon.php
file in the corresponding directory in your theme.
b) Next we shall
- tell WooCommerce to do the template overriding from our custom plugin rather than the active theme. Note: You may skip this part of the code if you prefer to do the WooCommerce template overriding from the theme.
- load jQuery UI.
- use jQuery UI’s dialog feature to load the coupon HTML code into the anchor div.
- Bind the “Click here to enter coupon” link to load the jQuery dialog with the coupon code.
- Show a coupon link above the order details section. This is the ‘coupon-anchor’ div which the modal dialog window will attach to.
Edit
plugin.php
and add the following:
add_filter( 'woocommerce_locate_template', 'intercept_wc_template', 10, 3 );
/**
* Filter the cart template path to use cart.php in this plugin instead of the one in WooCommerce.
*
* @param string $template Default template file path.
* @param string $template_name Template file slug.
* @param string $template_path Template file name.
*
* @return string The new Template file path.
*/
function intercept_wc_template( $template, $template_name, $template_path ) {
$template_directory = trailingslashit( plugin_dir_path( __FILE__ ) ) . 'woocommerce/';
$path = $template_directory . $template_name;
return file_exists( $path ) ? $path : $template;
}
add_action( 'wp_enqueue_scripts', 'ttp_scripts' );
/**
* Need the jQuery UI library for dialogs.
**/
function ttp_scripts() {
if ( is_checkout() ) {
wp_enqueue_script( 'jquery-ui-dialog' );
}
}
add_action( 'woocommerce_before_checkout_form', 'ttp_wc_show_coupon_js' );
/**
* Processing before the checkout form to:
* 1. Instantiate the jQuery dialog with contents of
* form.checkout_coupon which is in checkout/form-coupon.php.
* 2. Bind the Click here link to toggle the dialog.
**/
function ttp_wc_show_coupon_js() {
/*
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_checkout_after_customer_details', 'ttp_wc_show_coupon' );
/**
* Show a coupon link above the order details 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() ) { ?>
<div class="woocommerce-form-coupon-toggle">
<?php wc_print_notice( apply_filters( 'woocommerce_checkout_coupon_message', esc_html__( 'Have a coupon?', 'woocommerce' ) . ' <a href="#" id="show-coupon-form">' . esc_html__( 'Click here to enter your code', 'woocommerce' ) . '</a><div id="coupon-anchor"></div>' ), 'notice' ); ?>
</div>
<?php
}
}Step 2 (optional)
Add this CSS:
.woocommerce-form-coupon-toggle {
margin-top: 2em;
}
#checkout_cart input#coupon_code {
width: auto;
}
/* Style to overcome jQuery dialog's inline styling on the coupon dialog (Optional) */
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.coupon-special {
position: relative;
top: 0 !important;
left: 0 !important;
border: 0;
}
/* Remove the close coupon field button (Optional) */
.ui-widget-header {
display: none;
}Reference
How to override WooCommerce templates using a custom functionality plugin