How to Set Up a Donation Page with WooCommerce: A Beginner’s Guide
Want to make it easy for people to support your cause with donations through your WordPress website? You’re in the right place! Using WooCommerce, the popular e-commerce plugin, you can easily create a dedicated donation page. This guide will walk you through the steps, even if you’re a complete beginner.
Why WooCommerce for Donations?
While there are dedicated donation plugins, WooCommerce offers flexibility and control, especially if you’re already using it for selling other products. You can leverage existing payment gateways, manage transactions efficiently, and even offer “donation products” with varying amounts.
Imagine you run a local animal shelter. Instead of relying on a clunky third-party donation platform, you can integrate donations directly into your website, making it seamless for supporters to give. They can use familiar payment methods, track their donation history, and even receive email confirmations – all within your existing WooCommerce setup.
Step 1: Install and Activate WooCommerce
If you haven’t already, the first step is to install and activate the WooCommerce plugin.
1. From your WordPress dashboard, navigate to Plugins > Add New.
2. Search for “WooCommerce.”
3. Click Install Now and then Activate.
4. Follow the on-screen setup wizard to configure basic settings like currency and store location.
Step 2: Create a “Donation Product”
Now, we’ll create a product that represents the donation option. This is the core of your donation page.
1. Go to Products > Add New.
2. Give your product a relevant title, such as “Support Our Cause – Donate Today!” or “Make a Donation to [Your Organization Name]“.
3. Write a compelling description that explains where the donations will go. For example: “Your generous donation will help us provide food, shelter, and medical care to animals in need.” Be clear and transparent about how donations are used!
4. In the “Product Data” meta box, select “Simple product” from the dropdown.
5. Crucially, check the “Virtual” box. This means no shipping address is required. This is essential for a donation product!
6. Set the price to zero (0). We’ll enable users to choose their donation amount later.
7. Go to the Inventory tab. If you want to limit the total donations, you can manage stock. Otherwise, leave “Manage Stock?” unchecked.
8. (Optional) Add a Product Image: Upload a visually appealing image related to your cause. This could be a picture of your beneficiaries (animals, people, or the environment you’re supporting).
9. Publish the product.
Step 3: Enable Custom Donation Amounts
This is where the magic happens! We need to allow users to enter the amount they wish to donate. There are a few ways to achieve this:
Option 1: Using a Plugin (Recommended for Beginners)
Several plugins make handling custom donation amounts easy. Search for “WooCommerce Donation Plugin” in the WordPress plugin repository. Popular options include:
* GiveWP: A dedicated donation plugin that integrates well with WooCommerce.
* YITH WooCommerce Donations: Specifically designed to handle donation amounts.
* WooCommerce Custom Product Addons: Can be used to add a custom field for the donation amount.
These plugins typically provide a simple interface to add a custom amount field to your donation product page. They handle the calculations and cart updates automatically. Follow the plugin’s documentation for specific setup instructions. For example, with a plugin like “WooCommerce Custom Product Addons,” you might create a “Number” field labeled “Donation Amount ($)” that customers can fill in.
Option 2: Code Snippet (For More Technical Users)
If you’re comfortable with code, you can add a custom amount field using a PHP snippet. Back up your site before making any code changes!
Add the following code to your theme’s `functions.php` file or use a code snippets plugin:
/**
- Add a custom donation amount field to the product page.
// Only show the field for the donation product. Replace ‘YOUR_PRODUCT_ID’ with the actual product ID.
if ( $product && $product->get_id() == ‘YOUR_PRODUCT_ID’ ) {
echo ‘
echo ‘‘;
echo ”; // Default value of $10
echo ‘
‘;
}
}
add_action( ‘woocommerce_before_add_to_cart_button’, ‘add_donation_amount_field’ );
/
* Add the custom donation amount to the cart as a custom price.
*/
function add_donation_amount_to_cart( $cart_item_data, $product_id ) {
if ( isset( $_POST[‘donation_amount’] ) && $_POST[‘donation_amount’] > 0 ) {
$cart_item_data[‘donation_amount’] = sanitize_text_field( $_POST[‘donation_amount’] );
$cart_item_data[‘donation_amount_price’] = floatval( $_POST[‘donation_amount’] ); // Store the price
$cart_item_data[‘line_total’] = floatval( $_POST[‘donation_amount’] ); // Important: set the line total!
}
return $cart_item_data;
Explore this article on How To Set Woocommerce Shop Page To One Category
}
add_filter( ‘woocommerce_add_cart_item_data’, ‘add_donation_amount_to_cart’, 10, 2 );
/
* Display custom donation amount in the cart and checkout.
*/
function display_donation_amount_in_cart( $item_name, $cart_item, $cart_item_key ) {
if ( isset( $cart_item[‘donation_amount’] ) ) {
$item_name .= sprintf( ‘
- Donation Amount:
- $%s
‘, $cart_item[‘donation_amount’] );
}
return $item_name;
}
add_filter( ‘woocommerce_cart_item_name’, ‘display_donation_amount_in_cart’, 10, 3 );
/
* Update cart item price based on custom donation amount.
*/
function woocommerce_before_calculate_totals( $cart_object ) {
if ( is_admin() && ! defined( ‘DOING_AJAX’ ) )
return;
// Iterate through each cart item
foreach ( $cart_object->get_cart() as $cart_item_key => $cart_item ) {
// Adjust price
if( isset( $cart_item[‘donation_amount_price’] ) ) {
$price = floatval( $cart_item[‘donation_amount_price’] );
$cart_item[‘data’]->set_price( $price );
}
}
}
add_action( ‘woocommerce_before_calculate_totals’, ‘woocommerce_before_calculate_totals’, 10, 1 );
Important Notes for the Code Snippet:
* Replace `YOUR_PRODUCT_ID` with the actual ID of your donation product. You can find the product ID Check out this post: Woocommerce How To Change Category Page Layout on the product edit page in the URL (e.g., `post=123`).
* This code adds a simple number field with a default value of $10. You can adjust the `min` and `value` attributes to suit your needs.
* This code requires some basic CSS styling to make the donation amount field look good on your product page. Read more about How To Change Bank Connections For Woocommerce Payments You can add CSS to your theme’s stylesheet or customize it directly in the “Customize” section of your WordPress admin.
Step 4: Create a Dedicated Donation Page
Finally, create a dedicated page on your website for donations and add the product to it.
1. Go to Pages > Add New.
2. Give your page a clear title like “Donate” or “Support Us”.
3. Add a compelling introduction explaining why donations are important and what they Discover insights on How To Use Content Egg With Woocommerce will be used for. For example: “Your contribution makes a real difference in the lives of [who you help]. Every dollar helps us provide [what you provide].”
4. Add the WooCommerce product to the page. You can do this in a few ways:
* Using the WooCommerce Shortcode: Insert the following shortcode into the page content: `[product id=”YOUR_PRODUCT_ID”]` (Again, replace `YOUR_PRODUCT_ID` with the actual product ID).
* Using a Page Builder: If you’re using a page builder like Elementor or Beaver Builder, look for a WooCommerce product element and select your donation product.
5. (Optional) Add a Call to Action: Include a clear call to action button or link that directs users to the donation page. For example, “Donate Now,” “Support Our Work,” or “Make a Difference.”
6. Publish the page.
Step 5: Test and Promote Your Donation Page
Before launching your donation page, thoroughly test the entire process. Make a small test donation yourself to ensure that:
* The donation amount field is working correctly.
* The donation is added to the cart with the correct amount.
* The checkout process is smooth and secure.
* You receive a confirmation email after the donation is processed.
Once you’re confident that everything is working correctly, promote your donation page through your website, social media channels, and email newsletters. Make it easy for people to find and support your cause!
SEO Tips for Your Donation Page:
* Keyword Research: Use keywords like “donate,” “charity,” “support,” “[your organization name],” and “[your cause]” in your page title, description, and content.
* Optimize Page Title and Meta Description: Craft compelling and keyword-rich page titles and meta descriptions that entice people to click on your page in search results.
* Use Internal Linking: Link to your donation page from other relevant pages on your website.
* Encourage Social Sharing: Add social sharing buttons to your donation page to make it easy for people to share your cause with their friends and followers.
* Monitor Performance: Use Google Analytics Learn more about How To Add Ninja Form To Woocommerce Single Product Page to track the performance of your donation page and make adjustments as needed.
By following these steps, you can easily set up a donation page with WooCommerce and start accepting donations online. Good luck and thank you for making a difference!
