Add a tip or donation at the WooCommerce Checkout Page

Recent months have been a period of changing plans for eateries and adapting to new realities. Even those facilities that were reluctant to WooCommerce stores launched their online sales. Let's see how to add a tip to the WooCommerce checkout page or let visitors send an additional donation!

👉🏼  If you're running a restaurant, selling services, or need more money for your NGO you can get additional profit by letting users leave a tip or send a small amount of money.

Today, I will show you both how to add a tip and a donation option at the WooCommerce checkout page!

Table of contents

• Tip or donation at the checkout
• Add a tip on the product page
• Donations at the product page

Tip or donation at the checkout

You can add both a tip and a donation at the WooCommerce checkout page. The field will contain the total amount to be paid so that the user can judge what tip (or donation) amount will be appropriate.

The Flexible Checkout Fields plugin will be helpful here for adding a new field to the Checkout page. This tip/ donation field will work best as an option field such as a Checkbox (available in the free version) or  Select (available in PRO only).

Flexible Checkout Fields FREE - Feature Overview

Steps to add a tip (or a donation) to the checkout page

This field will work if the store prefers a fixed rate or a percentage of the total price.

1. Add a new Checkbox

   Check the appropriate Field Type and enter a Label.

   The field will appear in the list of fields at the bottom right. Drag the field to a different position if needed.

   

2. Field settings

   Do not check the Required field checkbox.

   Enter a Value. This is the text that will appear instead of the field label (e.g. in the summary) if the customer selects the checkbox. Enter here, for example, "I agree to tip".

   

3. Field visibility

   Select the Display On tab and uncheck the Display field label checkbox.

   

4. Price settings

   Select the Price tab and check the Enable pricing checkbox. New options will appear below.

   Now, choose the Price basis option from the list:

   1. Fixed - net price set in currency units and independent of the cart
   2. Percentage of Subtotal (ex. VAT) - percentage amount related to the net subtotal
   3. Percentage of Subtotal (incl. VAT) - percentage amount related to the gross subtotal
   4. Percentage of Total - percentage amount related to the Total

   Finally, enter the Value (amount or percentage of the tip/ donation) and the Tax class e.g. 0% VAT. Save Changes.

   

As you can see, the whole process comes down to what options the user gets to choose a tip. A simple checkbox with an assigned price (fixed or percentage) is enough for one option. But for more options, it might be better to insert a Select or a Radio.

If the customer selects the checkbox and gives a tip - then such information will of course appear in the Checkout form. But the tip note will also be visible in places like:

• purchase summary
• confirmation emails
• My Account subpage
• WP dashboard (when editing a purchase)

Tip at the product page

On the other hand, you may want to add an option to leave a tip on the product page. Often there are other fields to configure the dish (e.g. pizza toppings and dough) so one more field will look natural and blend in with the surroundings.

Donations at the product page

The extension lets you enable the custom price field for any WooCommerce products. So it's great to let visitors send donations in WooCommerce!

Summary & more about Flexible Checkout Fields

The Flexible Checkout Fields PRO plugin makes it possible to add a new field in the Checkout form. The tip in the WooCommerce store is added as global and therefore with the entire purchase.

You've also learned how to add a donation or a tip on the WooCommerce product page.

If you have any questions let us know!