Boost Your Sales: A Step-by-Step Guide to Creating Order Bumps in WooCommerce

When we launched our first eCommerce store years ago, we were unknowingly missing out on potential revenue.

Like many store owners, our focus was solely on encouraging customers to purchase our main products until we discovered the power of order bumps.

If you operate a WooCommerce store and haven’t implemented order bumps yet, you’re overlooking a straightforward method to increase your sales.

Consider order bumps as the small, strategically placed items at the checkout counter of your local store – they are additional products that customers can easily add to their purchase with a single click during checkout.

In this guide, we will provide you with a comprehensive walkthrough on how to create effective order bumps in WooCommerce.

The best part? Our step-by-step guide is designed for beginners, so you don’t need any technical skills to get started!

What Is an Order Bump?

An order bump is an effective sales tactic that presents customers with additional products on the checkout page. It’s like a friendly suggestion of ‘Would you like fries with that?’ tailored for your online store.

When customers arrive at the WooCommerce checkout page, they are presented with a straightforward order bump featuring a related product. This offer allows them to easily add another item to their cart with just one click.

Store owners often mistake order bumps for upsells and cross-sells. Although all three strategies aim to enhance your average order value, they function in distinct ways:

• Order Bump:A small, relevant add-on presented directly on the checkout page before the customer completes their payment. For example, offering a protective case when someone purchases a new phone.
• Upsell:An opportunity to upgrade to a more premium version of the product. This is typically displayed after the customer has finalized their initial purchase. For instance, suggesting customers upgrade to the Pro version for an additional $20.
• Cross-sell:Suggesting related products on the product page or within the shopping cart. For example, including a ‘Frequently Bought Together’ section that features a camera, lens, and memory card.

Why Implement an Order Bump in WooCommerce?

When executed effectively, order bumps can significantly increase your sales without disrupting the checkout experience.

However, you cannot simply select any product as an order bump. It’s essential to be strategic with your offers.

Here’s our advice for creating a successful order bump:

• Select WooCommerce products that naturally enhance the items already in the cart.
• Set the price of your order bump lower than the main purchase to encourage easy addition.
• Simplify your offer by focusing on one attractive product instead of multiple choices.
• Position your WooCommerce order bump prominently so it’s noticeable but not intrusive.

WooCommerce lacks native features for creating order bumps, but there are numerous excellent plugins available, and we recommend one that is user-friendly for everyone.

In this tutorial, we will outline the steps to create an order bump in WooCommerce:

Let’s begin the process.

Step 1: Install the FunnelKit Funnel Builder

Among the various WooCommerce order bump plugins we evaluated, FunnelKit Funnel Builder stood out for its user-friendly approach. This plugin allows you to enhance your checkout process and create effective sales funnels effortlessly.

We recommend FunnelKit as an order bump plugin due to its extensive customization options and settings. It also offers responsive designs for order bumps and supports all major product types in your WooCommerce store.

Additionally, FunnelKit provides custom checkout templates to increase sales, cart abandonment funnels to recover lost revenue, and dashboard analytics to monitor your store’s performance.

For further details, please refer to our comprehensive review of the FunnelKit Funnel Builder.

This guide will focus on the FunnelKit Builder Plus plan, as the order bump feature is included in this version and above. However, you can start with the free version to explore the basic WooCommerce checkout features before making a commitment.

Once you purchase your plan, you will receive the plugin zip file and license key. You will then need to install the plugin. For detailed instructions, please check our guide on how to install a WordPress plugin.

Next, you will need to activate the license key. To do this, simply navigate to FunnelKit » Settings Access the ‘General’ tab from your WordPress dashboard and select ‘License.’

Paste the license key into the ‘FunnelKit Funnel Builder Pro’ field and choose your default page builder. Then, click ‘Activate’ followed by ‘Save Changes.’

Step 2: Personalize Your Checkout Page

With the plugin activated, it’s time to configure your WooCommerce checkout page.

To proceed, navigate toFunnelKit » Store CheckoutNext, switch to the ‘Store Checkout’ tab and click the ‘Create Store Checkout’ button.

