WooCommerce Checkout Upsell Funnel

Support Purchase

WooCommerce Checkout Upsell Funnel – Order Bump is a WooCommerce extension that helps you to offer product suggestions and WooCommerce order bump with attractive discounts to the customers on their checkout page. On the checkout page,  the WooCommerce Checkout Upsell Funnel – Order Bump will suggest customers purchase extra products along with a good deal without interrupting their checkout progress.

THE PLUGIN FEATURES

Upsell Funnel

When the customers hit the “Place Order” button, WooCommerce Checkout Upsell Funnel will offer them a checkout funnel to buy extra products with a discount. Moreover, those offers will not interrupt their checkout progress. If the customer accepts the offer, the extra product will be added to their going-to-purchase order.

• Suggest products: the plugin will suggest customers purchase more products when they hit the “Place Order” button.  You can create the suggestion on the Checkout page from many types of products on your WooCommerce.
• Display location:  you can choose to display the suggested products on the checkout page, on a pop-up, or redirect the customers to an “order suggestion” page.
• Pop-up: the order suggestion pop-up will appear on the checkout page when a customer clicks on the place order button.
• On the checkout page: a product suggestion list will appear on the checkout page when a customer clicks on the place order button.
• Order suggestion page: with this option, the customers will be redirected to this page when they click place order.
• Display time: Set up the days in the week to display the suggested products.
• Discount rules: apply the discount type and discount amount for product suggestions to encourage the customers to buy more products.
• Design Checkout Funnel: Many options to design the layout, content, title, product list and icons of the Checkout funnel. Besides that, you can use the available shortcode to make the title, content, messages on Checkout Funnel become more flexible.
• Countdown timer on Checkout page: Create and design Countdown timer on Checkout Funnel. The display of the countdown timer on the checkout page will encourage the customers to buy the suggested products more quickly.
• Custom CSS: You can add your own CSS code to design the upsell funnel on the front-end as you want.

Conditions for displaying the Upsell Funnel

You can set up the conditions to display the Upsell Funnel

• Product conditions: set the conditions such as product price, include products, exclude products, include categories, exclude categories, product visibility.
• Cart conditions: Cart total, Cart items, applied coupon, billing address, shipping address. The customers need to have their carts met the conditions to be offered the product suggestion on the checkout page.
• Customer conditions: Limit per day, only logged in, include/exclude user role, include/exclude user. Only customers meeting the conditions are offered the product suggestion on the checkout page.

WooCommerce Order Bump

WooCommerce Order bumps help to give the products on the checkout page, that the shoppers can add to their cart. They’re usually related products that complement what the customer is buying. With the smart WooCommerce order bumps, you can easily add an extra offer to the final step of the funnel to boost your sale.

• Unlimited WooCommerce Order Bumps: You can create as many WooCommerce order bumps as you want and assign them to work on your WooCommerce Store.
• Suggest products on the Order Bump:  Create the suggestion on the WooCommerce Order Bump from many types of products on your WooCommerce.
• Discount rules for the products on the Order Bumps: Apply the discount type and discount amount for the products that appeared on the WooCommerce Order bump.
•  Cart conditions for displaying the Order Bump: Create the cart condition applied to display the WooCommerce Order Bump such as cart total, Cart items, applied coupon, billing address, shipping address.
•  Customer conditions for displaying the Order Bump: Limit per day, only logged in, include/exclude user role, include/exclude user. O
• Design the WooCommerce Order Bump: Many options to design the background, title, messages, content, product images on the WooCommerce Order Bumps. In addition, you can use the available shortcode to make the content, messages on the WooCommerce order bump become more flexible.

Report

The plugin provides the reports for all items sold from Upsell Funnel and WooCommerce Order Bumps.

• Total sales: Report about the rate of Sales from WooCommerce Order Bump and Upsell Funnel over the total Sale.
• Best-selling products: Report about the products which are best-selling through Upsell Funnel or  WooCommerce Order Bumps.
• Statistics Filter:  the statistics based on the filters such as the order status, dates, month.

