How to Add a Tip at the Checkout in WooCommerce

| November 27, 2023

How to Add a Tip at the Checkout in WooCommerce

| November 27, 2023
woocommerce add tip at checkout

Try Orderable

Dive into Orderable’s demo and experience the future of hassle-free online ordering.

Join our Community

Join our community to connect with fellow users and share tips.

In this guide, we’ll walk you through how to add a tip at the WooCommerce checkout with the help of a plugin. Plus, we’ll also delve into why doing this will benefit your ecommerce store.

woocommerce add tip at checkout

Adding a tip at checkout in WooCommerce provides an opportunity for your customers to reward you for the great service you provide. It also increases the earning potential for your products sold via WooCommerce.

But, for a WordPress site that uses WooCommerce, adding a tip at the WooCommerce checkout isn’t possible unless you know PHP or coding. So, we’ll need the help of a plugin to do it.

The plugin found in this guide:

  • Orderable – Take orders online with Orderable. The WooCommerce plugin designed to help you manage your store, your way – with no added fees!

First though, let’s look at why you should add tipping to your WooCommerce checkout. 

Why add tipping to your WooCommerce checkout?

Adding tipping to your restaurant or any other store on WooCommerce has the following benefits. 

It will boost your average order value

By allowing your customers to leave a tip, you allow them to pay more for a product simply because they appreciate the quality of service you provide. 

By doing this, the tip will act almost like an extra fee that’s optional – boosting the average order value of your store.

It gives your products an unlimited additional earning potential

Customers tend to tip differently to each other. When you provide an open-ended tipping option, there’s no limit to the amount your customers will tip for your products. This gives you an unlimited earning potential above the quoted price. 

woocommerce tip at checkout orderable

Take advantage of an industry-standard 

If you run a food or service business, customers are likely used to tipping. A good number of employees in these industries live on tips, and customers understand that. As a WooCommerce store owner, you can use this and add tipping to your WooCommerce checkout page.

Motivation for your staff

Tips are a great way to motivate your staff, as the better service they provide, the more tips they get. You can channel all or a significant portion of the tips received to your processing and or deliveries teams to motivate them to work faster and more efficiently. 

Now that you have seen how adding tipping to your WooCommerce checkout bears a lot of benefits. So next, we’ll outline how to get it added to the frontend of your store. 

How to add tip at checkout to WooCommerce

The checkout page on a standard WooCommerce store doesn’t allow you to add tipping. Fortunately, you can do this with the help of a plugin. 

In this section, we’re going to show you how to use the online ordering system WordPress plugin, Orderable, to add tipping to your WooCommerce checkout.  

Add a tip with the WordPress plugin, Orderable

Orderable is an online ordering WordPress plugin that lets you create a self-sufficient ordering system for your small business. 

Orderable is a plugin that handles your orders for you. All you need to do is set it up (in a few steps) and then you’re left to add, process, and deliver WooCommerce products. 

WooCommerce for restaurants

It’s ideal for store owners with restaurants because you can easily set up a restaurant menu using it. It takes care of everything, including installing WooCommerce on your WordPress website for you, if you haven’t already. 

As a WooCommerce store owner, you always want to minimize abandoned carts by your customers. To mitigate this, Orderable comes with an improved checkout, which will, as a bonus, reduce checkout abandonment. This checkout is compatible no matter the payment gateway you use (including PayPal).

orderable checkout

Using Orderable as your ordering plugin for your WooCommerce store you’ll have lot of benefits, including:

  • Minimal effort in setting up (requires only 5 easy steps), well suited for small businesses.
  • Full control over the ordering system.
  • No additional charges or hidden fees.
  • Easily make updates and customize (with product add-ons, upsells, templates, and more).
  • And most importantly, it allows you to add tipping options to your WooCommerce checkout.
woocommerce add tip at checkout

Orderable allows you to add tipping to your WooCommerce checkout in 2 simple steps. Enabling tipping for your WooCommerce orders using Orderable is really simple. You just need to install and activate the plugin, and you’ll be ready to add tipping options to your WooCommerce checkout. 

No need for shortcodes, custom checkout fields, or conditional custom coding. Orderable does all the heavy lifting for you.

Orderable has built-in tipping amounts in percentages which you can set up. Alternatively, you can also create custom amounts depending on the products or services you’re offering.

custom tip at the checkout woocommerce

The tip section on the checkout page sits just above the order total in the order review or summary section. It appears as tipping buttons that customers can use (with predefined tip amounts), or use the additional text field to add a custom tip amount themselves.

