How do you customize your website for donations, online giving and Offerings?
It’s one thing for businesses like Konga and Jumia and other e-commerce merchants to receive instant online payments by selling their stuff.
A lot of the available tools they use come out of the box and were designed for e-commerce purpose.
How do you customize those same tools to meet the need of a Not for profit organizations and religious bodies whose customers, in this case, are their donors and givers/partners respectively?
This post will show you just how you can customize your website to accept donations, online giving and Offerings.
The entire process of customization may seem too cumbersome for a religious organization and not for profit entities and associations. However, when your audience is online these days, would you rather continue with the old form of cash and bank deposits or tap into the convenience that online payments provide which a lot of people have come to prefer.
So, if you’d have your organization raise donors, receive partnerships and financial seeds of all kinds, you will do well to customize your website to receive this kind of payments.
I’ll show you how to set up a simple process to make this happen.
Things you’ll need:
- An active WordPress website.
- WooCommerce plugin installed and activated.
- An online payment gateway account like PayStack, AmplifyPay, Simple Pay or VoguePay. But for this post, I’ll be using PayStack. Because of all the other payment gateway providers, PayStack provides ease of use with WooCommerce plugins that allow us to perform these simple customizations.
Once you have these, it’s time to kick off your customizations so it meets the vital need of a not for profit organization.
As you may know, WooCommerce was built as an eCommerce plugin solution for WordPress users, so the out of the box customization was designed for eCommerce merchants.
Our goal is to change that, so you can present your site to easily accept offerings, donor monetary gifts and financial partnership from your members.
Ready to see how you can do this?
Let’s dive in.
First, make sure the WooCommerce plugin on your WordPress site is installed and activated.
Next, install and activate the PayStack Woocommerce Plugin.
To do these, go to WordPress Dashboard panel, click on plugins, then add new.
Type PayStack for Woocommerce into the search box.
As you can see in the image below, there are different options of PayStack plugins, stick to the PayStack for Woocommerce Plugin.
The PayStack Payment forms and PayStack Subscriptions have other uses.
PayStack Subscriptions is used to accept recurring subscriptions from members where you automatically bill your clients monthly like PayTV services e.g. DSTV, Gotv etc. This can come in handy for not for profit and religious bodies who want to create monthly donation club and partnership with their members. However, setting that up takes a different process and would make a great post for another day.
For now, let’s keep keeping it simple. Setting up payment pages to accept one-time donations, offerings and partnership.
Install and activate the PayStack for WooCommerce plugin.
Mine is already activated so it shows it’s active.
Now head over to WordPress dashboard panel on the left and find WooCommerce.
Click settings, then click Checkout.
Now, you can see that PayStack is installed.
Just a few setup processes will make it ready to use.
For this example, I’m using one of my client’s sites. So, follow along.
It’s time to edit some Checkout settings on the default page you see below before you hit the PayStack option.
Make sure you disable use of coupon. Just leave the box unchecked.
You can’t be accepting coupons on a site that accepts donations, offerings and other socially driven online giving.
Leaving this unchecked removes the use of coupons on the product cart and checkout pages.
Also, make sure you add a page that shows your organizations terms and conditions, just to promote transparency and allow your members understand the policy that back your organization, in case they are wondering.
Once you’ve done this, click save settings. Always remember to save your settings.
Now, let’s click on that PayStack button in the upper right and follow the following instructions to set up Paystack.
For a start, here’s what the page will look like. (See the image below).
- Make sure the enable Paystack button is checked.
- I love to change the title from the default Debit/credit cards to debit cards and Pay via Nigeria Bank because we all know in Nigeria we use debit cards majorly, except if you’re targeting international customers.
- Edit the description. I like to test different content just as you see in the image. It’s also okay to reiterate that their payments are secured by PayStack. PayStack has made a global name for safe and secure online financial transactions.
- Make sure you leave the test mode unchecked. You want live payments not test payments.
- Choose what type of PayStack form shows up. The options are Paystack inline and inline embed. I noticed that the inline embed doesn’t allow users to pay via bank, it doesn’t give that option by default. But the inline options which shows a pop up, shows the option of the Pay with bank. So I choose to go with that.
- Next, Log in to your Paystack account and copy your Live secret key and public key and add them. For this to work make sure your PayStack account is activated to live mode. Provide the necessary documentation and PayStack customer service would help you set it to live. If you don’t get your account live after 48-72 hours, you might need to email them directly, I’ve found that doing so actually gets them to respond on time and would make you avoid further delay.
- Before you close this page and call it a day, you can see the optional notification sentence on the top of the page, copy the notified URL call link and add it to your PayStack account under settings >> API Keys & Webhooks. This happens to be the same place where you get your live secret key and public key.
- When all this is done, click save settings below the page.
- You’re done. Your site is ready to receive payments.
However, your work is not completely done.
This is when the customization kicks in. All we’ve done so far is just to set up WooCommerce and Paystack and it you already know this, the WooCommerce basic set up still feels like you’re peddling products.
Now is the time to change the look and feel and even some of the call to action words on the site to fit the kind of work you do and the kind of payments you need to receive.
To do this you’ll need to visit the plugins page again to install and activate these new set of plugins.
The first is “YITH WooCommerce Name Your Price” Plugin,
Second, is the “Woocommerce Remove Quantity” plugin,
And third is the “WC Custom Add to Cart labels” plugin.
Return to Plugins>> Add new >> then type these plugins names one after the other.
Click install and activate to get them to work. Once you’ve done that, let’s move on and customize away.
The first is to: Allow members state the amount they would give on your website.
For a religious organization that needs to accept offerings and seed partnerships online, you don’t control the amount people give so setting a WooCommerce product with a tagged price isn’t the way to go. We need to have a way to allow members to choose the amount they’d like to give and that’s where the name your price plugin comes in.
Before we set up the payment page for any of your online giving we have to edit the giving instruction your members see using the “YITH WooCommerce Name Your Price” plugin.
To do this, head over to the your website sidebar >> YITH plugin >> Name your price.
What you see will look like this image below.
They box in orange is typically blank, all you got to do is add a sentence that tells your donors or members what to do with the custom price box.
It’s pretty obvious, as I want them to add their giving amount. You could use, “What amount o you want to donate today?”
Once that is done it’s time to set up your payment page. These payment page are also called product pages in WooCommerce.
Ready to make it happen?
To set up an offering payment page in WooCommerce.
Go to products in your WordPress left sidebar. Click on add new.
Add the title and Description to reflect that’s it’s for accepting online offerings or other types of giving, for example, a monthly a partnership as you can see below.
The same process applies in the case of a not for profit organization. In this case, label your payment page as a donation page.
On the same page, scroll down to where the WooCommerce product setting is listed. As you can see in the image below.
Check the virtual and Name your price box.
Note that the Name your price option only appeared because we added the “YITH WooCommerce Name Your Price” Plugin to the site.
Once you check the name your price box it disables the sale and regular price.
However, if you also sell tangible products, for example, for churches who sell books, tapes it’s okay to add their prices to their product pages.
Once you’ve done this, publish the page. You’d have something that looks like this.
As you can see, it removes the product price and allows your members or donors to add their custom amount.
There are other customization that made that page look the way it did. If yours only showed the name your price box, and you can still see the add to cart button as well as the add quantity button, no need to worry.
Our next step will remove those.
Shall we continue?
It’s time to remove the add quantity button.
The reason you need to remove this is because it doesn’t tie in with your goal. People don’t need to increase the number of their donations or offering. It’s not like they’re buying a real, tangible product.
To fix this, installing and activating the Qty remover plugin will remove the quantity in product pages instantly.
Next to remove the add to cart button.
At this time, you should already have installed and activated the “WC Custom Add to Cart labels” plugin.
Let’s now change the add to cart label to something more meaningful for you organization.
Go to settings under WooCommerce, click on Product >>> add to cart button. This is where you’d be able to change the add to cart label to something that works for you.
In this case, I use Checkout and Donate now. As you can see in the image below.
Make sure you hit save settings below the page.
So, that does it, this is how you can customize a typical WordPress website with WooCommerce built for out of the box eCommerce merchants for use within your not for profit and religious organization.
Thankfully, PayStack allows you to receive your payments seamlessly. When the setup process is done right, you should have no issues, accepting funds on your site.
Hope this works for your Ngo, church or other religious organization.
Have you found other ways to customize your website to accept donations, online giving and Offerings?
If yes, feel free to share.