[donor_merchant] into a Donate page with the block editor, WPBakery or Elementor. Porto's own docs describe the same shortcode method for form plugins. Add a button to your Porto header template, and build the donation page before you run the "WPBakery & Shortcodes" cleanup in Porto's Speed Optimize Wizard.Does Porto include donations?
No. Porto, from p-themes, is built mainly for WooCommerce stores. Its documentation covers shop builders, a free shipping bar, pre-orders and catalog mode, but no donation feature. You add donations with a plugin.
Donor Merchant is a free WordPress plugin for one-time and recurring donations through Stripe and PayPal. It keeps donor records and sends receipts, and all features are free. Install it from Plugins > Add New by searching for "Donor Merchant" (WordPress 6.2+, PHP 7.4+, HTTPS). Then follow Getting started.
Should donations be a WooCommerce product instead?
A WooCommerce product can take money for a cause, but it behaves like a sale. Here is what each route needs, with WooCommerce.com prices as published October 2026 (verify with WooCommerce):
| What you need | WooCommerce product route | Donor Merchant |
|---|---|---|
| Donor picks the amount | An extension such as Name Your Price, $59 a year | Included |
| Monthly or yearly gifts | WooCommerce Subscriptions, $279 a year | Included, weekly to yearly, Stripe or PayPal |
| Year-end giving statement per donor | Not part of WooCommerce; add-on or manual work | Included |
| Tributes, named funds, "cover the fees" | Add-ons or custom fields | Included |
| Where the gift is recorded | As a shop order, possibly next to merchandise | In its own Donations list |
WooCommerce Subscriptions handles renewals well and lets customers manage their own plans. If all you want is a fixed "add $5 for our cause" item at checkout, a simple product may be enough. Once you want donor-chosen monthly gifts and records you can hand to a treasurer, a separate form is less work. It also keeps a gift and a purchase out of the same order, which makes receipts simpler.
Both plugins can use the same Stripe account. Each needs its own webhook endpoint in Stripe; see webhooks.
Where do I put the form in Porto?
Porto works with WPBakery Page Builder (70+ Porto elements) and Elementor (50+ Porto widgets), and you can also use the block editor. Porto's contact forms page says a form plugin's shortcode can be pasted into page content with any of the three. Create a page called "Donate", then:
- Block editor: add the Donation Form block, or a Shortcode block with
[donor_merchant]. - WPBakery: add a Text Block and paste the shortcode, as WPBakery recommends for third-party shortcodes.
- Elementor: add the Shortcode widget and paste the shortcode.
Useful variations: [donor_merchant campaign="3"] for a campaign, [donor_merchant title="Support our work"] for the heading, and [donor_merchant_progress campaign="3"] for a goal thermometer. Your campaign IDs are under Donor Merchant > Settings > Shortcodes. The form is a white card up to 540 pixels wide that centers itself.
Reusing it with the Block Builder
Porto's Templates Builder (Porto > Templates Builder) has a Block Builder for reusable sections. You can place a block with the Porto Block element, a shortcode, or the Porto: Block widget. That suits a short "Support our work" panel with a Donate button for product or blog sidebars. Keep the form itself on its own page: Donor Merchant loads Stripe.js and the PayPal script only where the form renders, and a sidebar form would load them across your shop.
Porto's docs say the template builder types must be switched on first, in the Template Builder Types section of the Speed Optimize Wizard's Other Minify tab.
How do I add a Donate button to the Porto header?
Porto headers are built as templates. Go to Porto > Templates Builder, add a new template with the Header type (or edit your current one), and build it with WPBakery or Elementor. Porto's guide to building a header lists call-to-action buttons alongside the logo, menu and search. Add a button that links to your Donate page, check the tablet and mobile settings, then save and assign the header with its display conditions.
Porto notes that its header-specific elements only render inside header templates. A regular button element works in the header too, so you do not need a special one.
Which Porto speed settings affect the form?
Porto's settings are under Porto > Speed Optimize, in five tabs. Three matter here.
- WPBakery & Shortcodes scans your site and removes the CSS and JS of shortcodes it finds unused. Porto says to run it only after every page is finished, and to re-enable and recompile if you later use a removed shortcode. Build the Donate page, including any Porto buttons or headings on it, before you run this step.
- Other Minify holds Load jQuery in Footer and Disable jQuery Migrate Script. The donation form's own script does not use jQuery, so these should not affect it.
- Advanced has WP Rocket Delay JS Exclusions, which excludes Porto's own required scripts from WP Rocket's delay. It does not cover other plugins.
Porto's performance guide pairs the theme with WP Rocket and its Delay JavaScript Execution option, and says to add exceptions under Excluded JavaScript Files when needed. If the card fields or PayPal buttons do not appear on your Donate page, add these there:
js.stripe.comwww.paypal.com/sdk/jswp-content/plugins/donor-merchant/assets/js/donor-merchant.js
The guide also suggests never caching URLs such as cart and checkout. The Donate page does not need that: the form has no nonce, so it can be cached, and the donor portal and receipt links send no-cache headers themselves. See page caching and donation forms.
How do I match the form to Porto's colors?
Porto's palette is at Porto > Theme Options > Skin > Theme Colors. Its docs say the Primary Color is applied to buttons, links and highlights. Copy that hex value into Donor Merchant > Settings > Forms > Form style as a Custom color and check the live preview. Then choose Pill, Rounded or Sharp to match your shop buttons. The card fields come from Stripe inside a secure frame, so theme CSS does not change them. See form settings.
Before you launch
- Make a small real gift and confirm it lands in Donor Merchant > Donations, not in WooCommerce orders.
- Add the Donor Merchant webhook in Stripe if you offer recurring gifts.
- After any recompile in Speed Optimize, reload the Donate page and the header on a phone.
Sources
- Porto: Compatible Page Builders
- Porto: Contact Forms
- Porto: Templates Builder
- Porto: Porto Widgets
- Porto: Creating a Header from Scratch
- Porto: Header Builder Elements
- Porto: How to improve site performance (Using WP Rocket)
- Porto: Color Setup
- WPBakery: Can I insert 3rd party shortcodes?
- Elementor: Shortcode widget
- WooCommerce.com: Name Your Price
- WooCommerce.com: WooCommerce Subscriptions