Creating a WooCommerce Redeem Coupon Page

By Yojance Rabelo

In this article, we will explore a unique way of allowing your customers to easily redeem a product or group of products they may have paid for already perhaps at a conference or other similar event.

Let’s talk a bit more about the concept. Say you are a store owner with a revolutionary new product and you present it to thousands of people at a conference. At the end of your speech, those customers willing to try your product can do so and pay for it ahead of time. You may even have enticed them by lowering your price to the first 500 customers.

In this scenario, what you’ll do in WooCommerce is create 500 coupons, with a product discount of 100%. You could use the Smart Coupons plugin to generate these 500 coupons so that you don’t have to create them manually. Each customer who paid in advance gets a coupon code but as far as the customer knows it is just a code to redeem the products.

Creating the Coupon Codes

If you are serious enough about your offer, then you will try to make the coupon codes look random and make it hard, if not impossible for users to come up with a valid coupon code. Make sure you select which products are tied to this coupon so we can add them to the cart automatically later on. Take a look at one of the coupons I created, pay close attention to the settings:

Coupon Settings

Creating the WooCommerce Redeem Products Page

You can easily make a copy of your page.php and turn it into a page template so you can use it for the page we are going to be sending those customers so they can redeem their products. Name it something like page-coupon-redeem.php

The following markup is what we’ll use to format the form displayed to the customer on that page. It is just a form with two fields, one for entering their code and the actual submit button. We are trying to keep this as simple as possible for the customer; so we are going to do everything via Ajax so there are as little page loads as possible.

<div class="redeem-coupon">
	<form id="ajax-coupon-redeem">
			<input type="text" name="coupon" id="coupon"/>
			<input type="submit" name="redeem-coupon" value="Redeem Offer" />
		<p class="result"></p>
	</form><!-- #ajax-coupon-redeem -->
</div><!-- .redeem-coupon -->

When the user enters a code and hits the submit button, the value entered in the text field is sent for validation and if it happens to be valid, then the user will be redirected to the ‘Cart’ page and the products will already be there to checkout for the price of $0. If by any chance the code is incorrect, then we notify the user that something is wrong and the code entered is not valid.

Building the Ajax Functionality

If you have never done Ajax in WordPress, please refer to my previous article Adding Ajax to Your WordPress Plugin for a brief introduction to how Ajax is performed in WordPress.

Let’s begin building the Ajax functionality required for our ‘Redeem Your Products Page’ to function as expected. All the code that follows goes in your functions.php file of your theme.

Register Our Ajax Handler

First register our Ajax call handler by hooking into the wp_ajax_$action and wp_ajax_nopriv_$action actions.

add_action( 'wp_ajax_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
add_action( 'wp_ajax_nopriv_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );

Note that the same function is handling the Ajax call for both customers whether they are logged in or not.

Next, we are going to start building our logic to account for the following possible scenarios:

  • Code text field being empty
  • Code being invalid, meaning is not a valid coupon code
  • Successfully presenting a valid coupon

Handling the Coupon Logic

Now that we have our actions registered and we know what to do, we need to write the actual function which will handle our possible scenarios.

function spyr_coupon_redeem_handler() {

	// Get the value of the coupon code
	$code = $_REQUEST['coupon_code'];

	// Check coupon code to make sure is not empty
	if( empty( $code ) || !isset( $code ) ) {
		// Build our response
		$response = array(
			'result'    => 'error',
			'message'   => 'Code text field can not be empty.'

		header( 'Content-Type: application/json' );
		echo json_encode( $response );

		// Always exit when doing ajax

	// Create an instance of WC_Coupon with our code
	$coupon = new WC_Coupon( $code );

	// Check coupon to make determine if its valid or not
	if( ! $coupon->id && ! isset( $coupon->id ) ) {
		// Build our response
		$response = array(
			'result'    => 'error',
			'message'   => 'Invalid code entered. Please try again.'

		header( 'Content-Type: application/json' );
		echo json_encode( $response );

		// Always exit when doing ajax

	} else {
		// Coupon must be valid so we must
		// populate the cart with the attached products
		foreach( $coupon->product_ids as $prod_id ) {
			WC()->cart->add_to_cart( $prod_id );

		// Build our response
		$response = array(
			'result'    => 'success',
			'href'      => WC()->cart->get_cart_url()

		header( 'Content-Type: application/json' );
		echo json_encode( $response );

		// Always exit when doing ajax

Handling the Form Submission with jQuery

All that’s left to do now is build the jQuery code to submit the coupon code to WordPress for processing and handling the JSON data returned.

jQuery( document ).ready( function() {
       jQuery( '#ajax-coupon-redeem input[type="submit"]').click( function( ev ) {

        // Get the coupon code
        var code = jQuery( 'input#coupon').val();

        // We are going to send this for processing
        data = {
            action: 'spyr_coupon_redeem_handler',
            coupon_code: code

        // Send it over to WordPress.
        jQuery.post( woocommerce_params.ajax_url, data, function( returned_data ) {
            if( returned_data.result == 'error' ) {
                jQuery( 'p.result' ).html( returned_data.message );
            } else {
                // Hijack the browser and redirect user to cart page
                window.location.href = returned_data.href;

        // Prevent the form from submitting

Final Result

The styling of the form is entirely up to you. I’ve used the default Twenty Twelve theme and WooCommerce’s dummy data and with a few CSS rules this is what I’ve got below.

Empty Field Error Message

Error Empty Field

Invalid Code Error Message

Error Invalid Code

Valid Code/Cart Populated

Populated Cart


Even though this scenario might not apply to every store out there, WooCommerce shines in providing us with a set of tools through their API so that we can accomplish almost anything we set our minds to. Add WordPress to the mix and you’ve got a complete eCommerce solution which is second to none.

It is my hope that through this article, I’ve provided some insight of how coupons work in WooCommerce and that you’ll feel more comfortable in using it on your next project.


Hi there,
Thanks for this useful tutorial. I was wondering if this will work for a variable product as well and how this should be implemented ?


It should work for Variable products, too.


Hi Yojance,

I should have been more specific I think. I'm using coupon codes for a product which has several variations. So when the customer redeems this coupon code they still have to select the variation they want (i.e.. language of the file). I'm not sure how this will work.
I had some problems adding the code to my functions.php. When adding the jquery part, I get this error message : Parse error: syntax error, unexpected ')', expecting '&' or T_VARIABLE in /home/...


I too would like an update on how to properly implement this workaround.

The ajax handler and coupon logic code in functions.php is in place, and in my case I added the jquery in the same page as the form. Unfortunately nothing happens when the coupon code I created is applied.

Perhaps is due to the latest version of woocommerce not being compatible with this solution, or we are missing something during set up O_O

Update: Silly me, my jquery needed to go in a separate file which then needed to be called from functions php. Works now smile


Thank you for this tutorial I have found it very useful

Is it possible to apply the voucher during this process?



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in WordPress, once a week, for free.