📖 Overview
Express Checkout Pro adds a fast, beautiful checkout overlay to your WooCommerce store. When a customer clicks Buy Now on a product page, a full-screen checkout modal appears — no page reload, no redirect to the cart.
For returning customers who have saved their details, the entire purchase can be completed in one click. For new customers, the streamlined form collects only the essential information, dramatically reducing cart abandonment.
The plugin works alongside your existing WooCommerce checkout — it does not replace it. Customers can always proceed to the standard checkout if they prefer.
One-Click Purchase
Returning customers checkout in a single click — no form re-entry, no friction, no abandonment.
Beautiful Templates
Choose from multiple professionally designed checkout templates crafted to maximize conversion rates.
Any Payment Gateway
Works seamlessly with Stripe, PayPal, Authorize.net, and every WooCommerce payment gateway.
Mobile Optimized
Perfectly responsive overlay that converts on mobile, tablet, and desktop with a native-feel UX.
Guest Checkout
Streamlined guest checkout that collects only what is needed and reduces drop-off dramatically.
Secure by Default
SSL-enforced, PCI-compliant checkout flow that keeps your customers' payment data safe at all times.
📦 Installation
Follow these steps to install and activate the plugin on your WordPress/WooCommerce site. Requires WordPress 6.0+, WooCommerce 7.0+, and PHP 8.0+.
- 1
Download the plugin ZIP from your CoderEmbassy account.
- 2
Go to WordPress → Plugins → Add New → Upload Plugin.
- 3
Select the ZIP and click Install Now, then Activate.
- 4
Go to WooCommerce → Express Checkout → Settings.
- 5
Choose a template and configure your display options.
- 6
Click Save. The express checkout button will now appear on product pages.
⚙️ Configuration
Display Settings
Control where and how the express checkout button appears.
| Setting | Description | Type | Default |
|---|---|---|---|
Button Position | Where to show the Buy Now button on the product page. Options: Above Add to Cart, Below Add to Cart, or Both. | Select | Below Add to Cart |
Button Text | The label shown on the express checkout button. | Text | Buy Now |
Show on Single Product | Display the express checkout button on individual product pages. | Toggle | On |
Show on Shop / Archive | Display the button on product listing pages (shop, category, search results). | Toggle | Off |
Template
Choose the visual style for the checkout overlay.
| Setting | Description | Type | Default |
|---|---|---|---|
Template | Select from the available checkout overlay templates. Each template has a distinct layout and color palette. | Select | Modern |
Accent Color | Primary color used for buttons and highlights inside the checkout overlay. Defaults to your theme's primary color. | Color | #6366f1 |
Overlay Opacity | The darkness of the background overlay behind the checkout modal. | Range | 70% |
Checkout Behaviour
Set what the checkout collects and what happens after purchase.
| Setting | Description | Type | Default |
|---|---|---|---|
Guest Checkout | Allow customers to complete a purchase without creating an account. Recommended for maximum conversion. | Toggle | On |
Collect Phone Number | Add a phone number field to the express checkout form. | Toggle | Off |
After Purchase Redirect | Where to send the customer after a successful order. Options: Order Received Page, Custom URL, or Stay on Page. | Select | Order Received Page |
🎯 Feature Guides
Setting Up the Checkout Overlay
Get the express checkout overlay live on your store in under 5 minutes.
- 1
After activating the plugin, go to WooCommerce → Express Checkout → Settings.
- 2
Under Display Settings, set Button Position to where you want the Buy Now button.
- 3
Under Template, select a template that matches your brand.
- 4
Set your Accent Color to match your store's primary color.
- 5
Save settings and visit any product page. You should see the Buy Now button.
- 6
Click it to preview the checkout overlay.
Use the built-in preview feature at WooCommerce → Express Checkout → Preview to see how the overlay looks without going to a live product page.
Customizing the Checkout Template
Go beyond the default template settings with custom CSS.
- 1
Go to WooCommerce → Express Checkout → Custom CSS.
- 2
The overlay uses BEM-style CSS classes prefixed with .cex-. For example: .cex-overlay, .cex-modal, .cex-btn-primary.
- 3
Add your custom CSS in the provided code editor.
- 4
Changes preview live as you type (in the preview panel on the right).
- 5
Click Save when done.
Press F12 in your browser and inspect the overlay to see the full class structure. All plugin CSS is loaded in an isolated scope to prevent theme conflicts.
Testing in Sandbox Mode
Fully test the express checkout flow before going live.
- 1
Put your payment gateway (e.g. Stripe) into test mode.
- 2
Go to WooCommerce → Express Checkout → Settings → enable Test Mode.
- 3
Use a test card number (e.g. 4242 4242 4242 4242 for Stripe) to place a test order.
- 4
Verify the order appears in WooCommerce → Orders with status Processing.
- 5
Disable Test Mode before going live.
Always test with real payment gateways in sandbox mode before going live. Real charges will occur if Test Mode is disabled.
🔗 Developer Hooks
Use these WordPress actions and filters to extend or modify Express Checkout Probehavior programmatically. Add snippets to your theme's functions.php or a custom plugin.
cex_before_checkout_renderactionsince 1.0.0Fires before the checkout overlay HTML is output. Use to inject custom markup above the form.
Parameters
( int $product_id )cex_checkout_fieldsfiltersince 1.0.0Filter the array of fields rendered in the express checkout form. Add, remove, or reorder fields.
Parameters
( array $fields, int $product_id )cex_after_order_placedactionsince 1.0.0Fires after a successful express checkout order is created. Use for custom post-purchase logic.
Parameters
( int $order_id, int $product_id )📋 Changelog
- New
Added 3 new checkout overlay templates.
- Improved
One-click purchase for returning customers is now 40% faster.
- Fix
Fixed overlay z-index conflict with Divi theme header.
- New
Added Custom CSS editor for template overrides.
- New
Test Mode setting for safe sandbox testing.
- New
Initial release with one-click checkout overlay.
Need help with Express Checkout Pro?
Our support team is ready to assist you.