FunnelKit provides various checkout templates aimed at increasing sales. You can customize these templates using the block editor or popular page builder plugins such as Divi or Bricks.

Ensure you select your preferred platform at the top of the page, then click ‘Preview’ on your chosen checkout template.

Most FunnelKit templates consist of three essential pages: a WooCommerce checkout page, an upsell page, and a thank you page.

If you are satisfied with the template’s appearance, click ‘Import This Funnel.’

You’ll need to assign a name to your checkout funnel, which is particularly useful if you intend to create multiple checkout funnels in the future.

After naming your funnel, simply click ‘Add.’

To start customizing, click on the checkout name above the ‘Add Order Bump’ button.

You will find various settings available for your checkout page.

In the ‘Design’ tab, select ‘Edit Block Editor Template’ to customize using your preferred editing platform.

For comprehensive customization instructions, refer to our guide on modifying the WooCommerce checkout page.

Once you are happy with your checkout design, you can proceed to add your order bump offer.

Step 3:Integrate an Order Bump into Your Checkout

Now that you have set up the checkout page, let’s add a WooCommerce order bump to enhance your sales.

First, navigate toFunnelKit » Store Checkout. Then, click on the ‘Add Order Bump’ button.

A popup will appear prompting you to name the order bump. Providing a descriptive name is particularly useful if you intend to create multiple order bumps for various offers at checkout.

After entering a name, click ‘Add.’

FunnelKit will then present you with several order bump design options to choose from.

Each template is fully responsive and crafted to enhance sales by capturing your customers’ attention at the perfect moment.

Select a design that aligns best with your store’s aesthetic. Afterward, click ‘Import.’

In the product selection popup, choose the WooCommerce product you want to present as your order bump offer. It’s best to keep it straightforward with just one enticing offer, as too many options can confuse customers and lower conversion rates.

Once you are satisfied with your selection, simply click ‘Add.’

Step 4: Personalize the Order Bump Text and Image

Now, in the ‘Design’ tab, you can enhance your WooCommerce order bump to make it more attractive. Let’s begin by crafting compelling content for your bump offer box.

First, ensure you are in the ‘Content’ tab. Here, you can create the ideal text for your order bump offer. At the top, you will find the call-to-action field.

The default text says, ‘Yes! Add {{product_name}} to my order.’ You may notice some basic HTML code in this field, which is used for styling purposes, such as colors or bold text.

Don’t worry, editing it is simple. You can change the text within the code while keeping the tags (like ) intact.

If you’re not comfortable with that, you can remove the entire line and create your own text from scratch.

We also suggest retaining the {{product_name}} merge tag to dynamically display your product name.

A merge tag serves as a placeholder that automatically populates with the correct information. When customers visit your checkout page, FunnelKit replaces{{product_name}}with the actual name of your product, eliminating the need for manual updates.

Here are some effective call-to-action examples for your order bump:

• “Upgrade my order with{{product_name}}“
• “Yes! I’d like to purchase{{product_name}}“

In the ‘Description’ field, provide a concise yet persuasive pitch for your checkout offer.

For instance, if you’re promoting a subscription upgrade, consider something like: “Upgrade to our 6-month plan now for unlimited access to exclusive content, ad-free browsing, and priority customer support.”

To enhance your WooCommerce bump offer, click the ‘Merge Tags’ button.

You’ll discover additional merge tags that can be beneficial for your order bump, such as:

• {{product_short_description}} – Displays your WooCommerce product’s short description
• {{subscription_summary}} – Automatically presents subscription details.
• {{quantity_incrementer}} – Allows customers to modify their order quantity.
• {{variation_attribute_html}} – Shows product variations when necessary.

You can click the copy icon next to any merge tag you wish to include in your description.

Below, you’ll find an option to add a compelling offer message to your WooCommerce order bump. Enabling this feature can enhance the urgency of your offer.

This type of ‘exclusive’ messaging can foster a sense of unique value and create urgency at the checkout.

You can also tailor this message to fit your specific offer. Here are some impactful examples for your order bump:

• “One-time offer – available only for a limited time!”
• “Exclusive discount available only at checkout”
• “Special bundle deal – save 50% today”
• “Limited time offer – add to your order now”