Compatibility

With displaying the Upsell Funnel on the popup and redirected page, the plugin is compatible with the payment Gateway below:

• • Stripe Payment Gateway: WooCommerce Stripe Payment Gateway
  • Square Payment Gateway: WooCommerce Square
  • PayPal Payment Gateway: WooCommerce PayPal Checkout Payment Gateway
  • REDIS – WooCommerce Dynamic Pricing and Discounts by VillaTheme
  • WooCommerce Cart All in One by VillaTheme

Required: 

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

 

Go Dashboard/ Plugins/ Add New and install the plugin using the installable zip file.

Video How to install and use the plugin:

After  install successful the plugin, go to Dashboard/ Checkout funnel to config its settings.

1. Go to Upsell Funnel settings to configure the Upsell Funnel as you want.

In the General settings, enable the Upsell Funnel.

2. Go to Rules & Products tab to set all the rules for displaying Upsell funnel

3. Design the Upsell Funnel in the Design Tab

 

If you want to have Order Bumps on the Checkout page, Go to the Order Bump settings and configure it.

In Order Bumps Tab.

To find more detail about to use all the options, please read the section “HOW DOES IT WORK”.

UPSELL FUNNEL

General settings

1. Enable option: Enable the Upsell Funnel.

2. Apply Coupon: enable it to apply the coupon to the recommended products on the checkout funnel

3. Redirect to single products: enable it to redirect to the single product pages when the customers click on the images or the titles of the products on checkout funnel.

4. Hide added products: Enable it to hide the added products by the customers from the recommended products on checkout funnel.

5. Style to display recommended products: Choose the style to display recommended products on checkout funnel. There are three styles: On checkout page, On popup after clicking “place order button”, redirect to another page after clicking “Place order” button.

6. Product position on checkout page: In the case of choosing the on checkout page style, please choose the products position on checkout page. There are six positions to choose: before and after billing details, before order details, before and after payment gateways, after checkout form.

In the case of choosing redirect to another page after clicking “Place order” button, please insert the endpoint page of the URL

In the case of choosing the style “On popup after clicking ‘Place Order’ button” – there is a popup showing the recommended products after clicking on place order button.

7. Mobile enable: Enable it to display the Upsell funnel on mobile.

8. Style to display recommended products on mobile: Choose the style to display recommended products on checkout funnel on mobile. There are three styles: On checkout page, On popup after clicking “place order button”, redirect to another page after clicking “Place order” button.

9. Products position on checkout page on mobile: Choose the position of recommended products on mobile checkout page.

 

Rules & Products

General settings of Rules & Products

1. Name: Give the name for the upsell Funnel

2. Days: Choose the days to display the upsell Funnel in the week

Recommended products

1. Types: Choose the type of recommended products displayed on Upsell Funnel. There are 15 types to choose from: Recently published products, Recently viewed products, Related products of the products in the cart, Up-sells of products in the cart, Cross-sell of products in the cart, Products from Billing, Most expensive product from Billings…

If you choose the types of Cross-sell and Upsell  of products in the cart, please go the edit product pages and insert the upsell and cross-sell product for them:

2. Discount amount: Choose the type and the number for the discount amount applied on the Upsell Funnel. You can choose None or one of four types of discounts.

3. Products limit: Set the limitation for the number of recommended products displayed on Upsell Funnel

4. Product quantity limit: Set the limitation for the number of the items the customers can add to cart for each product from the upsell funnel.

5. Order product by: Choose the way to order products on Upsell Funnel. You can order the products by one in 8 types: date, ID, Menu order, popularity, Price, Random, rating, title.

Conditions of Products

Those settings help to add the conditions for the products chosen to displayed on the Upsell Funnel.

1. Add Conditions (And): Click to add the condition, the plugin will apply all the condition you created.

2. Product Price: Set up the Min ($) and the Max ($) in Price of the recommended Products. The upsell Funnel will not show the products which are not in that rage.

