Creating a WooCommerce Redeem Coupon Page

Key Takeaways

• WooCommerce allows you to create unique coupon codes that customers can redeem for products, which can be particularly useful for pre-selling items at events such as conferences.
• A WooCommerce Redeem Products Page can be created by duplicating your page.php and transforming it into a page template, such as page-coupon-redeem.php. This page will feature a simple form where customers can enter their coupon code.
• The redemption process can be enhanced with Ajax functionality, which allows for smoother and faster user interactions by reducing the need for page loads. This is achieved by validating the coupon code and automatically adding the corresponding products to the cart for checkout.
• The Smart Coupons plugin can be used to generate multiple coupons, track usage, limit usage, set expiry dates, apply coupons to specific products or categories, and enable automatic application of coupons.

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:

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">
		<p>
			<input type="text" name="coupon" id="coupon"/>
			<input type="submit" name="redeem-coupon" value="Redeem Offer" />
		</p>
		<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.

<?php
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
		exit();
	}
	// 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
		exit();
	} 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
		exit();
	}
}

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
        ev.preventDefault();
    });
});

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

Invalid Code Error Message

Valid Code/Cart Populated

Conclusion

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.

Frequently Asked Questions (FAQs) on Creating a WooCommerce Redeem Coupon Page