Coupon code on checkout process

Question

I'm creating a shopping cart with the option to use a Coupon for discounts, but some doubts came to my mind. I was reading a study case where the web site had problems with users leaving the page on the checkout process to look for a Coupon, and the order was never finished.

So where should I put my Coupon box? During item selections (img 01) or during checkout (img 02)? Or what other solution/method should I use?

Img 01

Img 02

As far as I know, both situations may have the same issue, since users can leave the page at any moment to look for a new Coupon.

Partial solution (?)

As a complementary design to this I was thinking about using a helper to tell users 'How to get a Coupon?'. Since we only provide Coupons via birthdate, amount of purchases (ex.: after 10 purchases you win 50%) and Facebook promotions, for example. So, after clicking on the ? icon, a dialog box shows up explaning how to get a Coupon.

Answer 1

I think no matter where you place the coupon box, you're going to have some level of checkout abandonment by users looking for codes.

Option 1: Adjust the terminology

You could consider changing the term from Coupon (which sounds like something you can quickly Google to obtain) to Gift Code, Gift Card, or maybe even Promotional Code, which I think all sound more unique to the user. Amazon uses the latter two on the last step of their checkout (They also hide the input until you click on the "Have a gift card/promotional code?" link, which may be a method for qualifying people that have codes).

Maybe it would be good to change the question mark to something more enticing/relatable for users that don't have codes. What about "Don't have a code yet?". It would make it sound like you'll provide them with instructions on how to obtain a code, instead of instructions on what a coupon code is or how to use one.

Option 2: Don't use coupon codes at all

You can use query parameters or a specific route to pass the code into the page through the URL and apply the discount automatically. You could even cookie the user to save it so the discount is applied even if they leave the page and come back. I think this solution is best because it gets the job done with minimal friction for the conversion flow.

Answer 2

I would stick with putting the coupon code as it is in image 1. This allows the user to add or remove items from the shopping cart while seeing their total after the discounts. Users will want to see their final total/subtotal before clicking checkout, so that they are certain the coupon has had its effect. If they see the total after the coupon, they may be inclined to add an item. But if we use the layout in image 2, they will have to go back to the item selection.

Placing the coupon code entry box after item selection will force the user to figure out their total with the coupon themselves, before clicking checkout.

Finally, if something goes wrong with the coupon, this could affect the users purchase. If, for some reason, their coupon is no longer valid, they may make a smaller purchase, and in image 2 this means they would have to go back and remove some items.