How to add a donation form to OceanWP

OceanWP works with the block editor, so you add the Donation Form block to a page, turn a menu link into a button, and set the page layout in OceanWP Settings.

Short answerInstall Donor Merchant and add the Donation Form block to a "Donate" page. Open OceanWP Settings with the O icon in the editor and set Content Layout to Full Width. Then add the page to your menu with the CSS class btn to show it as a button.

Does OceanWP have a donation feature?

The OceanWP theme and its free companion plugin, Ocean Extra, do not process payments. OceanWP does offer charity demo templates. If you imported one, look under Plugins for any donation plugin it installed, and decide which one you want to keep before you build your Donate page.

If you already have gifts in another donation plugin, Donor Merchant's importer (Donor Merchant > Import) reads a CSV export so your donor history comes with you. Running recurring gifts stay with the plugin that created them, because they live at Stripe or PayPal. See moving donor history between plugins.

Start by installing Donor Merchant, a free donation plugin, from Plugins > Add New by searching for "Donor Merchant" (WordPress 6.2+, PHP 7.4+, HTTPS), then follow Getting started.

Where do I put the form in OceanWP?

  1. Create a page called "Donate" under Pages > Add New.
  2. Open the block inserter, search for Donation Form and add it.
  3. You can type an optional heading in the block. For a campaign form, use the shortcode with campaign="3" instead.
  4. Publish.

If you build the page with Elementor instead, paste [donor_merchant] into Elementor's Shortcode widget. [donor_merchant campaign="3"] ties the form to a campaign, and [donor_merchant_progress campaign="3"] adds a goal thermometer. Donor Merchant > Settings > Shortcodes lists your campaign IDs.

Which OceanWP layout should the Donate page use?

Per-page layout lives in OceanWP Settings, which needs the free Ocean Extra plugin. Since OceanWP 3.5.0 and Ocean Extra 2.2.0, you open them by clicking the O icon in the editor toolbar. The General section has a Content Layout option with these choices:

  • Default uses the layout set in the Customizer.
  • Right Sidebar, Left Sidebar and Both Sidebars add sidebars.
  • Full Width removes sidebars but keeps your main container width and side margins.
  • 100% Full Width runs content edge to edge with no sidebars.

Choose Full Width for a Donate page. In OceanWP's terms that means no sidebar, not edge to edge, so your text stays readable. The form is a white card up to 540 pixels wide that centers itself, so 100% Full Width does not make the form bigger; it only matters if you are building wide sections around it.

Two more per-page options are worth knowing:

  • Padding in the same General section can disable the default top and bottom content spacing on this page.
  • In the Title section, set Display Page Title to Disable if you would rather open the page with your own heading and image. Add a heading block so the page still has one.

How do I add a Donate button to the OceanWP menu?

OceanWP's documented method is a CSS class on a normal menu item:

  1. Go to Appearance > Menus and add your Donate page to the main menu.
  2. If you do not see the CSS Classes field, click Screen Options at the top right and enable it.
  3. Type btn in the item's CSS Classes field and save.

That gives you a simple button. OceanWP leaves colors, size and padding to custom CSS, so add a rule under Appearance > Customize > Custom CSS if you want it in a different color from your other buttons. Because it is a menu item, it also shows up in the mobile menu, as long as the mobile menu uses the same WordPress menu.

If you use an OceanWP Custom Header built from a My Library template (Customize > Header > General, Header Type: Custom Header), add a button that links to the Donate page inside that template instead.

Can I reuse a donation appeal with My Library?

Yes. Every template you create under OceanWP > My Library gets its own shortcode. Build a template with a short appeal and a button to your Donate page, or put the form itself in it (the Donation Form block, or [donor_merchant] in a page builder), then copy the template's shortcode.

To place it on a particular page, open that page's OceanWP Settings and paste the shortcode into the Shortcode section. OceanWP offers 10 shortcode areas: before and after the Top Bar, Header, Page Title, Footer widgets and Footer Bottom. Each area takes one shortcode. "After Page Title" works well for a campaign appeal on a news post or program page.

For placement across many pages at once, OceanWP sells a premium plugin, Ocean Hooks, that adds conditional logic. Either way, keep the full form on one Donate page and send people there. Donor Merchant only loads Stripe.js and the PayPal script on pages where the form renders, so an appeal with a button adds no payment scripts to other pages.

Do OceanWP's performance settings affect the form?

OceanWP's options are under Customize > Performance. They switch theme assets on or off: Styling Options Location, Emoji, Font Awesome Icons, Ocean SVG Icons, Simple Line Icons, Lightbox, Custom Select, Widgets Stylesheet Load and Scroll Effect. None of them delays the payment scripts.

Custom Select is the one to watch. OceanWP says it "enhances the native select box" with a styled overlay. The donation form can include dropdowns, such as the fund choice, the tribute type and any dropdown custom fields you add. If they look out of place next to the rest of the form, test the page with Custom Select turned off.

OceanWP also sells a separate plugin, Site Booster. Two of its WordPress Optimizer switches matter here:

  • Disable WP Cron stops all WP-Cron actions. Donor Merchant uses WP-Cron for its monthly summary email and its daily cleanup of abandoned checkouts. Leave this off unless your host runs WordPress cron from the server instead.
  • Disable Query Strings from Static Resources removes version numbers from script URLs. After you update Donor Merchant, clear any CDN cache so visitors get the new script.

If a caching plugin delays or combines JavaScript and the card fields do not appear, exclude js.stripe.com, www.paypal.com/sdk/js and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js, or turn that feature off for the Donate page. The page itself is safe to cache. See the page cache exclusions guide.

How do I match the form to my OceanWP colors?

OceanWP's Customizer Colors panel has a Primary Color (normal and hover) that styles buttons, headings and other parts of the site. Copy its normal value. In Donor Merchant > Settings > Forms > Form style, choose Custom, paste it and check the live preview. The form works out a darker hover shade itself. Then pick the button shape (pill, rounded or sharp) closest to your theme's buttons.

What should I check before going live?

  • Make a test gift in Stripe or PayPal test mode on a phone and on a desktop.
  • Set up webhooks if you take recurring gifts, so renewals are recorded.
  • If you set a thank-you page under Donor Merchant > Settings > General, give it the same OceanWP Settings.

We checked these steps against OceanWP's documentation in October 2026. Theme menus change between versions, so if a label differs in yours, look for the equivalent setting.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.