BricksUltimate

Home Woo Elements Order Bumps

Order Bumps for Checkout Page - Boost Your Sales Effortlessly

Order bumps are strategically placed upsell offers displayed on the checkout page, encouraging customers to add complementary products or upgrades to their purchase. They are a powerful way to increase average order value (AOV) without disrupting the buying process.

Order Bumps
Order Bumps

Why Use BricksUltimate Order Bumps?

BricksUltimate (a premium add-on for the Bricks Builder WordPress theme) provides a seamless way to implement high-converting order bumps on your checkout page. Here’s why it’s a game-changer:

1. Easy Integration with WooCommerce

  • Works flawlessly with WooCommerce checkout.
  • No coding required—set up visually using Bricks Builder.

2. Highly Customizable

  • Design order bumps to match your brand.
  • Choose from different display styles (checkbox, button, image + text).
  • Adjust positioning (before/after order summary, below payment options).

Step-by-step User Guide

Step 1: Go to Bricks->BricksUltimate->Misc tab and enable the Order Bumps option. You get the new sub menu Order Bumps under the Products parent menu on your WordPress dashboard.

Step 2: Now, let's create your first order bump:

  1. Navigate to Product -> Order Bumps and Click on the Add New button.
  2. Select which product to offer as your order bump.
  3. Select Discount type: Percentage Off or Amount Off
  4. Enter the discount amount
  5. Add the offer description
  6. Quantity(Quantity of offer product to add in the cart)
  7. Setup the Display condition. By default, it will apply for all products.
  8. Click on the Publish button

Step 3:

Open the checkout template on the Bricks editor and make a query loop:

  1. Add a BLOCK element on the canvas
  2. Enable the Query loop
  3. Click on the Query()
  4. A popup will appear.
  5. Select Post type "Order Bumps"
  6. Posts Per Page = 1
  7. Disable merge query

Query loop is done. Now add the some elements inside the BLOCK element and create the order bumps layout

  1. Add the Add Order Bumps element.
  2. Add the Image Element and setup the dynamic tag {featuerd_image} or {buob_product_image}. It will display the featured image of the offer product.
  3. Enter the Heading element and put {buob_product_title} dynamic tag. It will display the offer product title. Or you can use the {post_title} and it will display the Order Bumps post title.
  4. Add the Basic Text element and enter the {buob_description} or {buob_product_description} dynamic tag to display the description.
  5. Display the offer price. Add the Basic Text element and use {buob_product_price} dynamic tag.
  6. If you want to display the discount percentage, you use the {buob_discount_amount} dynamic tag.
  7. Adjust the design(color, fonts, size, background color, etc.) as per your site design and save the template

Go to the Checkout page and test the order bumps feature.

Preview