How to Apply Percentage-Based Fee for Checkbox Input Field in WooCommerce?

This WooCommerce customization introduces a custom checkbox field, enabling customers to include a logo with their purchase. When selected, a small percentage of the product price is added to the total for the logo. This percentage-based fee is dynamically calculated and added to the total. By providing customers with the option to add a logo for a small percentage of the product price, store owners can boost the average order value, resulting in increased revenue per sale. Let’s see how logo inclusion beside each custom input field is implemented!

Solution: Apply Percentage-Based Fee for Checkbox Input Field

The code adds a custom checkbox field labeled “Choose Logo” on the WooCommerce product page. When the checkbox is checked, it dynamically calculates a logo price, which is set to 15% of the product price.

// Display custom checkbox field and calculate subtotal and total on product page
add_action( 'woocommerce_before_add_to_cart_button', 'ts_display_logo_checkbox_field', 9 );
function ts_display_logo_checkbox_field() {
    echo '<div class="custom-checkbox-field">';
    woocommerce_form_field( 'ts_choose_logo_checkbox', array(
        'type'  => 'checkbox',
        'label' => 'Choose Logo',
    ));
    echo '</div>';

    // Add jQuery script for dynamic calculation
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Calculate subtotal and total based on checkbox selection
        $('#ts_choose_logo_checkbox').change(function() {
            var productPrice = parseFloat(<?php echo wc_get_product()->get_price(); ?>);
            var logoPrice = $(this).is(':checked') ? productPrice * 0.15 : 0; // Set to 15% of product price if checked, otherwise 0
            var total = productPrice + logoPrice;

            // Update subtotal and total values
            $('#subtotal').text('$' + productPrice.toFixed(2));
            $('#logo-price').text('+$' + logoPrice.toFixed(2));
            $('#total').text('$' + total.toFixed(2));

            // Store the total price in a hidden field for cart handling
            $('#ts_total_price').val(total.toFixed(2));
        });

        // Initialize the total price on page load
        var initialPrice = parseFloat(<?php echo wc_get_product()->get_price(); ?>);
        $('#ts_total_price').val(initialPrice.toFixed(2));
    });
    </script>
    <input type="hidden" id="ts_total_price" name="ts_total_price" value="">
    <?php
}

// Display subtotal, logo price, and total above Add to Cart button in a table
add_action( 'woocommerce_before_add_to_cart_button', 'ts_display_subtotal_logo_and_total', 10 );
function ts_display_subtotal_logo_and_total() {
    $product_price = wc_get_product()->get_price();
    echo '<table style="margin-bottom: 10px; width: 100%; border-collapse: collapse;">';
    echo '<tr><td>Subtotal:</td><td id="subtotal">$' . number_format($product_price, 2) . '</td></tr>';
    echo '<tr><td>Logo (optional):</td><td id="logo-price">+$0.00</td></tr>'; // Initialize as $0.00
    echo '<tr><td>Total:</td><td id="total">$' . number_format($product_price, 2) . '</td></tr>';
    echo '</table>';
}

// Add custom total price to the cart item data
add_filter( 'woocommerce_add_cart_item_data', 'ts_add_custom_price_to_cart', 10, 2 );
function ts_add_custom_price_to_cart( $cart_item_data, $product_id ) {
    if ( isset( $_POST['ts_choose_logo_checkbox'] ) && $_POST['ts_choose_logo_checkbox'] ) {
        if ( isset( $_POST['ts_total_price'] ) ) {
            $cart_item_data['custom_total_price'] = (float) sanitize_text_field( $_POST['ts_total_price'] );
        }
    }
    return $cart_item_data;
}

// Set the custom price in the cart
add_action( 'woocommerce_before_calculate_totals', 'ts_set_custom_cart_total', 10 );
function ts_set_custom_cart_total( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
        return;
    }

    // Loop through each cart item
    foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
        if ( isset( $cart_item['custom_total_price'] ) ) {
            // Set the price to the custom total price
            $cart_item['data']->set_price( $cart_item['custom_total_price'] );
        }
    }
}

Output

Customers on visiting the product page will see the newly added custom checkbox input field as one of the product options. If customers click on that checkbox labeled as ‘Add a logo’, the code will dynamically add percentage fees of 15% from the main product price. This added fee will also be added to the total and prominently displayed on the product page itself.

Just like applying percentage based fees on selection of the checkbox, we can also implement dynamic discounts based on the selection of custom input fields. By knowing that they can unlock exclusive savings based on their selections, customers will eagerly engage with your product options.