Dynamic Order Bump & Upsell

[lf-bump product=xxxx]
Description:

Add or remove any product from the checkout dynamically, without leaving the page. Perfect for order upsells, order bumps, or custom product bundles.

Use Case:

Use this with any WooCommerce product ID to generate a checkbox and product thumbnail that allow any product to be added or removed from the checkout.

With the Dynamic Order Bump & Upsell, it is possible to add and remove a product without needing to locate and click the “x” (remove) icon in the order review area.

This makes it perfect for remotely placed widgets or elements, as well as unique “bundle” offers, where any product can be mixed with others simply by checking or unchecking.

The position, size and style of the checkbox and thumbnail are easily adjusted any adding any of the CSS provided here to the element, widget or block holding the shortcode.

 

Example:

Add the shortcode syntax to your layout wherever a shortcode may operate (text editor, shortcode element, widget or block, dynamic field).

Then replace the “xxxx” with the id of the product you would like to have dynamically available to add/remove from the checkout.

For example: [lf-bump product=xxxx] would become [lf-bump product=3630] with “3630” being the id of your particular product.

After you save the shortcode, you will see two components appear: The Checkbox & The Thumbnail

You may easily modify whether the style of both components as well as whether you wish for the thumbnail to appear or only the checkbox.

To modify these parameters, it is easiest to copy and paste the following snippet to the “Additional CSS” box of your Element or page builder block, making changes as you wish.

.lf-bump img{ 
    display: none; /* hide or show thumbnail. default is "block" */
    width: 300px; /* change size larger or smaller. default is 75px */
    margin: 0 0 0 10px; /* add space between checkbox and img */
}


.lf-bump input.switch {
    transform: scale(2); /* larger numbers increase size. default is 1.5 */ 
    
}

.lf-bump {
    flex-direction: row; /* default is row. choose from: row | row-reverse | column | column-reverse */
    display: flex;
    align-items: center;
}