Demos
A demo is worth a thousand words.
With the following sample pages you can see what is possible with WooCommerce for Donation Platform. Some of the demos need other WooCommerce extensions (e.g. WooCommerce Subscriptions for recurring donations).
Explore what’s possible with Donation Platform for WooCommerce
Explore our live demos to see how Donation Platform for WooCommerce can help you create engaging donation forms, showcase fundraising projects, and build a donation experience that fits your website.
From simple donation forms to multi-step layouts, popups, and fundraising goals, these examples show you what’s possible and how you can customize your donation experience.
Some demos require additional WooCommerce extensions, such as WooCommerce Subscriptions for recurring donations.
Donation Form Styles
Explore different layouts and find the donation form that works best for your organization.
Style 1 — Multi-Step Form with Progress Bar
A three-step donation form with a progress bar to guide donors through the donation process.
Style 2 — One-Page Donation Form
A streamlined donation experience that brings the entire donation form together on one page.
Style 3 — Multi-Step Form without Progress Bar
A three-step donation form with a clean layout and no progress bar.
Style 4 — Redirect to Checkout
Let donors select their donation and continue directly to the WooCommerce checkout.
Style 5 — Banner Header
Enhance your donation form with a banner header that guides the user through the donation.
Style 6 — no header, top back arrow
Enhance your donation form with a minimal design that adds a back arrow in the upper left corner and guides users towards completing their donation.
Style 7 — 2 steps, no header
A compact donation form where billing details & payment are combined in a single step.
Style 8 — 2 steps, banner header
A compact donation form where billing details & payment are combined in a single step. A top progress indicator help the user navigate through the donation process.
Style 5 — Custom HTML
Take customization further with a banner header featuring custom HTML. Ideal for advanced users who want more control over their layout.
Explore the Custom Code Demo →
Simple Donation Form
Start with the essentials: a basic donation form without additional customization.
Customize the Donation Experience
Discover alternative ways to present donation options and integrate forms into your website.
Custom HTML Form
Use a checkbox instead of the default donation form layouts for a different selection experience.
Product Choice
Let donors choose between different donation products without selecting product variations.
Range Slider
Allow donors to choose their donation amount using an interactive range slider.
Product Image
Display the donation product image directly in the donation form.
Popups & Checkout Integration
Make donating more convenient by presenting forms in popups or integrating them directly into the checkout process.
Popup Donation Form
Display a Style 1 donation form in a popup instead of embedding it directly into the page.
Popup After Page Load
Show a donation form automatically in a popup after the page has loaded.
Checkout Integration — Full Donation Form
Integrate the donation form directly into the WooCommerce checkout page.
Checkout Integration — Simple Donation Form
See how a simple donation form can be integrated directly into the checkout page.
Explore Simple Checkout Demo →
Fundraising Projects
Showcase individual campaigns, communicate fundraising targets, and give donors a clear picture of your fundraising efforts.
Project Page
See how a WooCommerce product page can be used as a fundraising project with the Style 4 donation form.
Project with Fundraising Goal
Present a fundraising project with a defined goal to communicate your campaign’s target.
Project with End Date
Create a fundraising project with a defined end date to give your campaign a clear timeframe.
Project with Fundraising Goal — Alternative Example
Explore another project setup featuring a fundraising goal.
Explore Alternative Goal Demo →
Project Overview
Bring your campaigns together on one page so visitors can browse your fundraising projects.
Donor Account Management
WooCommerce Account Page
Give donors a place to manage their donations through their WooCommerce account page.
Ready to Create Your Own Donation Experience?
These demos are just a starting point. Explore the different layouts and features to discover how Donation Platform for WooCommerce can fit your organization’s fundraising needs.