Donation For WooCommerce

Video Tutorial ↑ Back to top

Setup and Configuration ↑ Back to top

How To set up Donation For WooCommerce:

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.
  4. Go to → Wc Donation.
  5. Go to General Setting → Make changes as per your requirement
  6. Click Save Changes.

Getting Started ↑ Back to top

Product Settings:

  • Go to Products -> Add or Edit Product.
  • Hide Catalog Visibility (this option will hide the product from the shop page).

Note* Make Sure Product type should be (Simple Product)

  • Select “Simple Product”.
  • Set Regular Price to “Zero” otherwise donation will not be added.
  • Set Tax Status to “None”.
  • Set Tax Class to “Zero Rate”.

  • Go to Inventory.
  • Enter a unique “SKU ID”.
  • Select status “In Stock”.
  • Enable Sold individually.

  • Go to Shipping.
  • Set Shipping Class to “No Shipping Class”.

  • Click Publish / Update Product.

WC Donation Settings ↑ Back to top

General Settings:

  • Select Donation Product.

Select a simple product which you have created as a donation product. Only Simple Product will appear in the Donation Product list.

  • Select Donation Amount options.

Admin can set Pre-defined amount or a custom amount where user can enter desired donation amount.

There are two types of option:

  • Free Value: User has the ability to set the amount on the front-end.
  • Predefined Value: Enter values for the user to select from the front-end.

Currency Symbol

You can display the symbol of currency before or after the amount For e.g ($ 10 or 10 €)

  • Set Currency symbol position.
  • Save Changes.

Manage Campaign ↑ Back to top

  • Enable Campaign.
  • Add a new campaign & save. (you can add multiple campaigns).
  • Save Changes.

Note* Donation option will be visible at the cart page. Donation amount will be added to the cart total.

Free Value Donation Option

Screenshot 1:

Screenshot 2:

Pre-Defined Donation Option

Screenshot 1:

Screenshot 2:

Order Details ↑ Back to top

Donation Orders ↑ Back to top

  • Go to WooCommerce -> WooCommerce
  • Filter by Campaign Name.

  • View order for more details.

Styling Option ↑ Back to top

  • Enter Donation Field Label.
  • Enter Donation button Text.

  • Set Donation Button Color.

  • Set Button Text Color.

  • Save Changes.

Donation Form on Checkout ↑ Back to top

  • Go to WC Donation -> General Setting.
  • Enable “Show Donation Form on Checkout”.

Donation product will remain the same for cart and checkout page.

Donation option will be visible now on the checkout page. Donation amount will be added to the total order amount.

Front-end View (Checkout Page) Screen 1.

Front-end View (Checkout Page) Screen 2.

Donation Widget ↑ Back to top

  • Go to WC Donation -> Widget & Shortcode Setting.
  • Select Donation Product.

Only Simple Product will appear in the Donation Product list.

 

There are two option available in Select Campaign dropdown.

  • Select specific campaign to collect donation.

  • Select user defined option to display users all listed campaign.

  • Select Display Donation amount option either Free Value or Pre-defined.

  • For Predefined option select Display Donation styles (Dropdown / Radio button / Labels).

  • Set Currency Symbol position.
  • Enter Donation Field Label.
  • Enter Button Text.
  • Enter Button Color.
  • Button Text Color.
  • Save Changes.

  • Go to Appearance-> Widgets
  • Add Widget into Sidebar or Footer.

Frontend View (Widget)

 

Donating through widget will redirect user to checkout page instead of cart page.

Transaction from Widget ↑ Back to top

Step 1: Select Transaction Widget

Step 2: Go to Place Order Screen:

Step 3: select Donation Amount and Widget and Click on Donate Button

Step 4: Order Received

Shortcode Support ↑ Back to top

  • Click to copy Shortcode [wc_woo_donation] from the Widget & Shortcode setting.

  • Place shortcode [wc_woo_donation] on any page/post.
  • Publish / Update.

Fronted View (short code)

Donation Round Off Purchase ↑ Back to top

This feature allows user to round off their purchase total at the checkout page. For Example, if the total order cost is $19.5, user will be asked for $0.5 donation to round off order total. When the user donates $0.5 will be added up under the donation campaign in the order summary. So user will pay $20. $19.5 is the price of the purchase product and $0.5 will go into donation.

  • Go to WC Donation -> Round Off Donation.
  • Enable Round off option.
  • Select campaign or let user define.
  • Set currency symbol.


  • Enter Popup Title.
  • Enter Message to Popup.
  • Enter Button Text.
  • Select Button Color.
  • Select Button Text Color.
  • Save Changes.

Frontend View (Donation Round Off).

Round Off Multiplier ↑ Back to top

In this feature, users can round off their final payment values that may appears in decimal. If the price of product is in rational value and you are checking out for finalizing the transaction so a pop will appear with suggested amount to donate for any listed campaign. Users can skip this process if they don’t want to round off the value. Moreover let’s suppose you are purchasing a product that has a value of 25$ and then you are donating an amount of 2.5$ for any listed or specified donation product then this transaction will take you to the round off value option in which your final payment can be settled as 28$.

Round off Multiplier (number should be greater than 0. If empty or other value than integer. Then it will be considered as 1)

How it works: suppose if you input 8 then your cart total will be reached to the nearest number which will be divisible by 8.
Cart Total : 27.35
Round off multiplier : 8
Now after 27 your next number which will be divisible by 8 is 32
So, 32 – 27.35 = 4.65
Your donation will be 4.65.

Note: round off will work only if your cart total is in decimal if it is a whole number then round off functionality will be ignored.

Steps:

  1. Go to WcDonation then Round Off Donation Tab
  2. Enable Round Off Donation
  3. Set Donation amount as per your requirement

Goto WC Donation > Round Off Donation Tab

By proceeding on checkout it will show the following screen at front end.

The donation pop up will appear on clicking proceed to checkout button. User needs to select the round off value product from drop down option. Moreover donation and round off values can be pre-selected or can be driven by user.

By proceeding on this option we will move towards the final checkout screen.

As we can see that the value has been round off and order has been placed.

Disable Cart Donation ↑ Back to top

You can Enable or Disable Donation from the cart page as per your requirements.

Steps:

  1. Go to WcDonation then General Tab
  2. Click on “Show Donation form on cart” button to Enable or Disable
  3. Click on Save changes
  • Goto WC Donation > general setting tab
  • There is an option to enable/disable the donation form on the cart page

By disabling the donation on cart it will impact the cart part as shown in below image:

As we can that there is no more option for donation in cart.

Display Both Free And Pre-Defined Donation Amount ↑ Back to top

In this feature admin can set both amount for Donation:

  • User-Define and (b) Pre-Defined amount of donation options will display on the Cart and on Checkout.

When admin select both options from settings, customers is able to enter donation amount and can select pre-defined amount as well.

Steps:

  1. Go to General settings.or Widget & Shortcode settings
  2. Select Both from Display Donation drop down
  3. Click on Save Changes

1- Go to WC Donation > General Setting Tab

2-Front End Display

3- Order Details

Amount With Decimals ↑ Back to top

In this option user can set decimal amount for donation from backend as well as the customers can also input decimal values.

From back end option:

Front end view:

Now user can input decimal values in checkout donation options as well as from cart donation option.

Meta Data From Plugin ↑ Back to top

Any product that has selected for donation and had ordered by any customer so the donation amount will get listed in a separate column.

Front-End View ↑ Back to top

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top