Are you looking to add a donation feature at the checkout page of your WooCommerce store?

Adding a donation option at checkout is a simple but powerful way to encourage customers to support meaningful causes.

Whether raising funds for a non-profit, supporting a community, or aligning your brand with a charitable initiative, inviting customers to donate at checkout can significantly impact.

In this guide, we’ll explore the benefits of using a donation plugin and walk you through how to set it up on your checkout page.

What is a WooCommerce Donation Plugin?

A WooCommerce donation plugin enables e-commerce stores, websites, and online platforms powered by WooCommerce to accept financial donations from users or customers.

It integrates with the website’s payment system, typically offering features for fundraising. 

For example, it integrates a customizable donation amount and recurring donation option to display forms at various stages of the user experience.

You can easily integrate a donation plugin with WooCommerce store checkout, payment processes, and sometimes with the cart page.

Here are some core features of a donation plugin:

• Customizable amounts preset or custom donation amounts
• Checkout integration adds donation options directly at checkout
• Recurring donations enable options for regular contributions
• Shortcodes and widgets to easily place donation forms on different site pages
• Analytics and reporting: feature to track total donations and provide insights

When might you want to add a donation option at checkout?

If your WooCommerce store is raising funds to support underprivileged communities—whether for educational supplies, food, or healthcare—adding a donation option at checkout gives customers a quick, easy way to contribute.

This approach helps raise funds and engages customers in a meaningful cause. With a donation plugin, you can offer suggested amounts or allow custom contributions, turning everyday purchases into opportunities to make a difference.

Why Add a Donation Feature on the Checkout Page?

Adding a donation feature at checkout is a perfect way for businesses, non-profits, and organizations to support important causes while strengthening customer connections.

Including a donation option at checkout makes it easy for customers to contribute, building goodwill and expanding your brand's impact.

Here are five reasons why adding a donation feature on the checkout page is a great idea:

• Provides a hassle-free donation process

A donation plugin allows customers to donate directly without extra steps, saving time and effort. Customers can just click and add the amount to their cart, making the experience seamless and more likely to inspire donations experience that drives them more likely to donate.

• Encourages automatic giving

Placing the donation option at checkout reaches customers when they are already in a buying mindset. This makes it easy to add a small contribution without interrupting their purchase flow.

• Boosts customer loyalty

Customers who see a business supporting charitable causes are more likely to feel aligned with its values, increasing the chance of repeat purchases and loyalty.

• Increases total revenue

Even small donations add up over time, increasing the total amount collected for a cause while boosting revenue for your brand or its selected charities.

• Enhances brand image

Supporting meaningful causes attracts socially conscious customers and positions your brand as a responsible, community-focused business, enhancing its overall reputation.

Adding a donation feature at checkout is an effective way to connect with customers and support important causes. It boosts contributions and enhances the customer experience, benefiting both the brand and the cause.

How to Add a Donation Feature At the WooCommerce Checkout Page?

We will use two plugins to add donations to WooCommerce checkout for successful fund collection.

• Donation for WooCommerce plugin
• FunnelKit Funnel Builder

The donation plugin for WooCommerce makes it easy for stores to accept donations at checkout. Customers can choose how much they want to donate from the customizable options. It makes it suitable for supporting causes or fundraising. Plus, it’s a simple way to boost donations through your WooCommerce store.

On the other hand, FunnelKit Funnel Builder helps you design beautiful checkout templates that appealingly showcase donation options and enhance your checkout process.

Unlike the default WooCommerce setup, which sometimes lacks visual appeal, FunnelKit’s templates offer a polished, user-friendly interface that encourages customers to donate.

Furthermore, you can create different checkout styles to match your brand and customer flow. Choose from options like a one-page checkout for speed, a multi-step checkout for a guided experience, a Shopify-style checkout for a professional look, or custom order forms. 

This means the panel is entirely under your control and has 100% flexibility and scalability.

The combination ensures that your donation feature functions smoothly and looks professional and inviting, creating a better customer experience and potentially increasing contributions.

Let’s get started:

Step 1: Install and activate the Donation for WooCommerce plugin

First, navigate to the page where you need to purchase the plugin.

Then, you’ll get a zip file to use. Go to your dashboard plugin area, upload the file, and install the plugin.

We have already installed the plugin. But from your end, you need to activate the plugin.

Step 2: Configure the general settings

It’s time to configure the plugin's general settings.

Navigate to its general settings page and configure these options.

1. Legacy cart donation means showing a donation campaign on the cart page
2. Legacy checkout donation means showing the donation campaign on the checkout page
3. Select the campaign that you want to show
4. Determine where you want to show the donation (both on the cart and checkout page)
5. The format and the position

We're enabling the option since we want to show it on the checkout page.

Once you’re done, save the changes.

Step 3: Create a donation campaign

The next step is to create a campaign. To do that, navigate to WC Donation>Add New.

Here you need to configure these things.