The final option in the ‘Content’ tab lets you select an image for the order bump. If you prefer not to use an image, simply turn off the ‘Product Image’ toggle.

If you choose to use an image, you can either select the product’s default image or opt for ‘Custom’ to upload one from your device.

After selecting an image, you can adjust its width and placement.

Be sure to review and fine-tune all settings until you are satisfied with the appearance of the bump.

Next, scroll up and click the ‘Save’ button.

Step 5: Personalize the Order Bump Appearance

At this point, switch to the ‘Style’ tab to modify every visual detail of your WooCommerce order bump.

Let’s review the key settings to design an attractive bump offer box.

First, navigate to the ‘General’ tab. In the ‘Position’ dropdown menu, select where you want your order bump offer to appear. Your options include:

• Above or below the order summary
• Above or below the payment gateways
• Inside or above the mini cart
• Above the checkout form

The ideal position for your offers at checkout varies based on your selected template and the products you’re selling. We suggest placing your order bump in a visible spot that doesn’t disrupt the natural checkout process.

For most WooCommerce stores, placing it near the order summary is effective since customers are already reviewing their items.

If you’re uncertain, simply click the ‘Preview’ button to see how the checkout page looks.

You will also find two additional important settings in this tab.

The ‘Hide Order Bump after selection’ setting will remove the offer once it has been accepted.

This feature is beneficial if you have multiple order bumps or wish to maintain a tidy checkout page after the customer makes their selection.

By accessing the ‘Layout’ tab, you can fully personalize the appearance of your bump offer box. You can select the background color, adjust padding, and change border styles to align with your store’s branding.

You can toggle between ‘Default’ and ‘Hover’ modes to create a distinct look when the cursor hovers over the order bump.

The ‘Call To Action Text’ tab plays a crucial role in your order bump design.

FunnelKit allows you to customize the background color, text color, font size, and hover state appearance of that section.

You can also incorporate an arrow pointing to your call-to-action text and activate the ‘Arrow Animation’ feature to add animation.

Although the default arrow color is red, you can select any color that complements your design. Ensure it is eye-catching without conflicting with your WooCommerce checkout aesthetic.

The next setting is ‘Price’, which controls how pricing is displayed. We recommend keeping it clear and prominent, as transparent pricing fosters trust and aids customers in making swift decisions.

You can modify the font size and text color to emphasize the value of your product offer.

If you have activated the exclusive offer text, you can personalize its font size, text color, and placement within the bump offer box.

Don’t forget to click ‘Save’ after finalizing your customization preferences.

Step 6: Configure Your Order Bump Discount

Next, navigate to the ‘Products’ tab to establish pricing for your WooCommerce order bump. Here, you can modify how your product will be priced when presented as a bump offer during checkout.

You should have already added a product in Step 3. In the ‘Discount’ field, you can select from the following discount types:

• Percentage Discount on Sale Price
• Percentage Discount on Regular Price
• Fixed Amount Discount on Sale Price
• Fixed Amount Discount on Regular Price

Select ‘Regular Price’ options if you want to apply a discount from the original price. Use ‘Sale Price’ options if the product is already discounted and you wish to provide an even better deal in your order bump offer.

Ensure your offer is enticing yet reasonable. We suggest a discount of 15-30%, which is attractive enough to catch attention without undermining the value of your WooCommerce product.

To offer it as a free gift, simply input 100 in the discount field.

As you scroll down to the ‘Product Settings’ section, you’ll discover two effective options for how your offer operates:

• Add the Order Bump to Cart Items:This is the traditional order bump. It adds the new product to the customer’s current cart, thereby increasing the total order value.
• Replace a Cart Item with the Order Bump:This option acts as an upsell. It replaces an item in the cart with a superior one, such as upgrading from a standard product to a premium version.

Since our aim is to add a complementary product, we will proceed with the first option for this tutorial.

Once you are happy with the discount offer, scroll back up.

Then, click ‘Save.’

Step 7: Establish the Rules to Activate the Order Bump

We have successfully configured the order bump products and their design. Now, let’s establish the conditions that determine when the offer will be displayed on your checkout page.

