Have you ever wanted to have an order bump automatically selected when someone lands on your ClickFunnels checkout page?

This can be really useful in several scenarios:

  • Running a paid trial where you want the $1 trial bump always checked
  • Automatically selecting a complementary product based on what the customer chooses
  • Pre-selecting an order bump for specific pricing tiers

In this tutorial, I’ll show you how to automatically select order bumps in ClickFunnels using a bit of JavaScript.

This works for both single product and multi-product checkouts.

Single Product Checkouts

If you just have one product on your checkout page and want its order bump to be automatically selected, the code is pretty straightforward:

window.onload = function() {
  var bumpOfferCheckbox = document.querySelector("#bump-offer");
  if (bumpOfferCheckbox) {
    bumpOfferCheckbox.click();
  }
};

Add this code to your page’s Tracking Code > Footer Code section in ClickFunnels. Here’s what it does:

  1. window.onload waits for the page to fully load
  2. We find the order bump checkbox using querySelector("#bump-offer")
  3. If the checkbox exists, we programmatically click it

Multi-Product Checkouts

For checkouts with multiple products where you want to automatically select an order bump based on the specific product, we’ll need a more sophisticated approach:

document.addEventListener('DOMContentLoaded', function() {
  var selectedProduct = document.querySelector('input[name="purchase[product_id]"]:checked');
  var bumpOfferCheckbox = document.querySelector("#bump-offer");

  // Function to click the bump offer checkbox
  function clickBumpOffer() {
    if (bumpOfferCheckbox && !bumpOfferCheckbox.checked) {
      bumpOfferCheckbox.click();
    } else if (bumpOfferCheckbox && bumpOfferCheckbox.checked) {
      bumpOfferCheckbox.click(); // To uncheck if already checked
      bumpOfferCheckbox.click(); // And then re-check to trigger the cart update
    }
  }

  // Check if specific product is pre-selected
  if (selectedProduct && selectedProduct.value === "YOUR_PRODUCT_ID") {
    clickBumpOffer();
  }
});

// Listen for product selection changes
document.querySelectorAll('input[name="purchase[product_id]"]').forEach(function(product) {
  product.addEventListener('change', function() {
    var bumpOfferCheckbox = document.querySelector("#bump-offer");
    
    if (this.value === "YOUR_PRODUCT_ID") {
      if (!bumpOfferCheckbox.checked) {
        bumpOfferCheckbox.click();
      }
    } else {
      if (bumpOfferCheckbox.checked) {
        bumpOfferCheckbox.click();
      }
    }
  });
});

Replace the two YOUR_PRODUCT_ID instances with the ID of the product you want to trigger the automatic order bump selection.

You can find this ID in your product settings or by inspecting the radio button element in your browser’s dev tools.

This code:

  1. Checks if your specific product is selected when the page loads
  2. Automatically selects the order bump if it is
  3. Listens for changes in product selection
  4. Toggles the order bump checkbox when customers switch between products

Important Notes

  • Always test thoroughly before using on a live checkout page
  • While not required, it’s a good idea to keep your order bump visible in case the JavaScript fails to load

Wrapping Up

These code snippets give you more control over your order bumps in ClickFunnels Classic, letting you create smarter, more dynamic checkout pages that adapt to your customers’ selections.

Let me know in the comments if you found it helpful!