Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Apply Percentage-Based Fee Condition 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 Condition 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 = <?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 subtotal = productPrice + logoPrice;
                var total = subtotal;
                
                // Update subtotal and total values
                $('#subtotal').text('$' + productPrice.toFixed(2));
                $('#logo-price').text('+$' + logoPrice.toFixed(2));
                $('#total').text('$' + total.toFixed(2));
            });
        });
    </script>
    <?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 price to the cart item data for products with logo
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'] ) {
        $product = wc_get_product( $product_id );
        $product_price = (float) $product->get_price();
        $logo_price = $product_price * 0.15; // 15% of the original product price
        $cart_item_data['logo_price'] = $logo_price;
    }
    return $cart_item_data;
}

// Calculate total price for cart items
add_action( 'woocommerce_before_calculate_totals', 'ts_calculate_cart_total', 10 );
function ts_calculate_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['logo_price'] ) ) {
            // Update the price of the product
            $cart_item['data']->set_price( $cart_item['data']->get_price() + $cart_item['logo_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.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x