How to Add a PayPal Donation Button in WordPress

Updated: March 30, 2021

Do you have an NGO website? If yes, then you might want to add a PayPal donation button to make it easier for you to collect donations from generous people. If your website is built with WordPress, there are a lot of options of plugins you can install to add a PayPal donation, depending on which area on your website you want to display the button on. One of our suggestions is Elementor. You might know Elementor as a page builder plugin. Actually, Elementor is beyond page builder plugin. It comes with lots of widgets to accomplish many things on a WordPress site, including adding a PayPal donation button.

The benefit of using Elementor to add a PayPal donation button is that you can place the donation button anywhere. Whether on the sidebar, on the homepage, or even a blog post. Most importantly, you can use Elementor to create a more engaging landing page and add your PayPal donation button. Elementor comes with a visual editor to ease your job.

How to Add a PayPal Donation Button in WordPress Using Elementor

If you have never used Elementor before, you can read this article to learn how to use it. To be able to add a PayPal donation button, you need to use Elementor Pro since the widget to add a PayPal button is only available on the pro version. So, before we get started, make sure you already have Elementor Pro installed and activated on your WordPress site.

Elementor Pro comes with a widget called PayPal Button. You can use the widget to accept three PayPal transaction types: checkout, donation, and subscription. To use the widget, simply drag it from the left panel to the canvas area.

Once the widget is added, you can go to the left panel to make the settings. On the Pricing & Payments block under the Content, add your PayPal account (email address) on the PayPal Account field. On the Transaction Type option, select Donation. Add the item name (e.g., “donation”), SKU, donation amount, set the currency and other necessary pieces.

Once done making the necessary settings on the Pricing & Payments block, you can switch to the Button block (still under the Content tab) to set the button text, button icon, and alignment.

You can open the Additional Options block to make the additional settings like custom messages, sandbox, and to open the PayPal page in a new tab. You can also set a redirect page on this block.

To style up the button, you can go to the Style tab. There are two blocks you can open this tab. On the Button block, you can set the typography (font family, font size, font style, and so on) of the button text, set the background button color, set the text color, set the border radius, and so on. While on the Messages block, you can set the typography of the messages as well as the text color.

Once you are done customizing the PayPal Button widget, the next step depends on where you want to add the donation button to.

Adding the PayPal donation button to the sidebar area of WordPress

Elementor Pro allows you to create a global widget. A global widget of Elementor can be used as a WordPress widget, meaning that you can use it on the sidebar area of WordPress. That said, to be able to use the PayPal Button widget of Elementor as a WordPress widget, you need to turn it into a global widget first. To turn the PayPal Button widget above into a global widget, right-click and select Save as a Global.

Give your global widget a name and click the SAVE button.

Next, go to Appearance -> Widgets on your WordPress dashboard and add the Elementor Library widget to the sidebar area.

Select the global widget you have just created from the dropdown menu. If it doesn’t appear on the dropdown menu, try to reload the page.

Adding the PayPal donation button to a blog post

Want to add your PayPal donation button to a blog post? You can do so with the help of Elementor Blocks for Gutenberg plugin. It is an official plugin from Elementor to allow you to a add saved Elementor template (including global widget) to Gutenberg. The plugin is free and available on the WordPress plugin directory. You can install it first to use it.

Once the Elementor Blocks for Gutenberg plugin is installed and activated, you can write a blog post or edit an existing one. On the Gutenberg editor, add a new block and select Elementor Library and select the global widget you have created above from the dropdown menu.

Adding the PayPal donation button to landing page

If you want to add your PayPal donation button to a landing page, then you can simply create the landing page using Elementor. Again, you can visit this article to use Elementor in case you are new to Elementor. Elementor itself offers a bunch of ready-made landing page templates to streamline your workflow. You can simply select the landing page template you like to import it to the Elementor editor.

When editing the landing page of your choice, simply add the PayPal Button widget just like we have covered above. You can also add other elements (widgets) according to your need. Elementor Pro offers over 90 widgets in total. Once done editing your page, you can click the PUBLISH button to publish the page.

This page may contain affiliate links, which help support utilizeWP.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This