How to Add Upsells at WooCommerce Checkout (Step-by-Step)

Checkout upsells and order bumps convert at 10–30% because customers are at peak buying intent with payment details already entered. The key is subtlety — add value without disrupting the checkout flow, or you'll lose more in abandoned carts than you gain in upsells.

Why Checkout Is the Highest-Converting Upsell Position

The checkout page is the most valuable real estate in your WooCommerce store. Every visitor on this page has browsed products, selected items, added them to cart, and navigated to checkout. They've entered (or are entering) their shipping and payment information. Buying intent doesn't get higher than this.

This is what makes checkout upsells so powerful — and so dangerous. A well-placed, relevant offer can boost your average order value by 15–25%. A poorly executed one can increase cart abandonment and cost you the entire order.

The fundamental rule of checkout upsells: never sacrifice checkout completion rate for upsell revenue. If your upsell increases AOV by 10% but decreases checkout completion by 5%, you're probably losing money overall.

The data supports this cautious-but-optimistic approach. Stores that add a single, well-matched order bump to checkout typically see a 10–25% bump acceptance rate with negligible impact on checkout completion. Stores that add pop-ups, multiple offers, or aggressive upsell tactics often see completion rates drop.

WooCommerce Blocks vs Classic Checkout

Before implementing checkout upsells, you need to understand your checkout setup. WooCommerce has two checkout systems, and plugin compatibility varies significantly between them.

Classic Checkout (Shortcode-Based)

The traditional WooCommerce checkout uses the [woocommerce_checkout] shortcode. It's been around since WooCommerce's early days and is what most existing stores use. Nearly all checkout upsell plugins support this format — FunnelKit, CartFlows, IconicWP, and others all hook into the classic checkout seamlessly.

Classic checkout is built with PHP templates that themes can override. Plugins hook into specific action points (like woocommerce_review_order_before_submit) to inject their upsell elements. This architecture is well-understood and thoroughly tested.

WooCommerce Blocks Checkout

The newer block-based checkout (introduced in WooCommerce 8.3+) uses React components and the WordPress Block Editor. It's faster, more modern, and is where WooCommerce is heading — but plugin compatibility is still catching up.

If you're using WooCommerce Blocks checkout, verify your upsell plugin explicitly supports it. Many plugins that work perfectly with classic checkout break or show nothing on blocks checkout. FunnelKit added blocks support in late 2024; CartFlows support is still limited.

The blocks checkout uses a different extension API (@woocommerce/checkout React components) rather than PHP action hooks. This means plugins need separate implementations for each checkout type. Always check the plugin's changelog or compatibility page before purchasing.

If checkout upsells are a priority, stick with classic checkout for now — plugin support is comprehensive and well-tested. If you've already migrated to blocks checkout, FunnelKit is your best bet as it has the most complete blocks compatibility. Expect full ecosystem support for blocks checkout by mid-2025.

Types of Checkout Upsells

Order Bumps

A checkbox or one-click add button embedded in the checkout form. The customer sees a complementary product offer — usually near the order summary or above the "Place Order" button — and can add it without any page change. This is the least intrusive and highest-converting format.

Example: "Add a premium leather phone case for just £12 (40% off — checkout only)" with a checkbox or "Add to Order" button.

Inline Product Suggestions

Product cards or a carousel shown within the checkout page, typically above or below the order summary. Less focused than an order bump (multiple options) but useful for stores with diverse accessories.

These work best when limited to 2-3 highly relevant items. More than that and you're turning your checkout into a shopping page, which is counterproductive.

Pre-Submit Modals

A lightbox or modal that appears when the customer clicks "Place Order" but before the payment processes. This is more aggressive — it interrupts the checkout flow. Use with extreme caution. Some stores see good results; others see significant abandonment increases.

Pre-submit modals are high-risk, high-reward. They can achieve 15–25% acceptance rates but may increase abandonment by 3–5%. Only use them if you can A/B test the impact on overall revenue (not just upsell revenue).

Checkout Field Upsells

Options presented as form fields within the checkout — like "Add gift wrapping (£3)" or "Add express shipping upgrade (£5)." These feel like part of the checkout process rather than an upsell, which reduces friction. Gift wrapping, insurance, and shipping upgrades work particularly well in this format.

Design Patterns That Convert

The Embedded Bump

The most effective pattern: a compact card with product image, short description, price (with discount), and a single checkbox or button. It sits between the order summary and the payment button. Visually distinct from the checkout form (subtle background colour or border) but not distracting.

Key design elements: product image (small, 60x60px), compelling one-line description, original price crossed out with discounted price, "Only available at checkout" badge, and a clear checkbox/button.

The Savings Callout

Show the customer how much they're saving: "You're saving £8 by adding this now (normally £20, checkout price £12)." Anchoring the regular price against the offer price makes the deal tangible.

The Social Proof Bump

Add a line like "73% of customers add this" or "Most popular add-on" to your order bump. Social proof at checkout is powerful because the customer is already making a decision influenced by trust signals (secure checkout badges, reviews, etc.).

Never use animated elements on the checkout page — they scream "ad" and erode trust. Avoid red or orange colours for the bump (associated with warnings). Don't make the bump look like it's already selected/checked. And never, ever auto-add the bump product to the cart.

The Guarantee Frame

For warranty or insurance upsells: "Protect your £200 purchase with our 2-year warranty — just £15." Frame it as protection of the investment they've already decided to make. This converts especially well for electronics and high-value items.

Plugin Options for Checkout Upsells

FunnelKit

FunnelKit's order bump feature is the most polished option for WooCommerce checkout upsells. Multiple bump positions (before payment, after payment, below order summary, in the sidebar), visual editor for bump design, conditional display rules, and A/B testing built in.

FunnelKit also replaces the default checkout with its own optimized templates — multi-step checkout, express checkout, Google/Apple Pay integration. If you're serious about checkout optimization, FunnelKit is a comprehensive solution.

Supports both classic checkout and WooCommerce Blocks. Pricing from $99.50/year.

CartFlows

CartFlows takes a page-builder approach — you design your entire checkout page in Elementor (or another builder), then add order bump widgets wherever you want. Maximum design flexibility at the cost of more setup time.

CartFlows gives you pixel-perfect control over every element of checkout, including bump placement. But this flexibility means you're responsible for ensuring the layout doesn't hurt usability — there are no guardrails.

The order bump widget supports product images, custom descriptions, discount configuration, and basic display rules. Pro version ($229/year) adds A/B testing.

Lightweight Alternatives

IconicWP Sales Booster ($129/year): Focused specifically on checkout enhancements — order bumps, cross-sells, and frequently bought together. Works with native WooCommerce checkout without replacing it.

SUSPENDED Starter Options: Free plugins like "Jeswp WooCommerce Checkout Upsell" offer basic order bump functionality. Limited features and no A/B testing, but fine for testing the concept before investing in a premium solution.

A/B Testing Your Checkout Upsells

You cannot optimize what you don't test. Checkout upsells are particularly important to test because the stakes are high — you're modifying the page where money changes hands.

What to Test

Bump vs no bump: First, verify that adding the bump doesn't hurt checkout completion. Run a 50/50 split for 500+ transactions. Compare total revenue per visitor (not just bump revenue).

Bump position: Above the payment button vs below it. Before the order summary vs after it. Position changes can swing acceptance rates by 5–10 percentage points.

Offer product: Test different products as your bump offer. The "obvious" choice isn't always the winner. Sometimes a lower-priced item with higher acceptance rate generates more total revenue than a higher-priced item with low acceptance.

Price point: Test the bump at different discount levels. 20% off vs 30% off vs a flat special price. The discount that maximizes revenue per impression is what matters.

Copy and framing: "Add to order" vs "Yes, I want this!" vs "Include this for just £X." Test the description too — feature-focused vs benefit-focused vs social-proof-focused.

Don't make decisions based on 50 orders. For checkout upsell tests, you need at least 200 transactions per variation (400 total) for a basic test, and 500+ per variation for reliable results. FunnelKit calculates statistical significance automatically in its A/B testing dashboard.

Testing Framework

Week 1-2: Bump on vs bump off. Measuring overall checkout completion and revenue per visitor.

Week 3-4: If bump is positive, test bump position. Keep the winning offer, change placement.

Week 5-6: Test different offer products. Keep the winning position.

Week 7-8: Test pricing and discount levels with winning product and position.

Ongoing: Test new offers quarterly. Refresh the bump product to prevent fatigue.

Common Mistakes

Too many bumps: One bump is almost always better than three. Each additional bump adds noise and decision fatigue to the checkout page. Maximum two.

Irrelevant offers: A cooking utensil bump when buying electronics. This doesn't just fail to convert — it makes your store look automated and impersonal.

No mobile testing: Your checkout upsell must work on mobile. If the bump pushes the "Place Order" button below the fold or overlaps with form fields, you'll lose sales.

Measuring bump revenue in isolation: A bump that generates £500/month is a loss if it's causing £700/month in abandoned carts. Always measure total checkout revenue, not just bump revenue.

Using pop-ups at checkout: Pop-ups on the checkout page are almost universally negative. They trigger ad-blocker associations and interrupt the most critical conversion point on your site.

Ignoring page load speed: Every upsell widget adds JavaScript and potentially API calls. If your checkout page load increases by more than 0.5 seconds, the conversion impact will likely be negative. Monitor Core Web Vitals after adding any checkout modification.

Implementation Priorities

If you're starting from zero, here's the order of operations:

1. Audit your checkout: Load your checkout on mobile and desktop. Time the page load. Note every element. Is it clean? Fast? Does it build trust?

2. Choose one bump product: Pick the complementary product most relevant to your best-selling item. Set a 20–30% discount.

3. Install and configure: FunnelKit if you want the full package, IconicWP Sales Booster if you want something lightweight. Add the bump below the order summary.

4. Test bump on vs off: Run for 400+ transactions. Measure total checkout revenue, not just bump revenue.

5. Optimize: If positive, test position, product, pricing, and copy in sequence. One variable at a time.

6. Scale: Once you have a winning bump, set up conditional rules to show different bumps for different product categories. Now you have a personalized checkout upsell system.

Checkout upsells are high-leverage but high-stakes. Start with a single, relevant order bump priced at 15–25% of your average cart value. Test it against no bump before optimizing. Use FunnelKit or IconicWP for implementation. Monitor total checkout revenue — not just bump revenue — to ensure you're adding value without sacrificing conversions. One well-optimized checkout bump typically adds 10–25% to AOV with minimal impact on completion rates.