In the next tutorial sections, we’re going to show you how to actually add this order tip section to your online store. 

Enable tipping on the WooCommerce checkout

If you want to enable tipping for your WooCommerce store, you must install the pro version of Orderable. Once you have installed and set up Orderable Pro, you can add tipping options to your WooCommerce checkout. 

In this section, we’ll walk you through a step-by-step process of how you can install and set up Orderable to enable tipping. 

To enable tipping at checkout, you start by purchasing Orderable Pro from the Orderable Website. After you complete the purchase, 2 files will be downloaded: Orderable and Orderable Pro, which you need to add to your WordPress website.

Follow these simple steps to add Orderable to your WordPress website:

  1.  On your WordPress dashboard, hover over Plugins and click Add New
  2. Click Upload Plugin at the top and upload the Orderable zip file you downloaded earlier.
  3. Click Install Now > Activate
  4. Repeat the above steps for the Orderable Pro zip file.
Orderable setup
  1. Next, you’ll enter your business information, for example, address lines, name, location, etc. This is the last step if you’ve already added your products.

To enable tipping at checkout, follow these simple steps:

  1. In your WordPress dashboard, hover over Orderable (on the left sidebar menu) and click Settings. Then, click on the Tip Settings tab at the top. 
  2. Click the Enable Tipping checkbox to activate tipping at checkout. That’s it. Now you can create different tip amounts for products in your store. 
enable tipping at checkout WooCommerce

Set up your chosen tip amount

Orderable offers different tipping options for your WooCommerce store/restaurant, including the ‘No tip’ option, the set tip options, and the custom tip option. When setting up your tips, you will be required to select from these. Now, let’s see how you can set up your chosen tip amount. 

Below the Enable Tipping checkbox, you’ll see the Tip Options with an +Add Option button along with other options:

  • Label – this is what the customer will see as a tipping option. We recommend that you label your tipping options with the amount of the tip, for example, 10% or $10.
  • Amount – is the actual tip amount. It could be 10.
  • Type – Here, you specify whether the tip is fixed, say $10 or a percentage, 10% in this case.

Once you have enabled tipping, follow these steps to set up a few different set tip amounts:

  1. To add a new tip option, click on the +Add Option button (blue).
  2. Next, you need to add a label to the tip option with the tip amount, for example, fixed amounts of $15, or 15%, if you don’t want to have a fixed amount.
  3. Then, add the actual tip amount as digits in the tip field, for example, 15, without any units. Then, specify the units under Type as a percentage (15%) or as a fixed amount ($15).  
  4. You should create more than one tipping amount to give your customers more options. To add another tip amount, follow the above procedure but change the amount. You can create more options, such as 20%, 25%, and so on. We recommend that you add 3 options.   
  1. Now that you have multiple tip amounts, you need to select the amount that will be pre-selected by default at checkout. Scroll down to the Default Option section and select the option that will be pre-selected by default. In most cases, it is the ‘No Tip’ option. When you select the ‘No Tip’ option, you can change what the text on this button says. 
  2. When you’re satisfied with all the settings, click Save Changes.

We have seen how you can set up your chosen tip amount and showcase it to your customers, so how can you do the same for the custom tip amount?

Add a custom tip amount

To add a custom tip amount button to checkout, follow these steps:

  1. First, you need to enable custom tip amounts by clicking on the Enable Custom Tip checkbox. 
  2. Then you can label this button as ‘Custom Tip’. When customers click on this button, a field will appear, enabling them to add a custom tip amount as a percentage of the quoted price.
  3. Once you’re finished, click Save Changes.
custom tip at checkout

So that’s it. This is everything you need to do with Orderable to set up tipping at your WooCommerce checkout. 

Add tipping to your WooCommerce checkout page today

In this guide, we have covered how you can easily add WooCommerce tips to your checkout page using Orderable. Orderable allows you to create a variety of tipping options for your customers, including ‘No tip’, selected tip amounts, and custom tip, as well as different tipping amounts. 

With Orderable, you get to give your product more earning potential by enabling tipping at checkout. 

The plugin found in this guide:

  • Orderable – Take orders online with Orderable. The WooCommerce plugin designed to help you manage your store, your way – with no added fees!

Related Articles

Get Your Restaurant Online With Orderable

The WooCommerce plugin designed to help restaurants take orders online – with no added fees!

View Pricing
Get started with Orderable