The checkout process is one of the most important components of any eCommerce transaction. Why? Because we are now on the last step of converting your website visitor into a customer and we are not in the business of letting a sale walk out of the hypothetical internet door. Our visitors are primed for this transition, all we need to do is carry them over the threshold.

The first way we do this is by making sure that our checkout pages are as clear and functional as possible without causing friction for our visitors. We haven’t spent time designing fantastic landing and store pages just to annoy or confuse the customer. Do yourself a favor and check out our previous post on How to Create a Custom Divi WooCommerce Category Page if you’d like a tutorial on how to do just that.

The second thing, and equally important, is to utilize this opportunity while our visitor is primed by bringing value to both the visitor and our store. Order Bumps are a proven method to make this happen and you’re about to find out exactly how to implement them in your store.

So what is an Order Bump anyway?

On the meta, order bumps are simply a last-minute offer or discount to increase the Average Order Value right before the visitor submits their payment information on your online store. We’ve all seen them. You are casually checking out on your favorite online retailer when you notice some other shiny things while inputting your card info and whoops, you just added a case to go with your new Oculus.

So now that we know what an Order Bump is, let’s take a look at why they are important.

Benefits of using Order Bumps

Some great examples of Order Bumps

Let’s get to it!

Different ways you can add Order Bumps to WooCommerce and Divi

If you are already using a plugin to Create and Manage your Order Bumps in Divi and WooCommerce, fantastic! You are already on your way to boost your sales and deliver the best possible experience for your customers.

Next, we are going to show you just how easy it is to add Order Bumps using BodyCommerce.

How to add an Order Bump to WooCommerce and Divi using BodyCommerce

Let’s get started!

Building the Layout for our WooCommerce Order Bump

To get the ball rolling, head over to your Divi Library and add a new layout. We called ours “Order Bump Layout” but you can really call this anything you want. When prompted select “Build From Scratch” and add a 2 Column Row.

Great, now let’s start adding some modules. We will start with adding a thumbnail for our Order Bump layout, so click on the Add Module “+” in the first column and select the “.LL Thumbnail – Loop Layout” module.

.LL Thumbnail – Loop Layout Module

Content Tab

All we have to do here is to remove the link to the product page by setting “Link Image to Single Page” to “NO” and also removing the image overlay by changing the “Image Style” to “Image Only (no overlay)”.

We do this because we don’t want to tempt the customer into clicking the image and being taken away from the checkout page. We also don’t want to distract them with overlays.

All done, next up is adding our product title to the second column. To do this we will add a “.PL Title – Product Page / Loop Layout” module at the top of the second column by hitting the grey “+”.

.PL Title – Product Page / Loop Layout Module

Content Tab

We just want to increase the title size a bit, so set the “Title HTML Tag” to “H3”.

Now here we get into 2 modules that are specific to our Order Bump of which one is always needed for order bumps to work. First, we will add the optional “.CF Order Bump Price – Checkout Funnel” module which as you guessed, displays the product price and will reflect any special discount you added for the Order Bump.

To add it, hit the grey “+” below the .PL Title – Product Page / Loop Layout module we just added and select the “.CF Order Bump Price – Checkout Funnel” module.

.CF Order Bump Price – Checkout Funnel Module

Design Tab

To make our fantastic discount pop out a little more, we are just going to change the “Price Font Weight” to “Bold” and give the “Price Text Color” a nice “Red”.

Time to add the .CF Order Bump Add – Checkout Funnel module will allow our visitors to add the product to their cart with one click without needing to leave the Checkout Page.

Hit that grey “+” again and select the “.CF Order Bump Add – Checkout Funnel” module.

.CF Order Bump Add – Checkout Funnel

Content Tab

We want a catchy label here that will create some urgency for the visitor. Let’s change the “Checkout Label” property to “Grab this exclusive offer right now!”.

Design Tab

To make the, for lack of a better word, add-to-cart checkbox, stand out a bit we can conveniently style it from the design tab. We will change the background of our checkbox by adding the color “#0df1a5” to the “Field Background Color” property. All that is left to do here now is add “#5430ce” as our “Field Text Color” and we are almost done with our Order Bump Layout!

To round things out we are going to add a border around the whole layout so it does not get lost on our Checkout Page, then also add a nice title to draw the vistors eye to the Order Bump offer.

Let’s open the section setting and add the border first.

Section Settings

Design Tab

Under the “BORDER” section add a “Border Width” of “5px”, set the “Border Color” to “#0DF1A5”, and set the “Border Style” to “Dotted“. Super easy!

Almost there folks! 

The last thing we need to do is add a Single Column Row then add a Text Module above the other row we have in our WooCommerce Order Bump layout. Click that green “+”, select “Single Column Row”, then add a “Text Module”.

Text Module

Content Tab

To grab our visitors attention we will change the “Text Body” to “LIMITED SPECIAL OFFER!” and set it to “Heading 3”. Seems urgent enough. 

Design Tab

Under “Heading Text” we need to select “H3” so that we only target the relevant heading. We need to change the “Heading 3 Font Weight” to “Bold”, “Heading 3 Text Alignment” to “Centered”, and give the “Heading 3 Text Color” a “Red” color.

Now just save and drag this new green row to the top of our section and we can save the Divi WooCommerce Order Bump layout!

Before we continue, let’s just quickly take a look at our checkout page to see what it looks like right now.

Wait, where is our Divi WooCommerce Order Bump we just hand-crafted? Don’t stress, we just need to head into the BodyCommerce settings to tell it to use our new layout.

Configuring Divi BodyCommerce to Display our WooCommerce Order Bump

Now for the easiest part, telling BodyCommerce to magically display our fancy layout right on the checkout page in one for the preset locations.

Go ahead and browse to your BodyCommerce settings and click on the “Order Bump” tab.

Once here we want to flip the Order Bump setting on, so set “Enable Order Bump” to “YES”.

To select how products get pulled in to be displayed in the Order Bump, we need to select the “Product Type to Show”. For the purposes of our tutorial, we will set this to “Specific Product”

Right below you can select any “Specific Product” you like, we selected “Sunglasses”.

Next, we need to tell BodyCommerce which layout to add to our Checkout Page. This is where we select that hand-crafted layout of ours. Just hit the drop-down next to “Select Order Bump Template” and select the layout you created previously.

Last step, can you believe it? We need to decide where we would like our WooCommerce Order Bump to be displayed. You can see all the options in the “Order Bump Position” drop-down, we selected the “Before Payment” option, but feel free to experiment and see what works best for your site.

And that ladies and gentleman, is how easy it is to add a custom Divi WooCommerce order bump to your eCommerce store. I told you it was easy, didn’t I? Congrats champ!