How to Display Dynamic Bulk Pricing on the WooCommerce Product Page

In a recent Business Bloomer Club Slack thread, a WooCommerce developer wanted to dynamically update bulk pricing on the product page as the quantity changes, similar to how pricing updates in the cart.

While they had a working bulk pricing script for the cart, the goal was to show these price adjustments immediately on the product page as users selected quantities, without page reloads.

Here’s a guide on how to implement this with PHP and JavaScript, using a pricing table and dynamic updates for the single product page.

Step 1: Display a Bulk Pricing Table on the Product Page

First, we’ll add a pricing table to the product page to visually show bulk discounts based on quantity. This table can guide customers about the price per unit for different quantities and reinforce the benefits of bulk purchasing.

Add the following code to your theme’s functions.php file:

add_action( 'woocommerce_after_add_to_cart_form', 'custom_bulk_pricing_table' );

function custom_bulk_pricing_table() {
    global $product;

    // Define bulk pricing rules
    $prices = array(
        1 => $product->get_price(),
        2 => 60,
        3 => 50,
        4 => 45,
        12 => 45
    );

    echo '<table class="bulk-pricing-table"><thead><tr><th>Quantity</th><th>Unit Price</th></tr></thead><tbody>';

    foreach ( $prices as $quantity => $price ) {
        echo '<tr><td>' . $quantity . '</td><td>' . wc_price( $price ) . '</td></tr>';
    }

    echo '</tbody></table>';
}

This table will display below the “Add to Cart” button, showing customers the price they’ll pay per unit depending on the quantity. You can adjust the $prices array based on your product-specific pricing rules.

Step 2: Add JavaScript to Dynamically Update the Price

To reflect price changes on the product page as the customer adjusts the quantity, we’ll add JavaScript that listens for quantity changes and updates the displayed price accordingly.

Add this JavaScript to your theme or via a custom JS file:

jQuery(document).ready(function($) {
    $('input.qty').on('change keyup', function() {
        let quantity = parseInt($(this).val());
        let price;

        // Define the bulk pricing rules
        if (quantity >= 12) {
            price = 45;
        } else if (quantity >= 4) {
            price = 45;
        } else if (quantity == 3) {
            price = 50;
        } else if (quantity == 2) {
            price = 60;
        } else {
            price = parseFloat($('.bulk-pricing-table td:nth-child(2)').first().text().replace(/[^0-9\.]/g, '')); // Get base price
        }

        // Update the displayed price
        $('.woocommerce-Price-amount').text(wc_price(price * quantity));
    });

    // Utility function to format price in WooCommerce style
    function wc_price(price) {
        return '$' + price.toFixed(2); // Adjust currency symbol and formatting as needed
    }
});

This code:

• Monitors changes in the quantity field (input.qty) on the product page.
• Adjusts the displayed price based on the selected quantity using predefined bulk pricing rules.
• Updates the product’s displayed total price, giving customers real-time feedback.

Step 3: Resources and Additional Configuration

For reference, check out this Business Bloomer article on calculating totals as quantity changes on the product page. Additionally, if you’re adding more complex logic, remember to test your code across different browsers and WooCommerce themes to ensure compatibility.

Conclusion

With a combination of PHP and JavaScript, you can dynamically display bulk pricing on the WooCommerce product page, creating a smooth and engaging experience for customers. This approach offers flexibility for custom bulk pricing while providing a real-time pricing update on the product page.