Blog Archives

Learn How To Set Up WooCommerce Coupons

The WooCommerce Coupons is a great way to give your customers discounts on products and/or services. In this tutorial I will show you wow to create a coupon and demonstrate the flexibility of expiration dates and usage per coupon.

Coupons are a great way to thank existing customers and to acquire new customers. It also allows you to create custom codes that you can easily share online, in newsletters, or personal emails to clients as a thank you.

To add a coupon go to WooCommerce > Coupons

Coupon Date General

1. This is the code that you will be sharing with your customers.

2. Details of your code. This doesn’t appear anywhere but is more for your own records if you want to apply any details here.

3. You have four options for discounts

4. Coupon amount – either the dollar amount of percentage. Do not add any symbols in here.

5. Allow free shipping – note that the free shipping method must be enabled to use this.

6. Apply before tax – will discount the item based on the discounted amount

7. Coupon expiry date – set this for any future date, best to do so you don’t forget it. But do let you customers know that date.

coupon date general

Coupon Data Usage Restriction

1. Minimum spend – you may choose to have a minimum amount that customers add to cart before they can use the coupon

2. Maximum spend – also this is good for large discounts. You may want to limit up to a certain amount.

3. Individual use – restricts the customer to only being able to use this one coupon. Especially good on cart discounts.

4. Exclude sale items – let’s you exclude any products or services you have on sale. Make note with the coupon to your customers that it cannot be applied to sales items so they aren’t surprised or confused.

5. Products – you can choose any product you have created here to allow the discount for.

6. Exclude products – exclude any specific items from the discount. This is good if you have created a cart discount but have some disclaimers on just a few items.

7. Product categories – same as products except you can use a category. You may have created a category just for these instances.

8. Exclude product categories – same as products except you can use a category. You may have created a category just for these instances.

9. Email restrictions – list of emails to check against the customer’s billing email when an order is placed.

coupon data usage restriction

Coupon Data Usage Limits

1. Usage limit per coupon – sets a restricted amount that the same coupon can be used over and over with all your customers that use it.

2. Usage limit per user – sets a restricted number of times a single user or customer can use the coupon.

coupon data usage limits

Applied Coupon

Once they enter the coupon in the field and click on apply, then this message appears and the final total reflects the discount.

coupon apply

Need more options?

If you are looking for a more dynamic use of coupons, including gift certificates, etc, there are several extensions to meet specific needs at WooThemes.

A Truely Simple JavaScript Plugin For Responsive Navigation

There are several ways to make navigation responsive, and usually the solution we need is quite straightforward. But despite the apparent simplicity, there are many underlying factors which, when thought through and implemented properly, can make a simple solution even better without adding more complexity to the user interface.

One of the problems I’ve encountered while building responsive navigation’s is that browsers currently don’t support CSS3 transitions to a height which is defined auto. Most of the time, we shouldn’t use fixed height either because the height of menu items might not be the same in all browsers, and the number of items may change. I also always try to reduce the weight of pages I build, so I’ve been wanting a solution that doesn’t require a big library such as jQuery to work.

Today, I’m pleased to introduce Responsive Nav, a free and open-source JavaScript plugin that solves these problems and more in one tiny package. It’s released under the MIT License, so you can use it in all of your projects for free and without any restrictions. The solution is not one size fits all, nor is it meant to be. But for those who are looking for a solution that does one thing well, it’s definitely a good choice.

responsivenav new4The official site, view live at


Responsive Nav is a tiny JavaScript plugin which weighs only 1.6 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

  • Simple, semantic markup.
  • Weighs only 1.6 KB minified and Gzip’ed.
  • Doesn’t require any external library.
  • Uses CSS3 transitions and touch events.
  • Removes the 300 ms delay between a physical tap and the click event.
  • Makes it possible to use CSS3 transitions with height: auto.
  • Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
  • Works in all major desktop and mobile browsers, including IE 6 and up.
  • Free to use under the MIT license.

example opt1The official demo, View live at

How It Works?

Responsive Nav is the successor of TinyNav.js which was released in 2011. While TinyNav worked so that it converted a regular navigation to a select menu, Responsive Nav only hides the original navigation and adds a toggle which opens and closes it. Responsive Nav doesn’t basically alter the html structure of the document at all, so it’s in that sense a much simpler solution.

Responsive Nav works by calculating in the background the max-height needed to fit all the menu items. When the user taps the navigation toggle the plugin uses CSS3 transitions to transition from a height that is set to 0 to the max-height it calculated earlier. Responsive Nav also attaches a touchstart event listener to the toggle, which makes it possible to remove the default 300 ms delay that happens when using click events.

Why Choose This Over Another Solution?

Responsive Nav is lightweight and doesn’t depend on any external library. The navigation opens instantly on touchstart — no more 300 ms delay on touch devices. It’s also (as far as I know) the only responsive navigation plugin out there that uses CSS3 transitions with variable height (although correct me if I’m wrong). Responsive Nav is also built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, right out of the box. Finally, Responsive Nav has been tested to work on 60+ mobile and desktop browsers, so that you would’t have to worry about browser support. See the full list of tested platforms.

Demo And Download