How to add a donation form to Flatsome

Flatsome is built for WooCommerce shops, but it has no donation form, so you add a donation plugin and place it with UX Builder or a UX Block.

Short answerInstall Donor Merchant and create a Donate page. Add the Donation Form block in the WordPress editor, or in UX Builder add a text element and paste [donor_merchant]. For the header, use the Header Builder under Theme Options > Header. If you turned on any AJAX options under Advanced > Content Delivery, test the form both after clicking through to it and on a fresh page load.

Does Flatsome have a donation feature?

No. Flatsome by UX Themes is a WooCommerce theme. Its documentation covers shops, product pages and page building, but not donations. Some stores sell a "donation" as a WooCommerce product. A donation plugin keeps gifts out of your shop orders and is built around donors instead: recurring gifts with a donor portal, donation receipts and annual statements, and campaign goals.

Donor Merchant is a free WordPress plugin for one-time and recurring gifts through Stripe and PayPal. Every feature is free. It keeps its own donation and donor records, separate from WooCommerce orders. 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.

Where do I put the form in Flatsome?

You have three options. Use whichever fits how you build pages.

1. The WordPress editor

Flatsome pages can be edited in the normal WordPress editor as well as in UX Builder. Create a page called "Donate" and add the Donation Form block. You can type an optional heading in the block. For a campaign form, use the shortcode with campaign="3" instead.

2. UX Builder

UX Themes says its UX Builder "is based on shortcodes," so a plugin shortcode sits naturally in a layout. Open the Donate page in UX Builder, add a row with one column (or a 2/3 column beside your appeal), add a text element, and paste [donor_merchant]. Save and view the page.

If you see the shortcode printed as text, or the form looks broken, check that it is not wrapped in <pre> tags. UX Themes lists that as "a fairly common issue." Switch the editor to text mode and remove them.

3. A UX Block

UX Blocks are reusable pieces of content that you insert with a shortcode in pages, widgets and Theme Options. Go to UX Blocks > Add New, give it a title, add [donor_merchant] (and any appeal text), and save. Then copy its [block id="..."] shortcode wherever the form should appear. This is useful when several campaign pages share the same giving section.

In all three cases 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 [donor_merchant_progress campaign="3"]. Campaign IDs are listed under Donor Merchant > Settings > Shortcodes. The form is a centered white card up to 540 pixels wide.

Keep the form on giving pages. Donor Merchant loads Stripe.js and the PayPal SDK only where the form renders, so a Block placed in a site-wide footer would load them on every page of your shop.

How do I add a Donate button to the Flatsome header?

Flatsome has a drag-and-drop Header Builder under Theme Options > Header. Its elements include buttons ("custom buttons to the header") and a Shortcodes & HTML element. Drag a button into the header area you want, give it the label "Donate", and link it to your Donate page. Link to the page. Do not put the form itself in the header.

Check mobile separately. Flatsome's mobile sidebar menu has its own elements under Theme Options > Header > Header Mobile, in the Menu Elements section, and its own menu location, Main Menu - Mobile. Add your Donate page to the menu assigned to that location in Appearance > Menus so phone visitors can find it.

Which Flatsome settings can affect the form?

  • Advanced > Content Delivery (Pjax). Flatsome's Pjax feature is experimental and off by default. Turning on any AJAX option there enables Pjax for that part of the site. UX Themes notes that plugin scripts "might need a reinitialization after a Pjax refresh." If the form is blank when you arrive by clicking a link, but appears after a full reload, Pjax is the likely cause. Turn that option off, or ask a developer to exclude the Donate page using the experimental_flatsome_pjax filter that UX Themes documents.
  • Advanced > Optimize. This is where Flatsome's lazy loading is turned on. It applies to images and backgrounds, not to the payment fields.
  • Advanced > Global Settings. Custom scripts added here run on every page. If you add a tracking or chat script and the payment fields stop working, test with it removed.

Flatsome's speed guide pairs the theme with a caching plugin such as WP Rocket or W3 Total Cache. If the card fields do not appear with your cache plugin on, try excluding js.stripe.com, the PayPal SDK (www.paypal.com/sdk/js) and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js from any JavaScript delay or combine setting, or turn that setting off for the donation page. The donation page itself is safe to cache, because the form has no nonce. The donor portal and receipt links send no-cache headers automatically. See the page cache guide for common plugins.

When something does not work, UX Themes' basic troubleshooting steps apply: clear or disable all cache and minifying (including the browser cache), try a private window, and check the browser console for errors.

How do I make the form match my Flatsome design?

Copy the main color you set in Flatsome's Theme Options. In Donor Merchant, go to Settings > Forms > Form style, choose Custom, and paste the hex value. The live preview shows the result before you save. Then pick the button shape that matches your shop buttons: pill, rounded or sharp. The form's styles are scoped to .dm-form, so they do not change your product pages or checkout.

What should I check before going live?

  • Connect Stripe or PayPal (Stripe setup, PayPal setup). Your WooCommerce payment settings are separate and are not reused.
  • Add webhooks if you take recurring gifts, so renewals are recorded (webhooks).
  • Choose a thank-you page under Donor Merchant > Settings > General if you want one.
  • Make a test-mode gift on desktop and phone, arriving both by a menu click and by a fresh page load.
About these stepsWe checked these steps against Flatsome's documentation in October 2026. We have not tested Donor Merchant inside every Flatsome version. Theme menus change between versions, so if a label differs in yours, look for the equivalent element or setting.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.