1. Enter a campaign title
2. Select the amount type
   • You can choose from three different types of donation amounts:
     • Pre-defined: Set specific amounts that users can choose from.
     • Custom value: Allow users to enter any donation amount of their choice.
     • Both: Provide users with the option to select from predefined amounts or enter a custom amount.
3. Add levels to add different donation levels or amounts for pre-defined values. For example, you could set multiple levels, such as $10, $20, or $50, each representing a specific contribution level.
4. Custom range: Set a minimum and maximum amount to restrict the range of custom donation values.
5. Display donation products to showcase the donation campaign on the single product and/or shop pages.
6. Campaign shortcode
   • It provides a shortcode [wc_woo_donation id="”] that you can copy and place on different pages to display this donation campaign.
7. Feature campaign
   • Toggle this option to display the campaign as featured
8. Set campaign categories to help organize and filter it. Categories like “Community Needs,” “Earthquake,” “Fundraise,” etc., can be selected or added.
9. Set a campaign cover image and then use the Publish button to make the campaign live.

On the left side of the screen, tap on the form settings and configure these settings.

• Display type: Choose a dropdown or other display styles for the donation field.
• Currency position: Set whether the currency symbol appears before or after the amount.
• Donation field label: Customize the placeholder text for the donation field.
• Donation button label: Set the text for the donation button.
• Donation button text color: Choose the text color on the donation button using a hexadecimal color code.
• Donation button color: Customize the background color of the donation button.
• Currency symbol color: Select the color for the currency symbol displayed in the donation field.
• Currency background color: Define the background color for the currency field.
• Tribute checkbox color: If enabled, set the color for any additional checkbox elements in the form.
• Campaign description: Here, you can add a detailed description of the campaign, explaining the purpose and importance of the donations.
• Campaign short description: This field allows you to enter a brief description of the campaign, which can be displayed on the checkout or product pages to give customers a quick overview of the cause.

Tap on the donation goal to define the target amount for your campaign.

Also, configure these settings:

• Donation goal toggle: This toggle allows you to enable or disable the donation goal feature for this campaign. If enabled, A visible goal will show contributors the campaign’s progress toward a specific fundraising target.
• Goal Type
  • Amount raised: Track the total dollar amount raised.
  • Percentage raised: Display progress as a percentage of the target amount.
  • Number of donations: Count the total number of individual contributions received.
  • Number of days: Show how many days remain for the campaign or track a time-based goal.
• Goal amount: This field allows you to set the specific target amount you aim to raise for this campaign. Enter the total dollar amount here.
• Initial goal amount: This field sets the campaign's initial starting amount. If the campaign raised some funds before launching online, you can enter that amount here to reflect accurate progress.
• Progress bar color: This option allows you to customize the color of the progress bar to visually show how close the campaign is to reaching its goal. Enter a hexadecimal color code to match your brand’s design or desired color scheme.
• Other options include Display Donor Count, Display Options, Display Goal on Widget, and Reset Goal.

Set the donation cause: Specify the purpose of the campaign.

• Enable or disable donation cause
• Donation cause name and description
• Use the Upload Thumbnail button to add an image representing the cause, which helps visually engage donors
• This section displays all added causes and allows you to manage them. You can select causes and delete them if needed.

Frontend Ordering: Control the display order of donation levels on the front end.

Tap on the time configuration.

• Set timer: Toggle to enable or disable a timer for the campaign, setting a time limit for donations.
• Timer type: Choose a daily or a specific day for when the campaign will be active.
• Start and end time: Set the start and end times for the campaign, controlling when donations are accepted each day or on specific dates.
• Timer display and type: Enable the timer display and choose between Flip Clock or Pomodoro style to show countdown time to users.
• Campaign after time ends: Select whether to Hide the Campaign or Display a Message when the timer expires.

Social Share: Add social sharing options to increase campaign visibility. By default, it’s disabled. But you can enable it from here. Once you’re done, hit the publish button to make your donation live.

You’ll get an individual URL for the donation. You can find them on the “All Campaigns” page. You can preview, edit, or delete them.

Step 4: Create a store checkout page

Now, we’ll create a dedicated checkout page with FunnelKit Funnel Builder to test the donation feature.

To do so, navigate to FunnelKit > Store Checkout and click the “Create Store Checkout” button.

FunnelKit offers seamless support with popular page builders, making creating beautiful and customized checkout pages easy.

You can design your checkout experience using Elementor, Bricks, Block Editor, Divi, Oxygen, and Customizer.

Additionally, there's an option for Other (Using Shortcodes) to add more flexibility. These integrations allow you to create visually appealing and user-friendly checkout pages that match your brand's style to improve customer experience and engagement.

Now, choose your preferred checkout template. We’re selecting the “Classic” template.

You can check the template details here. After you have done so, you can click “Import This Funnel.”

Then, provide the name of your store checkout.

Here are the stages on your checkout page. Click on the checkout page to customize the checkout form.

Step 5: Customize the checkout form fields

After entering the checkout page, you can see the available checkout fields in the form.

You can edit the page, add or remove the checkout fields, or make essential changes.

Add, edit, rearrange, or delete any fields and sections within your checkout form.

Hit save when done.

Step 6: Optimize the checkout page for conversion

FunnelKit optimizes your checkout page to perform better, increasing conversions in time.

You will have options to optimize your checkout page on the optimization tab.

Here are the optimizations available under this tab:

• Enable express checkout buttons to show smart buttons for Stripe Apple Pay, Stripe Google Pay, PayPal Express, and Amazon Pay for express
• Smart login systemizes the login process for returning customers.
• Inline field validation helps you prevent errors by validating form fields in real-time.
• Collapsible optional field allows optional fields to be hidden until needed, reducing clutter on the checkout page.
• Enhanced phone field adds improved formatting and validation for phone numbers (if enabled).
• Google address autocompletion auto-fills address fields using Google Maps (requires API key).
• Auto apply coupons apply coupons to the cart at checkout.
• Multistep field preview provides a preview of fields across multiple steps in the checkout process.
• Preferred countries let you prioritize certain countries depending on your needs.
• Time checkout expiry sets a time limit for completing the checkout process to avoid cart abandonment.
• Prefill form for abandoned users automatically fills in details for users returning to complete a purchase (enabled).
• Auto-fill state from ZIP code and country fill state information based on the ZIP code and country provided (enabled).
• Generate a URL to populate checkout and create a custom URL to pre-populate the form for a smoother experience.

Here's the video to get a full overview of how to optimize a checkout page with FunnelKit.

You can add order bumps and one-click upsells to boost your store's average order value.

In addition, FunnelKit Funnel Builder lets you create highly engaging custom thank you pages for a great impression.

Step 7: Enable the store checkout

Next, you need to enable the checkout page. Click on the “Enable Store Checkout” button.

Step 8: Preview and test the donation feature with the new checkout page

Here you can see the donation feature on the checkout page. Select the amount you want to donate, then click the button to move forward.

The donation amount is on the order summary. This means it will be automatically added to the cart after you add the amount from here.

Here’s an additional preview of how the donation feature works on the cart page.

You can combine WC donation with FunnelKit Funnel Builder to showcase your donation campaign and increase awareness.

6 Tips to Follow When Adding Donation at a Checkout Page

Adding a donation option at checkout is a great way to invite customers to support a meaningful cause.

However, it’s essential to implement it thoughtfully to ensure a positive experience and encourage contributions.

Here are six practical tips when setting up a donation feature on your WooCommerce checkout page.

1. Keep the donation option optional

Customers should feel invited, not obligated, to donate. Making the donation option optional creates a positive experience by giving customers the freedom to choose.

Therefore, if customers feel pressured, it could lead to frustration or even cart abandonment. A voluntary donation option is more likely to encourage contributions and foster goodwill.

2. Use clear, simple language

Explain the purpose of the donation in straightforward terms, using just a sentence or two.

Customers should be able to understand the cause at a glance without needing to read through lengthy descriptions.

For example, use language like "Support disaster relief efforts" or "Help provide education supplies for kids."

The more precise and concise the message, the more accessible customers can connect with the cause and feel motivated to donate.

3. Offer suggested donation amounts

Providing preset donation amounts, such as $5, $10, or $20, can help customers make a quick decision.

Alongside these options, consider adding a “Custom Amount” field for those who wish to contribute a different amount.

This approach gives customers flexibility while guiding them toward manageable contributions, making them more likely to take action.

4. Position the donation option prominently

Place the donation option in a noticeable spot on the checkout page, ideally near the payment information. 

The goal is for customers to see it naturally during checkout without feeling out of place or disruptive.

A well-placed donation option will make it easy for customers to add a contribution without complicating their experience.

5. Test for a smooth checkout experience

Before going live, thoroughly test the donation option to ensure it doesn’t disrupt the checkout flow. Ensure it works seamlessly across devices (desktop, mobile, and tablet) to provide a smooth user experience.

If your setup includes AJAX, check that adding a donation does not cause the page to reload or redirect unexpectedly. A seamless experience increases customers' likelihood of completing their donation and purchase.

6. Thank donors

A simple thank-you message on the confirmation page goes a long way. After customers complete their purchase and add a donation, show your appreciation with a quick note like, “Thank you for your donation! Your support truly makes a difference”. 

It’s a small gesture but leaves a positive impression, making them feel good about their contribution and more likely to donate again.

Final Thoughts on Adding Donations at Checkout

Adding a donation option at checkout effectively enhances your store’s positive impact and fosters a deeper connection with customers.

With a powerful donation plugin like Donation for WooCommerce, you can easily enable contributions, allowing customers to support essential causes as they complete their purchases.

With the proper setup and implementation, you can create a checkout experience that motivates customers to contribute to a cause they care about.

FunnelKit Funnel Builder makes it easy to build beautiful, customized checkout pages that look professional and engagingly showcase donation options, encouraging higher conversion and support for your fundraising goals.Ready to elevate your WooCommerce checkout experience?

Try FunnelKit Funnel Builder today to design impactful, conversion-friendly checkout pages that make a difference!