In this tutorial we learn advanced jQuery action to apply discount on checkout using woocommerce. Here we used woocommerce hooks to apply discount with multiple checkboxes and radio buttons.

In discount box we have below conditions for radio button and checkbox. Mostly we are using conditional check for display woocommerce product variations. We will develop script using jQery and Apply condition checks using woocommerce’s default hooks.

If Radio button  is check then checkbox are not checked.
If checkboxes are checked then radio button are not checked.

Follow bellow steps to implement this beautiful script in your woocommerce website.

Step 1. Initial create html table to display discount box. See below code.

<table id="sc_discount" class="table" width="100%">
              <thead>
              <tr>
                <th>#</th>
                <th>Total Discount</th>
                <th>Max Realization</th>
                <th>Realization Select</th>
                <th>Description</th>
                <th>POI Descrption</th>
                <th>Select</th>
              </tr>
            </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>0</td>
                  <td>5.67</td>
                  <td>1.40</td>
                  <td></td>
                  <td>remarks</td>
                  <td>
                  <input type="checkbox" name="updatecard" data-index="1.3980821917808" data-itemcode="{"PromoId":1317,"Amount":1.3980821917808,"POSAmount":0,"Quantity":1,"DiscountType":0,"ReferenceCode":"BI_CASHBACK"}" value="99679" class="updatecard" readonly="">
                  </td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>0</td>
                  <td>5.67</td>
                  <td>4.27</td>
                  <td></td>
                  <td>remarks</td>
                  <td>
                  <input type="checkbox" name="updatecard" data-index="4.2719178082192" data-itemcode="{"PromoId":1317,"Amount":4.2719178082192,"POSAmount":0,"Quantity":1,"DiscountType":0,"ReferenceCode":"BI_CASHBACK"}" value="99679" class="updatecard" readonly="">
                  </td>
                </tr>
              <tr>
              <td>3</td>
              <td>2</td>
              <td>25</td>
              <td>25</td>
              <td>WOO Voucher Realization</td>
              <td>gift of 25 NIS</td>
              <td>
              <input type="radio" name="updatecard_one" data-index="25" data-itemcode="{"PromoId":1325,"Amount":25,"POSAmount":0,"Quantity":1,"DiscountType":2,"ReferenceCode":"SC_GIFT"}" value="99679" class="updatecard ucone" readonly="">
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>Total Discount</td>
              <td>7.3</td>
              <td>7.3</td>
              <td>WOO Buy And Get</td>
              <td></td>
              <td>
              <input type="radio" name="updatecard_one" data-index="7.3" data-itemcode="{"PromoId":1318,"Amount":7.3,"POSAmount":0,"Quantity":null,"DiscountType":"","ReferenceCode":""}" value="99679" class="updatecard ucone" readonly="">
              </td>
            </tr>
          </tbody>
</table>
<a class="applydisc trascard" href="javascript:void(0)" data-itemcode="" data-index="0">Apply Discount</a>

In above table, Displayed two checkbox and two radio button, These will follow above two condition as we discussed.

Step 2. Now we will apply jQuery event on click to set condition for radio and checkbox button.

$('.applydisc').live( 'click', function(){
        var dataindex = $("input[name=updatecard_one]:checked").attr('data-index');
        var ditems = $("input[name=updatecard_one]:checked").attr('data-itemcode');
        var serviceid = $("input[name=updatecard_one]:checked").val();

        if ($("input[name=updatecard]:checked").length > 0) {
            var ditems = [];
            var dataindex = 0;
            var serviceid = 0;

           $.each($("input[name='updatecard']:checked"), function(){
                dataindex += Number($(this).attr('data-index'));
                ditems.push($(this).attr('data-itemcode'));
                serviceid = $(this).val();
            }); 

           dataindex = dataindex;
           ditems = ditems.join(", ");
           serviceid = serviceid;
        }

        alert("Discounts amount is: " + dataindex);
        alert("Discounts array is: " + ditems);
        alert("Discounts service id is: " + serviceid);
    });

Step 3. Now we used woocommerce checkout page hook ‘woocommerce_checkout_before_order_review’ to display above table on checkout page. You can copy above code and past in function ‘av_checkout_form_card’ and add these all code in function.php file.

function av_checkout_form_card(){

  //Write code to display on checkout page

}

add_action('woocommerce_checkout_before_order_review', 'av_checkout_form_card');

Thank you for being here, Please share your feedback in below comment section.