Maker Weekly Week #17 Build a Donation Page with Woocommerce

Maker Weekly Week #17 Build a Donation Page with Woocommerce

We all know that Woocommerce is an eCommerce engine that you can use to sell things, but what If we need it to collect donations? I have recently proposed to one of my clients that using Woocommerce to collection donation for the initial stage and use it at stage two sell some of their products.

I am going to share how I build a donation page with Woocommerce. My first version is pretty rough, to build up for concept. I choose Potent Donations plugins because it helps to create a donation type of product, and it allows you to edit the donation part on the cart page. I created a page and put both Cart and Checkout shortcode on it, so you can edit the cart item on top for how much you donate, and the checkout info will be updated below. It works, but it doesn't look right.

I remove the cart shortcode from the donation page and make use of a checkout plugin to customize the checkout form. I wrote some code so that once the user fills in and update, the checkout form will  show with all the donations ( products ) will be shown in the checkout form already.

It's a little bit like the single checkout page concept where you complete everything in a single page, which church you want to donate, how much you wish to donate and choose how you want to donate, all within the same page.

The donation page is ready and utilizes the Woocommerce engine; you can add in other products and use it as a selling machine as well. I hope this gives you some ideas if you are looking for using Woocommerce to sell and doing other types of payment collection at the same time.

Potent Donations for WooCommerce
Easily accept donations of varying amounts through your WooCommerce store.
Checkout Manager for WooCommerce
WooCommerce Checkout manager is the most advanced way to customize checkout, manage checkout editor.
WooCommerce is a flexible, open-source eCommerce solution built on WordPress. Sell anything, anywhere and make your way.