For one of my personal sites, I was looking at introducing an option to allow people to add a charity donation to their order.
My use case was simply to have a section in between the cart and the payment options area which would calculate the difference between the total cost and the nearest pound and give the option for the difference to be added to the total as a charity donation.
As I searched for a solution, several donation plugins came up but that seemed too much bloat for what I needed so I put the kettle on and dusted off my keyboard and here is the brain child of my efforts!
First of all, this code will display a pretty “raw” box design wise on your checkout so you will need to adjust the CSS provided to match your website brand.
Before you go ahead and start messing up with your functions.php file, please make sure you backup your website in case you accidentally break something and be sure to use a child theme to avoid your file being overridden once you update your theme version.
Simply add the code below without the <?php or the ?> to your functions.php file before the closing tag ?>
Once you’ve done that, go ahead and add the below to your stylesheet
Be sure to adjust the CSS to your liking but your end result if you’ve used all the above correctly should look something like this and it should calculate the difference to add to your checkout via AJAX.
