Integrating eCardWidget with WooCommerce

The Wordpress eCardWidget plugin provides seamless integration with WooCommerce, allowing you to sell eCards and invitations directly through your WooCommerce store. This integration offers two distinct approaches to fit different business models and customer experiences.

Integration Modes

Option A: Product Page Button (Bypass Checkout)

Replace the standard “Add to Cart” button with a “Send eCard” button that opens a modal popup directly on the product page. This bypasses WooCommerce’s checkout flow entirely and uses eCardWidget’s built-in Stripe payment processing.

Best for:

Simple, one-off eCard purchases
Using eCardWidget’s built-in payment system
Products that don’t need WooCommerce checkout or shipping
Fast, lightweight user experience

User Experience:

Customer clicks “Send eCard” on the product page
A modal popup opens with the eCard form
Customer fills out recipient details and payment info
Payment is processed via eCardWidget’s Stripe integration
eCard sends instantly (no WooCommerce order created)

Option B: Thank You Page (Post-Purchase)

This option embeds eCard forms into the WooCommerce Thank You page, shown after successful checkout.

Best for:

Products sold alongside other items
Sites that need WooCommerce checkout features
Multi-item or bundled orders
Use of coupons, shipping, and gateways

User Experience:

Customer adds an eCard product to their cart
Completes checkout normally
Redirected to the Thank You page
eCard form(s) display based on items purchased
Customer completes forms
eCards are sent upon submission

Available Shortcodes

This plugin provides two WordPress shortcodes for embedding eCardWidget content:

[ecard id="123"] — Embeds a single eCard form
[ecards id="456"] — Embeds an eCard widget (gallery or campaign with multiple cards)

You can find these shortcode IDs in your eCardWidget dashboard.
Simply copy and paste them into your WooCommerce product’s modal or Thank You page content.

Setup Instructions

Enable WooCommerce Integration

In your WordPress dashboard, go to WP eCards → Settings
Check Enable WooCommerce Integration
Click Save Settings

This activates all WooCommerce-related functionality in the plugin.

Configure Products

Option A (Product Page Button)

Edit a WooCommerce product.
Open the WP eCard Options tab.
Check Replace Add to Cart with Send eCard Button (Option A).
Configure the following:

Button Label:

Enter button text (e.g., “Send eCard Now”)
If blank, defaults to Send eCard
Uses WooCommerce’s standard button styling

Modal Popup Content (Rich Text Editor):

Add instructions for customers
Embed your eCardWidget shortcode
Customize with text, images, or CSS

Example:

<div class="ecard-modal-content">   
  <h2>Send Your eCard</h2>   
  <p>Fill out the form below to send this eCard to your recipient.</p>  
  [ecard id="YOUR_ECARD_ID"] 
</div>

Replace YOUR_ECARD_ID with your actual shortcode ID from eCardWidget.

Optional: Quantity Limit

Set a max number of recipients per purchase
Leave blank for unlimited

Save the product when done.

Result:
The “Add to Cart” button is replaced by your custom Send eCard button. When clicked, it opens the modal with your eCard form. WooCommerce checkout is skipped entirely.

Option B (Thank You Page)

Edit your WooCommerce product.
Open the WP eCard Options tab.
Check Show eCard Form on Thank You Page (Option B).
Add custom content to the Thank You Page Content editor.

Example:

<div class="thankyou-ecard-section">   <h2>Thank You for Your Purchase!</h2>   <p>Send your eCard to your loved ones using the form below.</p>   [ecards id="YOUR_WIDGET_ID"] </div>

Available Shortcodes:

[ecard id="123"] — single eCard form
[ecards id="456"] — eCard widget (gallery or campaign)

Replace YOUR_WIDGET_ID with your actual ID from the eCardWidget dashboard.

Optional: Quantity Limit

Enforced during add-to-cart
Customers cannot exceed the limit

Save the product.

Result:
After checkout, the Thank You page displays your custom content and eCard form(s).

Global Thank You Page Content (Option B)

Set a default Thank You layout for all eCard products.

Go to eCards → Settings → WooCommerce
Edit Global Thank You Page Content
Add your default HTML, shortcodes, or instructions

Example:

<div class="global-thankyou">   <h2>Send Your eCards</h2>   <p>Thank you for your purchase! Use the form below to send your eCards.</p>   <hr> </div>

Notes:

Appears for all Option B products without custom Thank You content.
Product-specific content overrides global content.

Best Practices

Option A (Product Button)

Use bold call-to-action text like “Send eCard Now”
Include a card preview image
Add reassurance (“Secure checkout”, “Instant delivery”)
Keep modals simple and short

Option B (Thank You Page)

Mention eCard completion after checkout in product copy
Use clear instructions on the Thank You page
Add progress steps for multiple cards

Comparison: Option A vs Option B

Feature	Option A (Product Button)	Option B (Thank You Page)
Checkout Process	Skipped	Full WooCommerce
Payment System	eCardWidget Stripe	WooCommerce gateways
Cart	Disabled	Active
Multi-Product Orders	❌	✅
Coupons	❌	✅
Order History	❌	✅
Setup Complexity	Moderate	Simple
Best For	Single eCards	Mixed orders

Troubleshooting

Modal doesn’t open:

Check browser console for JS errors
Ensure modal HTML exists in source
Disable conflicting JS plugins

Add to Cart still visible:

Clear all caches
Use this CSS if needed:

.single-product .single_add_to_cart_button { display: none !important; }

Thank You form not showing:

Ensure Option B is enabled
Check global vs. product-level content
Test with Storefront theme

Quantity limits ignored:

Confirm _wp_ecard_qty_limit meta saved
Clear WooCommerce transients
Check for conflicting quantity plugins

Add eCards to Shopify Pages using a Custom HTML Section

Integrating eCard Widget with my Shopify Store

How to add eCards to DonorPerfect

Javascript API: Trigger Custom Actions when eCards are Shared

How to Add eCards to Raiser's Edge NXT