For WooCommerce stores that offer coupons to their customers, there could be a problem with the location of the coupon code box on the checkout page. It’s hiding down the bottom of the page, and helpfully – it’s not visible by default. This can lead to lost orders, or customers emailing in for help – not an ideal situation!
When researching this problem, I couldn’t find any good (free) WordPress or WooCommerce plugins that provided a fix. There are a few code fixes that are out there, but they’re mostly quite complicated and prone to doing weird stuff in the UI. 🙁
The solution is very simple – it requires a bit of additional code in the current themes’ functions.php file. What the code below does is use a bit of simple JavaScript that moves the original coupon code section to a better location, then expands the box so it’s always displayed:
/**
* Move coupon block to before payment block on checkout page
* Set coupon code box to display by default (needs a short delay)
*/
add_action( 'woocommerce_before_checkout_form', 'move_checkout_coupon_form', 5 );
function move_checkout_coupon_form() {
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
let coupon = document.querySelector('section.coupon-wrapper');
let payment = document.querySelector('div#payment');
let parent = document.querySelector('div#order_review');
parent.insertBefore(coupon, payment);
setTimeout(function () {
document.querySelector('form.checkout_coupon.woocommerce-form-coupon').style.display = 'block';
document.querySelector('form.checkout_coupon.woocommerce-form-coupon').style.width = '100%';
}, 10);
});
</script>
<?php
endif;
}For custom checkout pages, some of the JavaScript selectors may need a couple adjustments. Then again, if it’s custom – the coupon box is probably already in a better spot!