3. Show Variation: Choose  “Yes” or “No” to show or not the Variations on the upsell Funnel.

4. Product visibility:  Choose the product visibility type for the recommended products to display.

5. Include products: Set the specific products to display on Upsell Funnel.

6. Exclude products: Set the specific products not to display on Upsell Funnel.

7. Include Categories: Set the specific categories to display on Upsell Funnel.

8. Exclude Categories: Set the specific categories not to display on Upsell Funnel.

Cart Conditions

Those settings help to add the conditions for the Carts chosen to display  the Upsell Funnel.

1 and 2: Set the range for the Cart Subtotal and Cart Total chosen to display the Upsell Funnel.  The Recommended Product will be not shown with the carts having the Subtotal or Total be not in these ranges.

3. Include all Products: Always show the Recommended products, regardless of the items present in the cart.

4. Include any Products: Set the specific products which the carts must have them to be displayed the Recommended products.

5. Exclude any Products: Set the specific Products which the carts must not have them to be displayed the Recommended products.

6. Include Cart items by categories: Set the specific categories which the carts must have the items of these categories to be displayed the Recommended products.

7. Exclude Cart items by categories: Set the specific categories which the carts must not have the items of these categories to be displayed the Recommended products.

8. Include Cart items by tags: Set the specific tags which the carts must have these tags to be displayed the Recommended products.

9. Exclude Cart items by tags: Set the specific tags which the carts must not have these tags to be displayed the Recommended products.

 

10. Include Coupon: Set the specific Coupons which the carts must have them to be displayed the Recommended products.

11. Exclude Coupon: Set the specific Coupons which the carts must have them to be displayed the Recommended products.

 

12. Include Billing Countries: Set the specific countries which the carts must have these Billing countries to be displayed the Recommended products

13. Exclude Billing Countries: Set the specific countries which the carts must not have these Billing countries to be displayed the Recommended products

14. Include Shipping Countries: Set the specific countries which the carts must have these Shipping countries to be displayed the Recommended products

15. Exclude Shipping Countries: Set the specific countries which the carts must not have these shipping countries to be displayed the Recommended products.

 

Customer Conditions

1. Limit per day: Set the limitation per day for the customers to see the Recommended products.

2. Only logged: Set up for only the customers who log in to see the Recommended products or not.

3. Include user role: Set up for the specific user roles to see the recommended products.

4. Exclude user role: Set up for the specific user roles not to see the recommended products.

5. Include user: Set up for the specific users to see the recommended products.

6. Exclude user: Set up for the specific users to not see the recommended products.

Design

This section ensures your upsell product list matches your store’s design and improves user experience by offering customization for appearance and functionality.

• Layout
• Content
• Title
• Continue button
• Add all to cart button
• Countdown timer
• Product list

 

Layout

1. Content: Content will not show without {content} – configure setup for this placeholder in Content section. If using the countdown timer shortcodes {countdown_timer}, configure them in the Countdown Timer section. The countdown timer sets a time limit for adding recommended products to the cart, while the content displays the recommended products
2. Border Color: Set up the color of the  border around the box of recommended products
3. Border Style: Set up the style of the  border around the box of recommended products. There are five styles: None, dashed, Double, Dotted, Solid.
4. Border width: Set up the width of the  border around the box of recommended products
5. Border radius: Set up the radius of the  border around the box of recommended products.

 

Content

The {content} placeholder structures the upsell funnel layout, divided into the following sections:

1. Header
   • Content: Set up the header text or elements.
   • Background: Choose the color of the header background
   • Padding: The padding of header background.
2. Container
   • Content: The content of the popup. It is the list of the recommended products.
   • Background: Choose the color for the content background in popup.
   • Padding: Choose the Padding for the container
3. Footer
   • Content: The content of the Popup footer
   • Background: Choose the color for the footer background in popup
   • Padding: Choose the Padding for the Popup footer

Supported placeholder:

{title} – Displays the popup title, customizable in the Title tab.

{product_list} – Shows the recommended products list, customizable in the Product List tab. Only used in the popup container.

