[donor_merchant] into a Text Block element in Avada Builder. For the header, add the page to your menu and set the item's Menu Button option in Avada Menu Options. If the card fields stop appearing after you change Avada's Performance settings, undo the last change and test again.Does Avada have its own donation feature?
Partly. Avada ships a Stripe Button element. Its Price Mode has a Customer Chooses setting, which Avada's documentation describes as letting the visitor enter their own amount "for donations or pay what you want." You set a Minimum Amount and Maximum Amount, plus a Payment Success URL and Payment Cancel URL.
That is enough for a single "give any amount" button. Avada's documentation for the element does not describe recurring payments, PayPal, a list of donors inside WordPress, or receipts. If you need any of those, use a donation plugin instead.
Donor Merchant is a free WordPress plugin that takes one-time and recurring gifts (weekly to yearly) through Stripe and PayPal, keeps donor records, sends receipts, and gives donors a self-service portal. Every feature is free. Install it from Plugins > Add New by searching for "Donor Merchant". It needs WordPress 6.2 or newer, PHP 7.4 or newer, and HTTPS. There is nothing to switch off in Avada first. If you used a Stripe Button for donations, remove it from your donation page so donors see one way to give.
Where do I put the form in Avada?
Avada's own guide for third-party form plugins says to "use a Code Block or Text Block Element, and paste the shortcode in." The Text Block is the simpler choice. Its documentation says you can insert shortcodes in it.
- Create a page called "Donate" and open it in Avada Builder (back-end or Live).
- Add a Container with a single column, then add a Text Block element.
- Paste
[donor_merchant]into it and save.
The shortcode takes options. [donor_merchant campaign="3"] ties the form to a campaign, and [donor_merchant title="Support our work"] changes its heading. For a goal thermometer, add a second Text Block with [donor_merchant_progress campaign="3"]. Your campaign IDs are listed under Donor Merchant > Settings > Shortcodes. If you edit a page with the WordPress block editor instead, the Donation Form block does the same job.
The form is a white card up to 540 pixels wide that centers itself. A full-width column works, and so does a 2/3 column beside a short appeal and a photo.
Why not the Code Block?
It works, but it has two conditions in Avada's documentation. The Code Block Encoding option must be on under Global Options > Advanced > Features, and a Code Block only saves for users with the unfiltered_html capability, which on a normal single site means administrators. If a staff member with an Editor account maintains the donation page, use the Text Block.
How do I add a Donate button to the Avada header?
Avada's Menu Element shows a menu you build in Appearance > Menus, so the button starts there.
- Add your Donate page to the main menu in Appearance > Menus.
- Click the Avada Menu Options button on that menu item.
- Set Menu Button to Button Small, Button Medium, Button Large or Button xLarge and save.
Avada's documentation notes that the button's look comes from the global button styles under Avada > Options > Avada Builder Elements > Button, so it will match the other buttons on your site.
If your header is a custom Header Layout Section built with Avada Layouts, you can also place a Button element next to the Menu Element and link it to the Donate page. Link to the page rather than putting the form itself in the header.
Which Avada performance settings can affect the form?
Donor Merchant loads its CSS, its script, Stripe.js and the PayPal SDK only on pages where the form appears. Its form script loads in the footer and does not depend on jQuery. Even so, payment fields depend on outside scripts, so check these Avada settings after you add the form.
- Global Options > Performance > Load jQuery In Footer. Avada warns this "can cause JS scripts to break." Donor Merchant's own script does not use jQuery, but other plugins on the page might.
- Enable JS Compiler. Avada says that by default "all the javascript files are combined." If the payment fields fail after a change, switching the compiler off for a test tells you whether it is involved.
- Combine Third Party CSS Files. This merges the CSS of plugins you select into Avada's main stylesheet. Avada says it is not recommended alongside a cache plugin that combines files, and that Avada's caches must be reset after a change. If you select Donor Merchant there and the form looks unstyled, take it back out and reset the caches.
- Performance Wizard (Avada > Performance). The Elements step has a Find Recommendations button that scans your site and deselects the elements you are not using, and deselected elements no longer appear in the Builder. If you ran it before building the donation page and the Text Block is missing, re-enable it in that step. The Optimization step warns that some options "can also break functionality, particularly if you are using a caching plugin."
If the payment fields do not appear, try this. In whatever tool delays or combines JavaScript, exclude js.stripe.com, the PayPal SDK (www.paypal.com/sdk/js) and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js, or turn that optimization off for the donation page. Then clear every cache and reload. The donation page itself is safe to cache because the form carries no nonce. The donor portal and receipt links send no-cache headers on their own. Our page cache guide covers the common cache plugins.
How do I make the form match my Avada design?
Go to Donor Merchant > Settings > Forms > Form style. Choose Custom and enter the same hex color you use for buttons in Avada's global button options. The live preview shows the result before you save. Then pick a button shape (pill, rounded or sharp) close to your Avada button radius. The form's styles are scoped to .dm-form, so they do not change the rest of your Avada pages.
Avada's Text Block has its own typography and color settings. Leave them at their defaults for the donation block so they do not fight with the form's styling.
What should I check before going live?
- Connect Stripe or PayPal (Stripe setup, PayPal setup).
- Add the webhooks if you offer recurring giving. Renewals are recorded through them (webhooks).
- Optionally choose a thank-you page under Donor Merchant > Settings > General.
- Make a test-mode gift on desktop and on a phone, with any optimization and cache settings you plan to keep turned on.