Implementing Dynamic Order Bumps for WooCommerce: A Step-by-Step Guide

Why Use Order Bumps?

• Increased Revenue: By offering relevant upsell products, you can maximize the revenue per transaction.
• Improved User Experience: Dynamic order bumps tailored to the customer’s cart create a seamless shopping experience.
• Customizability: You can use conditions to display the most appropriate products for upselling.

Features of Our Dynamic Order Bump Plugin

1. Dynamic Conditions: Display products based on cart total, item count, or custom rules.
2. AJAX-Powered Updates: Ensure real-time updates to the order bump section without page reloads.
3. Custom Hooks and Filters: Allow developers to extend the functionality with custom conditions and logic.
4. User-Friendly Interface: Display engaging product details with an “Add to Cart” button directly on the checkout page.

Key Components of the Plugin

1. Defining Conditions

Conditions determine whether the order bump products should be displayed. We use an interface ProductDisplayCondition for consistency across different types of conditions.

interface ProductDisplayCondition {
    public function isSatisfied(): bool;
}

// Example: Cart Total Condition
class CartTotalCondition implements ProductDisplayCondition {
    private $minimumCartTotal;

    public function __construct($minimumCartTotal) {
        $this->minimumCartTotal = $minimumCartTotal;
    }

    public function isSatisfied(): bool {
        $cartTotal = WC()->cart->get_cart_contents_total();
        return $cartTotal >= $this->minimumCartTotal;
    }
}

2. Composite Condition Logic

Combine multiple conditions using “AND” or “OR” logic. This allows for complex decision-making based on the cart state.

class CompositeCondition implements ProductDisplayCondition {
    private $conditions = [];
    private $logic = 'AND';

    public function setLogic($logic) {
        $this->logic = $logic; // 'AND' or 'OR'
    }

    public function addCondition(ProductDisplayCondition $condition) {
        $this->conditions[] = $condition;
    }

    public function isSatisfied(): bool {
        foreach ($this->conditions as $condition) {
            if ($this->logic === 'OR' && $condition->isSatisfied()) {
                return true;
            } elseif ($this->logic === 'AND' && !$condition->isSatisfied()) {
                return false;
            }
        }
        return $this->logic === 'AND';
    }
}

3. Dynamic Product Fetching

Products for the order bump are dynamically fetched based on conditions. If conditions are satisfied, eligible products are displayed.

public function get_order_bump_products() {
    $compositeCondition = new CompositeCondition();
    $conditionProvider = new ConditionProvider();

    foreach ($conditionProvider->getConditions() as $condition) {
        $compositeCondition->addCondition($condition);
    }

    if ($compositeCondition->isSatisfied()) {
        $product_ids = [187, 36]; // Replace with dynamic logic to fetch product IDs
        foreach ($product_ids as $id) {
            $product = wc_get_product($id);
            if ($product && $product->is_purchasable() && $product->is_in_stock()) {
                $products[] = [
                    'id' => $product->get_id(),
                    'name' => $product->get_name(),
                    'price' => wc_price($product->get_price()),
                    'image' => wp_get_attachment_image_src($product->get_image_id(), 'thumbnail')[0],
                ];
            }
        }
    }

    wp_send_json_success($products);
}

4. AJAX Integration

To enhance user experience, the plugin uses AJAX to fetch and display products dynamically without reloading the page.

JavaScript Code (assets/order-bump.js)

document.addEventListener("DOMContentLoaded", () => {
    const orderBumpContainer = document.getElementById("order-bump-products");

    const fetchOrderBumpProducts = () => {
        orderBumpContainer.innerHTML = '<p>Loading...</p>';
        fetch(`${orderBumpConfig.ajaxUrl}?action=get_order_bump_products`)
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    renderOrderBumpProducts(data.data);
                } else {
                    orderBumpContainer.innerHTML = '<p>No products available for the order bump.</p>';
                }
            })
            .catch(() => {
                orderBumpContainer.innerHTML = '<p>Failed to load products. Please try again.</p>';
            });
    };

    const renderOrderBumpProducts = (products) => {
        let html = products.map(product => `
            <div class="order-bump-product">
                <img src="${product.image}" alt="${product.name}" />
                <div>
                    <p>${product.name}</p>
                    <p>${product.price}</p>
                    <button data-id="${product.id}" class="add-to-cart">Add</button>
                </div>
            </div>
        `).join('');
        orderBumpContainer.innerHTML = html;
    };

    fetchOrderBumpProducts();
});

5. Adding Products to the Cart

Enable users to add products to their cart directly from the order bump section.

public function add_product_to_cart() {
    $product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;

    if ($product_id > 0) {
        $product = wc_get_product($product_id);
        if ($product && $product->is_purchasable() && $product->is_in_stock()) {
            WC()->cart->add_to_cart($product_id);
            wp_send_json_success(['message' => 'Product added to cart.']);
        } else {
            wp_send_json_error(['message' => 'Product is not purchasable or out of stock.']);
        }
    } else {
        wp_send_json_error(['message' => 'Invalid product ID.']);
    }
}

Extending the Plugin

You can extend the plugin by adding custom conditions using hooks and filters. For example, add a condition to check if a user is logged in:

class UserLoggedInCondition implements ProductDisplayCondition {
    public function isSatisfied(): bool {
        return is_user_logged_in();
    }
}

add_action('add_order_bump_conditions', function($compositeCondition) {
    $compositeCondition->addCondition(new UserLoggedInCondition());
});

Conclusion

Implementing dynamic order bumps in WooCommerce is an excellent way to boost sales and enhance the customer experience. By leveraging conditions, AJAX, and filters, you can create a highly customizable and efficient solution tailored to your store’s needs. Try implementing this solution and watch your revenue grow!