{continue_button} – Displays the “Continue Checkout” button, customizable in the Continue Button tab.

{countdown_timer} – Shows a countdown timer for purchasing recommended products, customizable in the Countdown Timer tab.

{add_all_to_cart} – Displays an “Add All to Cart” button. If products appear after clicking “Place Order,” customers can add them all to the cart and check out in one step. Not compatible with the Add to Cart with Checkbox product template. Customizable in the Add All to Cart Button tab.

 

Title

Setup for the {title} placeholder displays the popup title, which can be customized with the following options:

1. Message: Enter the title text. Supports placeholders:
   • {discount_amount} – Displays the discount value.
   • {discount_type} – Displays the discount type (e.g., percentage or fixed amount).
2. Color: Set the text color of the title
3. Font size: Adjust the font size of the title

 

Continue button

The {continue_button} placeholder displays the button for continuing checkout. Customize it with the following options:

1. Title: Set the button text, you can use the title as you want in the Continue button or use the available icons with shortcode {skip_icon}
2. Background: Choose the button’s background color
3. Color: Set the button text color
4. Border color: Choose the color of the button border
5. Border width: Adjust the thickness of the button border
6. Border radius: Set the roundness of the button corners
7. Font size: Customize the text size of the button
8. Skip icon: If you insert the shortcode {skip_icon} into the “Title” field, set up the shortcode using the options below
   • Icon: Select an icon to display on the button
   • Color: Set the icon color
   • Font size: Adjust the size of the icon

 

Add all to cart button

The “Add All to Cart” button allows customers to add all recommended products to their cart at once. However, this button will not work if the Product Template in the Product list settings tab is set to “Add to cart with checkbox”

1. Title: Set the button text, you can use the title as you want in the Add all to cart button or use the available icons with shortcode {cart_icon}
2. Background: Choose the button’s background color
3. Color: Set the button text color
4. Border color: Choose the color of the button border
5. Border width: Adjust the thickness of the button border
6. Border radius: Set the roundness of the button corners
7. Font size: Customize the text size of the button
8. Cart icon: If the “Title” field has the placeholder {cart_icon} in use, set up this placeholder using the following options
   • Icon: Select an icon to display on the button
   • Color: Set the icon color
   • Font size: Adjust the size of the icon

 

Countdown timer

The {countdown_timer} placeholder inside the Layout section displays a countdown timer, creating urgency for customers to add recommended products to their cart before time runs out.

1. Checkout page enable: Enable or disable the countdown timer on the checkout page
2. Display time: Set the duration of the countdown timer (seconds)
3. Reset time: Define when the recommendation popup should reappear if the cart is not checked out and the popup times out
4. Message: Enter a message to display alongside the countdown. Supported shortcodes are
   • {time} – The time to continue checkout
   • {progress_bar} – The bar used to visualization the remaining time of recommended popup
   • {pause_button} – The button use to stop countdown and is only go with continue button
5. Color: Set the message text color
6. Font size: Adjust the message text size
7. Progress bar
   • Enable pause button: Allow customers to pause the countdown
   • Border width: Adjust the thickness of the progress bar’s border
   • Diameter: The distance between the the border and the button center – the overall size of the pause button
   • Background: Choose a background color for the pause button
   • Border color 1: The countdown timer isn’t just a number – the pause button border visually represents the remaining time, similar to a clock filling up or emptying out. This color represents the portion of time that has already elapsed. As time counts down, this section of the border gradually expands, filling up the circle
   • Border color 2: This color represents the time still left before the countdown ends. It shrinks as Border color 1 grows, showing how much time remains.
8. Pause button
   • Title: Use custom text or the {pause_icon} shortcode to display an icon
   • Background: Choose the button background color
   • Color: Set the button text color
   • Border color: Define the button border color
   • Border width: Adjust the thickness of the border
   • Border radius: Set the roundness of the button corners
   • Font size: Customize the text size on the button
