📖 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 WordPress → Dashboard→ Admin Menu → 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
Display or hide Quantity box in single product
| Setting | Description | Type | Default |
|---|---|---|---|
Product Layout | Display product as Grid or List veiew | Select | Grid View |
Thumbnail Size | Customize Thumbnail Size of product | number | |
Show Product Image | Display or hide product image. | Select | On |
Show Quantity Controls | Control Quantity section at Product page | Select | Yes |
Variation Attribute Style
Choose The Template for checkout page
| Setting | Description | Type | Default |
|---|---|---|---|
Variation Attribute Style | How variation attributes (size, color, etc.) are presented. | Select | Radio Buttons |
Checkout Field Settings | Enable and disable checkout fields in checkout from. | Select | |
Template Settings | Nice and styllist Template for checkout page | Section | Two column layout |
Product Select Type
Difine how may products are display in custom page
| Setting | Description | Type | Default |
|---|---|---|---|
Product Select Type | Allow customers to add product to cart by select radio button or checkout box. | Select | Checkbox |
Ajax Add to Cart | Enable/disable ajax add to cart feature. | Select | Enable |
Select product to Display | Difine how may products are display in custom page | Select |
🎯 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 WordPress → Dashboard→ Admin Menu → 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 WordPress → Dashboard → Admin Menu → 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 WordPress → Dashboard→ Admin Menu → 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.