Donation or Tip For WooCommerce

Description

Donation or Tip For WooCommerce is a free WordPress plugin that adds a fully configurable donation or tip widget to your WooCommerce cart and checkout pages. Let customers voluntarily contribute an extra amount to your store — whether as a charitable donation, a tip for your team, a carbon-offset contribution, or any other cause — without leaving the checkout flow.

The entire widget is managed from a clean, modern React-powered settings panel inside your WooCommerce admin. No shortcodes, no page builder blocks, no code editing. Enable, position, style, and manage donations entirely from one dedicated settings page, with a live donation report showing every order that included a contribution.

Requires WooCommerce to be installed and activated.

⭐ Upgrade to Pro

Why Use Donation or Tip For WooCommerce?

WooCommerce has no built-in way to collect voluntary extra payments from customers at checkout. This plugin adds that capability in the most flexible way possible — with two distinct donation modes, fixed and percentage amount support, a fully styled widget, multiple placement positions on both cart and checkout pages, and a built-in reporting dashboard, all for free.

Whether you run a nonprofit store, want to collect tips for your fulfillment team, offer a “round up for charity” option, or simply want to give customers a way to show appreciation, this plugin handles every use case without modifying your theme or requiring developer work.

Free Features

General Settings

• ✅ Enable / Disable Donation — Toggle the entire donation and tip functionality on or off from the admin panel with a single switch, without deactivating the plugin
• ✅ Donation Type: Predefined Values — Offer customers a set of preset donation amounts displayed as clickable buttons or a dropdown selector
• ✅ Donation Type: Free Text Input — Let customers type in any custom donation or tip amount manually, with a choice between fixed value and percentage at the time of input
• ✅ Predefined Amount Type — Choose whether predefined values represent fixed currency amounts or percentages of the cart subtotal
• ✅ Predefined Values List — Enter any comma-separated list of amounts (e.g. 5, 10, 15, 20) to display as preset donation options
• ✅ Currency Symbol — Set the currency symbol displayed alongside predefined donation values in the frontend widget
• ✅ “Other” Option Button — Show an “Other” button alongside predefined values that reveals a free-text input field for a custom amount
• ✅ Show / Hide Remove Donation Button — Optionally display a remove button that lets customers withdraw their donation before submitting the order
• ✅ Show on Cart Page — Enable or disable the donation widget on the WooCommerce cart page independently
• ✅ Show on Checkout Page — Enable or disable the donation widget on the WooCommerce checkout page independently
• ✅ Cart Page Position — Choose exactly where the widget appears on the cart page: before the cart, in the cart collaterals area, or after the cart
• ✅ Checkout Page Position — Choose exactly where the widget appears on the checkout page: before the form, after order review, after billing form, or after the full checkout form
• ✅ WooCommerce Blocks Compatibility — Fully compatible with the WooCommerce Cart Block and Checkout Block in addition to the classic shortcode-based pages

Style Settings

• ✅ Predefined Value Display Style — Switch between displaying predefined values as pill buttons or as a compact dropdown selector
• ✅ Donation Button Font Size — Set the font size of the main donation / add button in pixels
• ✅ Donation Alert Font Size — Set the font size of the success alert message shown after a donation is added
• ✅ Remove Button Font Size — Set the font size of the remove donation button independently
• ✅ Predefined Value Font Size — Set the font size displayed inside the predefined value buttons or dropdown
• ✅ Predefined Button Padding — Control the top/bottom and left/right padding of predefined value buttons independently for precise layout control
• ✅ Alert Text Color — Set the color of the success alert message shown after a donation is applied
• ✅ Donation Button Background Color — Customize the background color of the main add-donation button
• ✅ Donation Button Text Color — Customize the text color of the main add-donation button
• ✅ Remove Button Background Color — Set the background color of the remove donation button
• ✅ Remove Button Text Color — Set the text color of the remove donation button
• ✅ Predefined Button Default Background Color — Set the default background color of predefined value buttons
• ✅ Predefined Button Default Text Color — Set the default text color of predefined value buttons
• ✅ Predefined Button Hover Background Color — Set the background color of predefined value buttons on hover
• ✅ Predefined Button Hover Text Color — Set the text color of predefined value buttons on hover
• ✅ Predefined Button Active Background Color — Set the background color of the currently selected predefined value button
• ✅ Predefined Button Active Text Color — Set the text color of the currently selected predefined value button

Donation Report

• ✅ Built-in Donation Report Dashboard — A dedicated Donation Report tab inside your WooCommerce admin lists every order that included a donation or tip, with order ID, customer name, donation value, and date
• ✅ Total Donation Summary — See the total donations collected across all orders at a glance, with a per-page total in the report table
• ✅ Search and Filter — Search the donation report by customer name or order ID to find specific entries quickly
• ✅ Sortable by Amount — Sort the entire donation report by donation value in ascending or descending order with a single click
• ✅ Pagination Controls — Navigate large donation lists with full pagination, configurable rows-per-page (5, 10, 25, 50, or 100), and smart page number display
• ✅ Direct Order Links — Each row in the report links directly to the WooCommerce order edit screen for quick review
• ✅ Donation Saved to Order Meta — The donation or tip amount is stored as order meta (donation_price) on every WooCommerce order, making it available for custom queries, exports, and third-party integrations
• ✅ Guest & Registered Customer Support — Donations are correctly attributed to both guest checkouts and logged-in customer accounts in the report

Pro Version Features

Unlock the following advanced controls with the Pro Version:

• ⭐ Custom Field Title — Change the main title shown above the donation widget on the frontend (e.g. “Add a Tip”, “Support Our Cause”, “Round Up for Charity”) — fully editable in the Pro version
• ⭐ Custom “Other” Option Text — Translate or customize the label of the “Other” button that reveals the free-text input field
• ⭐ Custom Remove Donation Button Text — Change the label of the remove donation button from the default “Remove” to any text in any language
• ⭐ Custom Donation Button Text — Change the label of the add-donation button from the default “Add donation” to any custom text
• ⭐ Custom Donation Amount Label Text — Change the label shown next to the donation line item on the cart and checkout order summary (e.g. “Tip for our team”, “Charity donation”)
• ⭐ Custom Alert Success Message Text — Customize the confirmation message shown to the customer after they successfully add a donation

👉 Get the Pro Version →

Perfect For

• Nonprofit and charity WooCommerce stores collecting voluntary contributions at checkout
• Restaurants, cafes, and food delivery stores offering a tip option for staff
• Any store wanting to offer a “round up for charity” or cause-based donation option
• Digital product stores collecting optional tips from satisfied customers
• Subscription and membership stores giving members a way to contribute extra
• Eco-conscious stores offering a carbon offset or environmental donation option
• Freelancers and service providers selling via WooCommerce who want to accept gratuities

How It Works

1. Install and activate the plugin (WooCommerce must already be active).
2. Go to WooCommerce > Donation or Tip in your WordPress admin.
3. In the General tab, enable the plugin, choose your donation type (predefined values or free text input), set your predefined amounts, and configure which pages and positions to show the widget on.
4. In the Styles tab, customize all colors, font sizes, and button padding to match your store’s design.
5. Save your settings — the donation widget immediately appears on your cart and/or checkout pages.
6. Customers select or enter their donation amount and click the add button. The amount is added as a fee line item to the cart total.
7. View all donations received in the Donation Report tab, searchable and sortable by amount, with direct links to each order.