9. Pause icon: If the “Title” field under option 8 Pause button contains the {pause_icon}, configure options for that shortcode using
   • Icon: Select an icon for the pause button
   • Color: Set the icon color
   • Font size: Adjust the size of the icon

 

Product list

The {product_list} placeholder controls how recommended products appear inside the upsell popup. These settings allow you to adjust the layout, appearance, and functionality of the product list for both desktop and mobile views.

1. Desktop
   • Display type: Choose between Slider (carousel format) or Scroll (static list)
   • Item per row: Set how many products appear per row
   • Row on Scroll: Adjust how many rows display when scrolling
2. Mobile
   • Display type: Choose between Slider or Scroll for mobile devices
   • Item per row: Set how many products appear per row on mobile
   • Row on Scroll: Adjust the number of visible rows when scrolling
3. Product
   • Template: Choose the display style for products
     • Basic template: Set up the following options
       
       1. Product “Add To Cart” button
          • Title: Use custom text for this button or use the shortcode {cart_icon} and customize the icon under Cart icon – option 5
          • Background: Choose the button background color
          • Color: Set text color
          • Border color: Define the button’s border color
          • Border width: Adjust border thickness
          • Border radius: Set button corner roundness
          • Font size: Customize button text size
       2. Cart icon: If the “Add to Cart” button title has {cart_icon} placeholder in use, customize the icon using the options below
          • Icon: Select an icon for the button
          • Color: Choose the cart icon color
          • Font size: Adjust the size of the cart icon
     • Add to Cart with Checkbox: Set up the Product checkbox button section
       
       • Background: Choose checkbox background color
       • Color: Set text color
       • Border color: Define checkbox border color
       • Border width: Adjust border thickness
       • Border radius: Set checkbox corner roundness
       • Font size: Customize checkbox text size
   • Background: Set the background color for the product list
   • Box shadow color: Customize the shadow effect around each product box.
   • Border color: Define the border color for the product container
   • Border radius: Adjust the roundness of product box corners
4. Product Image
   • Padding: Adjust spacing inside the product image
   • Image border color: Set a color for the image border
   • Image border width: Define the thickness of the image border
   • Image border radius: Adjust image corner roundness
5. Product Details:
   • Show short description: Enable/disable product short descriptions
   • Padding: Adjust spacing inside the details section
   • Font size: Customize text size
   • Color: Set text color
   • Text align: Align the text (left, center, right)
6. Product quantity
   • Background: Set background color
   • Color: Choose the text color
   • Border color: Define border color
   • Border radius: Adjust roundness of quantity selector corners

 

 

ORDER BUMP

General settings

1. Enable the Oder Bumps on checkout page.

2. Mobile Enable: Enable the Order Bump on Mobile

3. Apply Coupon: Enable it to apply the coupon to the products added to cart from order bumps.

4. Application of rules: Choose how to apply the rules: all matched rules or the first  matched rule.

5. Position on checkout page: Choose the position for the Order Bumps on checkout page. There are five position to choose: Before and after billing detail, before order details, before and after payment gateways.

 

Order Bumps

1. Enable the specific Order Bumps. You can create many order Bumps with different rules and designs, enable it to make the plugin run the order bump you choose.

2. Duplicate the Order Bumps.

3. Remove  the Order Bumps.

General settings

1. Name: Create a name for the Order Bumps.

2. Days: Choose the days in the week to display the Order Bumps to the Customers.

3. Timer per day: Set timer to show Order Bump per day.

4. Discount amount: Choose the type and the number for the discount amount applied on the Upsell Funnel.

• None: The order bump item has no discount, sold with its initial price
• Percentage (%) regular price: The discounted price is calculated by subtracting this percentage amount from the regular price.
• Fixed($) regular price: The discounted price is calculated by subtracting this fixed amount from the regular price.
• Percentage (%) price: The discounted price is calculated by subtracting this percentage amount from the sale price. If the product has no sale price, use regular price instead.
• Fixed($) price: The discounted price is calculated by subtracting this fixed amount from the sale price. If the product has no sale price, use regular price instead.
• New fixed($) price: Set a specific price for the order bump, no calculation.

