Creating a Virtual Tip Jar in WooCommerce

Why You Should Set Up Your Virtual Tip Jar on Your Existing Website

Virtual tip jars are springing up out of great need; due to COVID-19, our barista friends are struggling. If the current projections hold, this situation could be here for the next 18 or so months. We have great hope that this is an outside number, but let’s look at setting your virtual tip jar in a way that is future proof.

We see lots of folks setting up quick tip jars that are outside of their sites. This may work for now, but we want to build something sustaining. We can look to non-profit best practice for how to do this. When we design non-profit site, we begin to think about how to incentivize donations throughout out the checkout process, to create a relationship between giving and normal site interactions. If you are already selling on your website, add your tip jar to your actual site and upsell the heck out of it. The ideal use case over time is that, every time a customer buys a bag of beans for home, they are encouraged to tip. Let’s make this the new norm starting now.

Linea Caffe virtual tip jar page

How to Set Up Your Virtual Tip Jar on Your WooCommerce Shop

If you have a WooCommerce website, you can set up a virtual tip jar without purchasing any plug-ins (see the example virtual tip jar at Linea Caffe – then give a little love to their baristas). Here are the step-by-step details.

  1. Go to Products > Add New.
  2. Make it a Variable Product.
  3. Add Attributes (dollar amounts).setting up a variable product
  4. Go to Variations drop-down and choose Create variations from all attributes.
  5. Fill in the content for each amount you want to have available. Be sure you add an amount and mark the item as virtual (so no shipping is added).
  6. Now, make an update to each of your other products. Look under Product Data > Linked Products > Cross-Sells. Add your Virtual Tip Jar to the Cross-Sell area and it will show up as a suggestion in the cart whenever a customer purchases your coffee.

Extending the Tip Jar

There are a couple of refinements we’ve adding to our client sites. Both are paid plug-ins.

Letting Customers Choose Their Tip Amount

Any Amount shows up in the tip jar drop down

There is a $49 plug-in that allows customers to enter any amount they’d like to your tip jar. If you go this route, we suggest following the steps above and adding a final option of “choose your amount.” Follow the steps above with the following update.

  1. Purchase, install, and activate the Name Your Price plug-in.
  2. When you choose attributes in Step 3 above, add an Any Amount option.
  3. For Step 4 above, check the box that says Name Your Price for the Any Amount variation.
  4. Go to WooCommerce > Settings > Name Your Price. From here, you can update the copy that shows up in the tip jar. So, instead of Name Your Price, you can enter something like What Would You Like to Tip?
Top Bar on La Marzocco site

Quick Notification Bar

If we are looking at moving to online sales over time, the featured area of your website should be retained for sales. We’ve been using Top Bar ($16) to create quick notifications about changes. You can install and configure fairly simply and have a bar that is either on the top of your site or bottom (and can also be sticky). This is an excellent way to get your message out as it is quickly changing while keeping your featured real estate open to tell your customers about your coffee.

Love to Our Baristas

Now is the time to support our baristas, in the same way they’ve supported us day in and day out in cafés across the country. If you are a coffee lover, you can head over to Sprudge to see a list of virtual tip jars already in place or head to this Portland-specific list.