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:
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
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
}
}
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;
}
How to override WooCommerce templates using a custom functionality plugin
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.