5. Product quantity: Set up the number of products, which  customers can buy each time on order bump.

• Fixed: Customer must buy the exact quantity set up in “Product quantity”, they’re unable to change this quantity on their end if they decides to buy orderbump
• Max quantity that customers can buy: They can adjust quantity of orderbumps they can buy, but no higher than the value set in here.

6. Products: Choose the product to display on the Order Bumps.

Design

1. Choose the background color for the Order Bumps.

2. Padding: Choose the padding for the Order Bumps.

3. Border style: Set up the style of the  border around the box of recommended products. There are five styles: None, dashed, Double, Dotted, Solid.

4.  Border Color: Set up the color of the  border around the Order Bumps.

5. Border width: Set up the width of the  border around the Order Bumps.

6. Border radius: Set up the radius of the  border around the Order Bumps.

Title

1. Message: You can change the message as you want on the Order Bumps.

2. Background Color: Set up the background color of the title box.

3. Color: Set up the color of the text in message.

3. Font size: Set up the size of the text.

4. Padding: Adjust spacing inside the title

5. Font size: Customize text size

Content

1. Message:  You can add the message for the content of Order Bumps. You can use the shortcode below it.

2. Enable product image: Enable the product image in the Order Bumps.

3. Choose the color of the content background.

4. Choose the color of the text,

5. Padding: Set up the padding of the content.

6. Font size: Set up the font size of the text.

7. Max content length: Change the max length of the content.

Cart Conditions

1 and 2: Set the range for the Cart Subtotal and Cart Total chosen to display the Order Bumps.  The Order Bumps will be not shown with the carts having the Subtotal or Total be not in these ranges.

3. Include Cart Items: Set the specific products which the carts must have them to be displayed the Order Bumps.

4. Exclude Cart items: Set the specific Products which the carts must not have them to be displayed the Order Bumps.

5. Include Cart items by categories: Set the specific categories which the carts must have the items of these categories to be displayed the Order Bumps.

6. Exclude Cart items by categories: Set the specific categories which the carts must not have the items of these categories to be displayed the Order Bumps.

7. Include Coupon: Set the specific Coupons which the carts must have them to be displayed the Order Bumps.

8. Exclude Coupon: Set the specific Coupons which the carts must have them to be displayed the Order Bumps.

9. Include Billing Countries: Set the specific countries which the carts must have these billing countries to be displayed the Order Bumps.

10. Exclude Billing Countries: Set the specific countries which the carts must not have these billing countries to be displayed the Order Bumps.

11. Include Shipping Countries: Set the specific countries which the carts must have these shipping countries to be displayed the Order Bumps.

12. Exclude Shipping Countries: Set the specific countries which the carts must not have these shipping countries to be displayed the Order Bumps.

Customer conditions

1. Limit per day: Set the limitation per day for the customers to see the Order Bumps.

2. Only logged: Set up for only the customers who log in to see the Order Bumps or not.

3. Include user role: Set up for the specific user roles to see the Order Bumps.

4. Exclude user role: Set up for the specific user roles not to see the Order Bumps.

5. Include user: Set up for the specific users to see the Order Bumps.

6. Exclude user: Set up for the specific users to not see Order Bumps.

REPORTS

Orders Report

Products Report

With displaying the Upsell Funnel on popup and redirected page, the plugin is compatible with the payment Gateway below:

Plugin	Author	Compatible
Stripe For WooCommerce	Payment plugins
WooCommerce Cart All in One	VillaTheme	Fully
REDIS – WooCommerce Dynamic Pricing and Discounts	VillaTheme	Fully
WooCommerce Boost Sales	VillaTheme	Fully

 

Watch this video for integrating WooCommerce Checkout Upsell Funnel and multilingual plugins

Template	Usage
/checkout-order-bump.php	Order bump form
/checkout-upsell-funnel.php	Upsell funnel form

 

Follow this guide on how to override VillaTheme plugins’ templates via a theme.

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.