Charitable Pro includes native integration with WPBakery Page Builder (formerly Visual Composer), allowing you to easily add donation forms, campaign displays, and donation buttons to your pages using WPBakery’s visual editor.
All Charitable elements are located in the “Charitable” category when adding elements in WPBakery. Simply click the “+” button in WPBakery, navigate to the Charitable category, and select the element you need.
Quick Reference
| Element Name | Purpose | Key Settings | Best Use Case |
|---|---|---|---|
| Charitable Campaign | Display a single campaign with all its details | Campaign selection | Campaign detail pages, featured campaign sections |
| Charitable Donation Form | Display a complete donation form for a campaign | Campaign selection | Dedicated donation pages, campaign pages |
| Charitable Donate Button | Display a button or link to the donation page | Campaign, Button text, Button type, New tab option | Call-to-action sections, sidebar widgets, banners |
| Charitable Campaigns | Display a grid or list of multiple campaigns | Number, Columns, Order, Filters, Display options | Campaign listing pages, homepage sections |
The Four Elements
1. Charitable Campaign
What it does: Displays a single campaign with all its information, including campaign description, progress bar, donation form (if enabled), and campaign details.
When to use it: Use this element when you want to showcase a specific campaign on a page. Perfect for campaign detail pages, featured campaign sections, or highlighting a particular fundraising effort.
Settings & Options:
Campaign – Select which campaign to display from the dropdown menu. Only published campaigns are available.
Customization Options:
- Extra class name: Add custom CSS classes for styling
- Element ID: Assign a unique ID for CSS targeting or JavaScript
- CSS box (Design Options): Use WPBakery’s built-in CSS editor for custom styling
Note: This element displays the full campaign template, which includes all campaign information configured in your campaign settings.
2. Charitable Donation Form
What it does: Displays a complete donation form for a specific campaign. Supports both visual forms (new form builder) and legacy forms.
When to use it: Use this element when you want to embed a donation form directly on a page. Ideal for dedicated donation pages, campaign pages, or any page where you want to accept donations.
Settings & Options:
Campaign – Select which campaign’s donation form to display. The form will be configured based on the campaign’s form settings.
Form Types Supported:
- Visual Forms: Modern form builder with drag-and-drop field configuration
- Legacy Forms: Traditional form layout (if visual form is not enabled)
Preview Behavior:
- Forms are displayed as read-only previews in the WPBakery editor for security and performance
- Multi-step forms show only the first step in preview
- Payment method selection is not shown in preview (placeholder message displayed)
- Full functionality is available on the frontend when visitors view the page
Customization Options:
- Extra class name: Add custom CSS classes for form styling
- Element ID: Assign a unique ID for CSS targeting or JavaScript
- CSS box (Design Options): Use WPBakery’s built-in CSS editor for custom styling
Important: The form preview in WPBakery is read-only and may not show all fields. Always test the actual donation process on the frontend to ensure everything works correctly.
3. Charitable Donate Button
What it does: Creates a button or link that directs visitors to a campaign’s donation page.
When to use it: Use this element for call-to-action buttons, sidebar widgets, banners, or anywhere you want a simple way to direct visitors to donate. Perfect when you don’t need the full form on the page.
Settings & Options:
Campaign – Select which campaign the button should link to.
Button Text – Customize the text displayed on the button. Default: “Donate”
Button Type – Choose how the button appears:
- Button – Styled button with background and padding
- Link – Text link with underline (no button styling)
Default: Button
Open in New Tab – Check this box to open the donation page in a new browser tab when clicked.
Customization Options:
- Extra class name: Add custom CSS classes for button styling
- Element ID: Assign a unique ID for CSS targeting or JavaScript
- CSS box (Design Options): Use WPBakery’s built-in CSS editor for custom styling
Tip: Use the “Link” button type for a more subtle call-to-action, or “Button” type for a prominent, eye-catching donation prompt.
4. Charitable Campaigns
What it does: Displays a grid or list of multiple campaigns with filtering, sorting, and display options.
When to use it: Use this element for campaign listing pages, homepage sections showcasing multiple campaigns, or any page where you want to display several fundraising campaigns at once.
Settings & Options:
Basic Settings:
Number of Campaigns – How many campaigns to display. Default: Your site’s posts per page setting
Columns – Number of columns in the grid layout (1, 2, 3, or 4). Default: 2
Order By – How to sort campaigns:
- Date – Most recently created first
- Popularity – Most donations first
- Ending Soon – Campaigns ending soonest first
- Title – Alphabetical by campaign name
- Random – Random order
- Amount Raised – Highest amount raised first
Default: Date
Order – Sort direction (Ascending or Descending). Default: Descending
Filtering Options:
Categories – Filter by campaign category slugs. Enter comma-separated category slugs (e.g., “education,healthcare”).
Exclude Campaigns – Hide specific campaigns by ID. Enter comma-separated campaign IDs (e.g., “12,34,56”).
Include Inactive Campaigns – Check to include ended or inactive campaigns in the list.
Tags – Filter by campaign tag slugs. Enter comma-separated tag slugs (e.g., “urgent,featured”).
Parent Campaigns – Show only child campaigns of specified parent campaign IDs. Enter comma-separated parent campaign IDs (e.g., “12,34”).
Parent Only – Check to show only top-level campaigns (campaigns with no parent).
Display Options:
Button Type – What appears on each campaign card:
- Donate Button – “Donate” button on each card
- Read More Link – “Read More” link on each card
- No Button – No button or link (just the campaign information)
Default: Donate Button
Description Limit – Maximum characters for campaign description (0-500). Default: 100
Responsive Grid – Enable responsive grid layout that adapts to screen size. Default: Enabled
Masonry Layout – Enable masonry (Pinterest-style) grid layout where items are arranged to fill gaps.
Customization Options:
- Extra class name: Add custom CSS classes for grid styling
- Element ID: Assign a unique ID for CSS targeting or JavaScript
- CSS box (Design Options): Use WPBakery’s built-in CSS editor for custom styling
Tip: Combine filtering options to create custom campaign displays. For example, show only “featured” campaigns from the “education” category, sorted by amount raised.
Common Features (All Elements)
All four Charitable elements share these common customization options:
Styling Parameters
Extra class name (el_class)
Add one or more custom CSS classes to the element. Separate multiple classes with spaces. This allows you to target the element with custom CSS in your theme or via the Customizer.
Example: my-custom-campaign custom-border
Element ID (el_id)
Assign a unique HTML ID attribute to the element. This is useful for:
- CSS targeting with
#your-id - JavaScript interactions
- Anchor links (jumping to a section on the page)
Important: IDs must be unique on the page. Don’t use the same ID for multiple elements.
CSS box (Design Options)
WPBakery’s built-in CSS editor that allows you to add custom CSS directly to the element. You can style:
- Margins and padding
- Borders and backgrounds
- Typography
- Responsive breakpoints
This CSS is scoped to the specific element, so it won’t affect other elements on the page.
Feedback Tab
All Charitable elements include a “Feedback” tab in their settings panel. This tab contains a feedback form where you can share:
- Suggestions for new features
- Ideas for additional WPBakery elements
- Bug reports or issues you’ve encountered
- General feedback about the integration
Your feedback helps us improve the WPBakery integration and prioritize new features. All feedback is reviewed by our development team.
Note: The feedback form opens in a new tab, so you won’t lose your work in the WPBakery editor.
Developer Notes
Technical Details
- All Charitable elements use standard WPBakery shortcodes that can be customized programmatically
- Elements can be styled using standard WordPress CSS methods (theme stylesheets, Customizer, or inline CSS via Design Options)
- The integration respects WPBakery’s preview mode limitations for performance and security
- All elements are fully responsive and work with WPBakery’s responsive design features
Shortcode Equivalents
Each WPBakery element corresponds to a Charitable shortcode:
- Charitable Campaign →
[campaign id="123"] - Charitable Donation Form →
[charitable_donation_form campaign_id="123"] - Charitable Donate Button →
[charitable_donate_button campaign="123"] - Charitable Campaigns →
[campaigns number="6" columns="2"]
You can use these shortcodes directly in your content if you prefer, or customize them programmatically in your theme’s PHP files.
Customization via CSS
All elements can be customized using CSS. Here are some common customization approaches:
- Extra Class Name: Add a class, then target it in your theme’s stylesheet
- Design Options: Use WPBakery’s CSS box for element-specific styling
- Theme Stylesheet: Target Charitable’s default classes (e.g.,
.charitable-campaign,.charitable-donation-form) - Child Theme: Override Charitable templates if you need more extensive customization
Known Limitations
Preview Mode Limitations
For security and performance reasons, some features work differently in WPBakery’s preview mode compared to the frontend:
- Donation Forms: Forms are displayed as read-only previews in the editor. Visitors can interact with forms normally on the frontend.
- Multi-Step Forms: Only the first step is shown in preview. All steps are available on the frontend.
- Payment Methods: Payment gateway selection is not shown in preview (a placeholder message is displayed). Full payment options appear on the frontend.
- Form Interactions: Form fields cannot be filled out or submitted in preview mode. This is intentional for security.
Important: Always test donation forms on the frontend to ensure the complete donation process works correctly.
Performance Considerations
- Campaign lists are limited to 6 campaigns in WPBakery preview for performance
- Pagination is disabled in preview mode
- Some JavaScript features may be disabled in preview to prevent conflicts with WPBakery’s editor
Troubleshooting
Elements Not Showing in WPBakery
- Check WPBakery Version: Ensure you’re running WPBakery 6.0 or higher. Older versions are not supported.
- Check Charitable Pro Version: Ensure you’re running Charitable Pro 1.8.10.5 or higher.
- Clear Cache: Clear any caching plugins and browser cache, then refresh the WPBakery editor.
- Check Category: Look for the “Charitable” category in the element picker (not “Content” or other categories).
Form Preview Not Working
- Check Campaign Settings: Ensure the selected campaign has a donation form enabled in its settings.
- Check Form Type: Verify whether the campaign uses a visual form or legacy form in the campaign editor.
- Preview Limitations: Remember that forms are read-only in preview. Test on the frontend for full functionality.
Styling Not Applying
- Check CSS Specificity: Your custom CSS may need higher specificity to override default styles.
- Use Design Options: Try using WPBakery’s CSS box (Design Options) for element-specific styling.
- Clear Cache: Clear browser and WordPress cache to see style changes.
- Check Theme Conflicts: Some themes may override Charitable styles. Use browser developer tools to inspect elements.
Campaigns Not Displaying
- Check Filters: Review your filtering options (categories, tags, exclude lists) – they may be too restrictive.
- Check Campaign Status: Ensure campaigns are published. Unpublished campaigns won’t appear unless “Include Inactive” is checked.
- Check Number Setting: Verify the “Number of Campaigns” setting isn’t set to 0.
Feedback & Suggestions
We’re constantly working to improve the WPBakery integration based on user feedback. Your input helps us prioritize new features and enhancements.
How to Submit Feedback
You can submit feedback in two ways:
- Via Element Settings: Open any Charitable element in WPBakery, click the “Feedback” tab, and use the feedback form.
- Via Support: Contact our support team with your suggestions or feature requests.
What We’re Looking For
We’d love to hear your ideas for:
- New Elements: What additional Charitable elements would be useful in WPBakery?
- Feature Enhancements: How can we improve existing elements?
- Display Options: What new display or layout options would you find helpful?
- Integration Improvements: What would make the integration easier to use?
- Workflow Improvements: How can we streamline your workflow when building donation pages?
Future Expansion Plans
Based on user feedback, we’re considering adding:
- Additional campaign display layouts
- More filtering and sorting options
- Custom template options
- Integration with WPBakery’s advanced features
Have a suggestion? We want to hear it! Use the Feedback tab in any Charitable element or contact our support team.
Thank You!
Thank you for using Charitable Pro with WPBakery Page Builder. Your feedback and suggestions help us create better tools for fundraising and making a difference in the world.
Support & Resources
- Charitable Pro Documentation: https://www.wpcharitable.com/documentation/
- Support Forums: Get help from the community and our support team
- WPBakery Documentation: Learn more about WPBakery Page Builder features