This process involves using conditional logic. Don’t worry about the terminology; it simply refers to creating straightforward ‘if-then’ rules for your store.

For instance:IFa customer has a jacket in their shopping cart,THENpresent them with an offer for a coordinating scarf.

To set this up, go to the ‘Rules’ tab and click on ‘Add Rules.’

You can create multiple rules to ensure the order bump displays during checkout. These rules can be based on factors such as the contents of the cart, customer details, location, date and time, or the specific checkout page you are using.

Additionally, you can combine several conditions into a single rule by using the ‘Add Condition’ button.

In the example provided, the order bump will only be activated if the customer purchases more than one item and includes a jacket in their order.

By clicking the ‘Create Rule Group’ button beneath a rule, you can opt to have the order bump appear under different conditions.

For example, you can set a condition that displays the order bump when a customer adds either a jacket or a shirt to their cart. This allows you to promote the same offer across different products.

We also suggest implementing a rule to ensure that your order bump does not show up if customers already have the offer product in their cart. You can achieve this by selecting:

1. ‘Cart Item(s)’
2. ‘does not contain’
3. Your bump offer product

This helps avoid confusion and ensures a smooth checkout experience.

Once you are satisfied with the rules, simply click the ‘Save’ button located in the top right corner to save your settings.

Additionally, click the ‘Enable Store Checkout’ button if you are pleased with your custom checkout funnel and wish to activate it immediately.

You can now test your checkout process to see how the WooCommerce order bump appears.

Here’s an example of its appearance on our demo website.

Step 8: Monitor and Optimize Your Order Bump Conversions

Now that your WooCommerce order bump is live, it’s important to track its performance to effectively increase sales. FunnelKit simplifies this with integrated analytics.

Just navigate toFunnelKit » Store CheckoutSwitch to the ‘Analytics’ tab to monitor the performance of your checkout offers.

In the Analytics dashboard, you will find comprehensive data about your checkout sales funnel, including revenue generated specifically from order bump offers. This allows you to gauge the additional income your WooCommerce bump offer produces.

The ‘Referrers’ tab in the Analytics section shows the sources of your converting customers, whether they come from direct traffic, Facebook, Google, or Instagram.

This information enables you to concentrate your marketing efforts on the most effective channels.

You can also visit the ‘Conversions’ tab for further insights.

This section displays the total orders processed through your customized checkout. Additionally, you can hover over the ‘Total Spent’ column to see how much of your WooCommerce sales are attributed to order bumps.

Looking for more detailed insights? We suggest integrating Google Analytics to thoroughly track your WooCommerce checkout performance. Refer to our guide on WooCommerce conversion tracking with Google Analytics for setup instructions.

Common Questions About WooCommerce Order Bumps

Here are some frequently asked questions from our readers regarding WooCommerce order bumps:

What types of products are most effective for an order bump?

The ideal products for an order bump should complement the items already in the customer’s cart. Consider offering low-cost, high-value add-ons that are easy decisions, such as a cleaning kit for a camera or an extended warranty for an electronic device.

What is the optimal number of order bumps to present at once?

We suggest displaying only one highly relevant order bump at a time. Presenting too many options can overwhelm customers and distract them from completing their main purchase.

Is it possible to include a free product as an order bump?

Absolutely, providing a free gift is an excellent strategy to enhance customer satisfaction and boost conversions. For free items, it’s advisable to have the order bump pre-selected to ensure the customer doesn’t overlook it.

What is the best location for an order bump?

The most effective locations for an order bump are near the order summary or just above the payment options. At this stage, customers are reviewing their purchase details, making them more open to a relevant last-minute offer.

Additional Resources to Enhance Your Order Bump Effectiveness

To further improve your order bump effectiveness, consider exploring these related guides:

• How to Display Frequently Bought Together Products in WooCommerce
• How to Display Product Recommendations in WordPress
• How to Build a High-Converting Sales Funnel in WordPress
• How to Enhance the Customer Journey for Your WooCommerce Store

We hope this article has helped you understand how to create an order bump for WooCommerce. You may also want to explore our expert recommendations for the best WooCommerce points and rewards plugins, as well as our guide on selling product bundles in WooCommerce.

If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.