Add Custom discount in WooCommerce Checkout based on a switch toggle

Question

The general idea here is to add a "switch" that can be toggled and if it is toggled, by the customer, a discount of 5% is given to the order.

This happens on the WooCommerce checkout page.

I have the CSS style and the overall functionality and it all looks great - but nothing happens when the switch is toggled on / off.

Expected output: Customer toggles the switch and a discount of 5% is given. If the customer toggles the switch back, the discount is removed.

CSS code:

.switch-toggle-wrapper{
margin: 40px 0px 40px 0px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Based on Add a checkout checkbox field that enable a percentage fee in Woocommerce answer, here is the code I am using:

add_action( 'woocommerce_review_order_before_payment', 'switch_toggle_fee_on_checkout', 20 );
function switch_toggle_fee_on_checkout() { ?>

    <div class="switch-toggle-wrapper">
    <span>To add the company discount, toggle this switch. </span>
    <label class="switch">
  
        <input id="company_discount" type="checkbox">
  
        <span class="slider round"></span>
    </label>
    </div>

<?php
}

add_action( 'wp_footer', 'checkout_company_discount_script' );
function checkout_company_discount_script() {

    if( is_checkout() && ! is_wc_endpoint_url() ) :

    if( WC()->session->__isset('enable_discount') )
        WC()->session->__unset('enable_discount')

    ?>
    
    <script type="text/javascript">
    
        jQuery( function($){
        
            if (typeof wc_checkout_params === 'undefined') 
            
                return false;

        $('form.checkout').on('change', 'input[name=company_discount]', function(e){
            var fee = $(this).prop('checked') === true ? '1' : '';

            $.ajax( {
                
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'enable_discount',
                    'enable_discount': fee,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                },
            });
        });
    });

    </script>

    <?php
    endif;
}

add_action( 'wp_ajax_enable_fee', 'checkout_company_discount_ajax' );
add_action( 'wp_ajax_nopriv_enable_fee', 'checkout_company_discount_ajax' );
function checkout_company_discount_ajax() {

    if ( isset($_POST['enable_discount']) ) {

        WC()->session->set('enable_discount', ($_POST['enable_discount'] ? true : false) );
    }
    die();
}

add_action( 'woocommerce_cart_calculate_fees', 'checkout_company_discount', 20, 1 );
function checkout_company_discount( $cart ) {

    if ( ( is_admin() && ! defined( 'DOING_AJAX' ) ) || ! is_checkout() )

        return;

    $subtotal = WC()->cart->get_subtotal();
    $company_discount = $subtotal * 0.05; // give 5% discount if and when the switch is toggled 

    if( WC()->session->get('enable_discount') )
    
        $cart->add_fee( __( 'Company Discount', 'woocommerce')." (-$company_discount%)", ($company_discount) );
}

This is how it looks:

When you use an existing code to make your own code, please always add the link in your question, it's simply something fair for its author. — LoicTheAztec, Mar 03 '21 at 09:44

LoicTheAztec · Accepted Answer · 2021-03-03T09:53:50.160

I have revisited your code a bit as there was some missing things:

The name attribute was missing from checkbox input field,
The Ajax action name was wrong on the composite hook from the Ajax receiver part.

Use the following:

// Display the field
add_action( 'woocommerce_review_order_before_payment', 'switch_toggle_fee_on_checkout', 20 );
function switch_toggle_fee_on_checkout() {

    echo '<div class="switch-toggle-wrapper">
    <span>' . __("To add the company discount, toggle this switch.", "woocommerce") . ' </span>
    <label class="switch">
        <input type="checkbox" name="company_discount" id="company_discount">
        <span class="slider round"></span>
    </label>
    </div>';
}

// jQuery Ajax sender function
add_action( 'wp_footer', 'checkout_toggle_discount_script' );
function checkout_toggle_discount_script() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    if( WC()->session->__isset('enable_discount') ) {
        WC()->session->__unset('enable_discount');
    }
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on('change', 'input[name="company_discount"]', function(){
            console.log('toggle');
            var toggle = $(this).prop('checked') === true ? '1' : '0';
            $.ajax( {
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'enable_discount',
                    'discount_toggle': toggle,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                },
            });
        });
    });
    </script>
    <?php
    endif;
}

// Ajax receiver: Set a WC_Session variable
add_action( 'wp_ajax_enable_discount', 'checkout_enable_discount_ajax' );
add_action( 'wp_ajax_nopriv_enable_discount', 'checkout_enable_discount_ajax' );
function checkout_enable_discount_ajax() {
    if ( isset($_POST['discount_toggle']) ) {
        WC()->session->set('enable_discount', esc_attr($_POST['discount_toggle']) ? true : false );
        echo esc_attr($_POST['discount_toggle']);
    }
    wp_die();
}

// Set the discount
add_action( 'woocommerce_cart_calculate_fees', 'checkout_set_discount', 20, 1 );
function checkout_set_discount( $cart ) {
    if ( ( is_admin() && ! defined('DOING_AJAX') ) || ! is_checkout() )
        return;

    $subtotal   = WC()->cart->get_subtotal();
    $percentage = 5;
    $discount   = $subtotal * $percentage / 100; 

    // Give 5% discount if and when the switch is toggled
    if( WC()->session->get('enable_discount') ) {
        $cart->add_fee( sprintf( __( 'Company Discount (%s)', 'woocommerce'), $percentage .'%' ), -$discount );
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

Add Custom discount in WooCommerce Checkout based on a switch toggle

1 Answers1