• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Tomasz Drzewiecki

Add a tip or donation at the WooCommerce Checkout Page

Updated: January 24, 2023 / Plugin Tutorials

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

Flexible Checkout Fields WooCommerce

Edit, add new or hide unnecessary fields from the WooCommerce checkout form. It's all about conversions and better user experience.

Download for free or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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.

    WooCommerce donation tip checkout
    First, add a new field - for example Checkbox
  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".

    WooCommerce tip on checkout, checkbox field general settings
    Tip in the WooCommerce store on the Checkout page - General
  3. Field visibility

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

    Display on settings to set the WooCommerce tip on checkout
    WooCommerce donation or tip on cart and checkout - Display On
  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.

    Pricing tab to set a price for WooCommerce tip on checkout
    WooCommerce donation tip checkout - Pricing
💡  This method for the donation may not be the best as it would require users to previously add some NGO products to the cart. Take a look at the second method below ↓

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)

Flexible Checkout Fields PRO WooCommerce £59

Edit, add new or hide unnecessary fields from the WooCommerce checkout form. It's all about conversions and better user experience.

Add to cart or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-15
Works with WooCommerce 7.1 - 7.5.x

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.

Flexible Product Fields PRO WooCommerce £59

Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).

Add to cart or View Details
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-15
Works with WooCommerce 7.1 - 7.5.x

💡  Our other Flexible Product Fields plugin is used to insert an additional product configuration field (on the product page). Read the article Tip in the WooCommerce store on the product page for more information.

Donations at the product page

💡 If you want to let visitors enter the donation themselves, you may use Custom Price for WooCommerce. You may also download a free version!

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

The final result. Donations of any amount in WooCommerce
💡  Read how to handle WooCommerce donations with this free plugin!

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!

Related to WooCommerce donation or tip on cart and checkout

  • Add EU VAT Number (with validation!)

    add vat number in woocommerce checkout
    EU VAT Number in WooCommerce checkout. Follow this simple guide to add EU VAT Number with validation.

  • Customize WooCommerce checkout

    customize woocommerce checkout free plugin
    A free plugin to customize WC checkout. Find out what Flexible Checkout Fields FREE can do with your checkout.

Tweet

3 minutes read1029 views

Tomasz Drzewiecki

From 2020 in WP Desk. First as a Happiness Engineer in the Rangers team. Now as a QA Engineer in the Sailors team.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Tutorials › Add a tip or donation at the WooCommerce Checkout Page

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk