|
/ Documentation /CartFlows/Order Bump/ How to Replace First Product on the Checkout Page with Order Bump?

How to Replace First Product on the Checkout Page with Order Bump?

CartFlows Pro order bumps normally add an extra product alongside whatever the customer is already buying. There’s also a setting that lets an order bump replace the customer’s original checkout product instead, which is perfect for “upgrade your order” style offers, like swapping a Basic plan for a Pro plan right at checkout.

This guide walks you through how the replacement works, how to turn it on for an order bump, and what your customers see when they use it.

How Replacing a Product Works

When an order bump is set up this way, checking the bump’s box doesn’t just add a new line to the cart, it swaps out the original product for the bump product.

  • If the customer leaves the bump unchecked, checkout works exactly as normal with the original product.
  • If the customer checks the bump, the original product is removed from the order and the bump product takes its place, with the total updating instantly.
  • If the customer changes their mind and unchecks the bump again, the original product is added back automatically, at the same quantity it had before.

The customer never has to manually remove anything from their order, the swap happens for them in the background.

How to Set Up Product Replacement

Step 1. From the WordPress admin, go to CartFlows → Funnels and open the funnel that contains the checkout step you want to update.

Edit Funnel

Step 2. Click the checkout step settings(cog icon) to open its settings.

Checkout Step Settings

Step 3. In the left sidebar, click Order Bumps, then open the order bump you want to configure (or create a new one).

Step 4. Click the Product tab.

Step 5. Scroll down to the Settings section, below the product picker.

The Order Bump's Product tab, scrolled to the Settings section, showing the Replace First Product toggle turned on

Step 6. Turn on Replace First Product. This replaces the first product configured on your checkout step with the order bump product whenever the bump is accepted.

Step 7. Optionally, configure the related settings in the same section:

  • Show Pre-Checked — Automatically selects the bump (and triggers the replacement) as soon as the checkout page loads, so the customer doesn’t need to check anything themselves.
  • Enable Quantity Field — Lets the customer choose how many of the bump product they want. Whatever quantity they pick carries over to the replacement.

Step 8. Click Save at the top right.

Product replacement is now active on that order bump.

The Replacement in Action

When a customer reaches the checkout page, they see the order bump offer wherever it’s positioned on the page, before their details, after them, in the order summary, or right before the payment button.

The checkout page order summary with the order bump checkbox unchecked, showing the original product in the order summary and the order bump offer below it

As soon as the customer checks the box, the order summary updates immediately, no page reload needed. The original product disappears and the bump product appears in its place, with the total recalculated to match.

The same checkout page immediately after the order bump checkbox is checked, showing the order summary now with the bump product in place of the original product and the updated total

Frequently Asked Questions

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
Table of Contents