How to add a donation form to TheGem

TheGem has no donation feature, but its Elementor and WPBakery editions both take a donation plugin's shortcode.

Short answerInstall Donor Merchant and paste [donor_merchant] into a Donate page: Elementor's Shortcode widget in TheGem for Elementor, or a Text Block in TheGem for WPBakery. If you ran TheGem's One-Click Optimization with JavaScript delay on, add Stripe, PayPal and the form script to its Excluded JavaScript Files list.

Does TheGem include a donation feature?

No. TheGem, from CodexThemes, is a multipurpose and WooCommerce theme. Its documentation covers contact forms through Contact Form 7, newsletter forms and shop features, but no donations. You add donations with a plugin.

Donor Merchant is a free WordPress plugin for one-time and recurring gifts through Stripe and PayPal, with donor records, receipts and a donor portal. Every feature is free. Install it from Plugins > Add New by searching for "Donor Merchant" (WordPress 6.2+, PHP 7.4+, HTTPS). Then follow Getting started.

If your TheGem site also runs a WooCommerce shop, keep gifts on the donation form rather than selling them as a product. On WooCommerce.com, donor-chosen amounts take the Name Your Price extension ($59 a year) and monthly billing takes WooCommerce Subscriptions ($279 a year), as published October 2026 (verify with WooCommerce). Even then, the gift is recorded as a shop order, not a donation.

Where do I put the form in TheGem?

TheGem comes in two editions, one for Elementor and one for WPBakery, and both get the same TheGem elements. TheGem's docs note that the Elementor edition only needs the free version of Elementor. Create a page called "Donate", then:

  • TheGem for Elementor: add Elementor's Shortcode widget and paste [donor_merchant] in its Content tab. Elementor shows the shortcode's output in the editor, but the payment fields may only load on the published page, so test there.
  • TheGem for WPBakery: click Add element, add a Text Block and paste the shortcode. WPBakery's docs recommend the Text Block for third-party shortcodes. TheGem's own elements sit in the "TheGem" tab of the same window.
  • Block editor pages: use the Donation Form block.

Options include [donor_merchant campaign="3"], [donor_merchant title="Support our work"], and [donor_merchant_progress campaign="3"] for a goal thermometer. Campaign IDs are listed under Donor Merchant > Settings > Shortcodes.

The form is a white card up to 540 pixels wide that centers itself. In Elementor, if a full-width section does not stretch, TheGem's FAQ says to set the page's Page Layout to "TheGem Full Width".

Reusing the form with Global Sections

TheGem's Templates Builder has Global Sections: reusable templates you place with the "Global Section" content element, the "Global Section" sidebar widget, or a shortcode like [gem_template id="41490"] listed at TheGem > Templates Builder > Global Section. A Global Section is a good home for a short appeal with a Donate button that you show on many pages. Keep the form itself on the pages where people give: Donor Merchant only loads Stripe.js and the PayPal script where the form renders, so a form in a site-wide section would load them everywhere.

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

TheGem offers two kinds of header, set in Theme Options > Menu & Header:

  • Built-in headers: add a Donate link to your menu in Appearance > Menus. It shows with your other menu items.
  • Header Builder: a header template made with Elementor or WPBakery in TheGem's Templates Builder. TheGem's docs say you can add any page builder content element to a header template, so add TheGem's Button element and link it to your Donate page. The Button has flat and outline skins and five size presets.

Check the result on a phone. A header template's menu element can use a different layout on mobile, so make sure the button is still visible there.

Which TheGem performance settings affect the form?

TheGem's One-Click Optimization, under Theme Options > Performance, sets up page caching and minification for you. By default it installs WP Super Cache for caching and Autoptimize for CSS and JS minification. You can pick WP Rocket instead under Caching Plugin in the Caching & Minifying section.

The setting most likely to affect a payment form is Delay JavaScript Execution. It holds back scripts until the visitor interacts with the page, and it is available when One-Click Optimization uses WP Super Cache. TheGem provides an Excluded JavaScript Files box that takes URLs or keywords, one per line. If the card fields or PayPal buttons do not appear, add:

  • js.stripe.com
  • www.paypal.com/sdk/js
  • wp-content/plugins/donor-merchant/assets/js/donor-merchant.js

JavaScript delay can also be switched off for a single page in its Page Options, which is a quick way to test. If Autoptimize is the cause instead, its JavaScript exclusion list is comma-separated and matches part of a path, so adding donor-merchant/assets/js/ there covers the form script.

Page caching and the donor portal

The donation page is safe to cache because the form has no nonce. The donor portal and receipt links send no-cache headers automatically. If you ever see a cached copy of the portal page, TheGem lets you turn caching off for one page: open its Page Options and use Extras > One-Click Optimization > Cache Enabled. More in page caching and donation forms.

One more setting: Performance > Content Elements lets you disable TheGem elements you do not use. TheGem warns this removes them from both the builder and the live site, so leave on any element your Donate page uses, such as a TheGem heading or button around the form.

How do I match the form to TheGem's style?

TheGem's contact form color presets (light and dark) under Theme Options apply to Contact Form 7, not to Donor Merchant. The donation form has its own style setting. Copy the hex color of your main TheGem buttons from Theme Options, or from a Button element you have styled. Then open Donor Merchant > Settings > Forms > Form style, choose Custom, paste it and check the preview. Pick Pill, Rounded or Sharp to match your button corners. The card fields are drawn by Stripe inside a secure frame that theme CSS cannot reach. See form settings.

Before you launch

  • Make a small real gift and confirm it appears under Donor Merchant > Donations.
  • Set up webhooks if you offer recurring gifts, so renewals are recorded.
  • Test the Donate page in a private window with One-Click Optimization on, because logged-in users are often served pages without the cache.
About this guideChecked against TheGem's documentation in October 2026. We have not tested Donor Merchant inside TheGem. Theme menus change between versions; if a label differs in yours, look for the equivalent element.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.